---
title: "એમ્બેડ કરી શકાય તેવું વૉઇસ વિજેટ"
description: "થોડા કોડ લાઇન્સ સાથે કોઈપણ વેબસાઇટમાં વૉઇસ AI એજન્ટ ઉમેરો"
---

ThunderPhoneનું એમ્બેડ કરી શકાય તેવું વૉઇસ વિજેટ તમારી વેબસાઇટના મુલાકાતીઓને બ્રાઉઝરથી સીધા AI એજન્ટ સાથે વાત કરવાની સુવિધા આપે છે. ફોન કૉલની જરૂર નથી -- વપરાશકર્તાઓ બટન પર ક્લિક કરે છે અને ThunderPhone દ્વારા સંચાલિત રીઅલ-ટાઇમ વૉઇસ વાતચીત શરૂ કરે છે.

વિજેટ ગ્લાસમોર્ફિક બાર તરીકે રેન્ડર થાય છે, જે કસ્ટમાઇઝ કરી શકાય તેવા એક્સન્ટ રંગો અને સ્થાન સાથે લાઇટ તથા ડાર્ક થીમને અનુકૂળ થાય છે. તે `@thunderphone/widget` npm પૅકેજ તરીકે વિતરિત થાય છે અને નૉન-બંડલર એન્વાયરમેન્ટ માટે CDN મારફતે પણ ઉપલબ્ધ છે.

<Frame>
  <img src="/images/widget-showcase.png" alt="વિવિધ એક્સન્ટ રંગો સાથે લાઇટ અને ડાર્ક થીમમાં ThunderPhone વિજેટ" />
</Frame>

## પૂર્વજરૂરીયાતો

વિજેટ એમ્બેડ કરતા પહેલાં, [ThunderPhone ડેશબોર્ડ](https://app.thunderphone.com)માં આ ત્રણ પગલાં પૂર્ણ કરો:

<Steps>
<Step title="પ્રકાશિત કરી શકાય તેવી API કી બનાવો">
  ડેશબોર્ડ સેટિંગ્સમાં **ડેવલપર્સ** પર જાઓ અને પ્રકાશિત કરી શકાય તેવી કી બનાવો. પ્રકાશિત કરી શકાય તેવી કીઓ `pk_live_`થી શરૂ થાય છે અને ક્લાયન્ટ-સાઇડ કોડમાં સામેલ કરવા માટે સુરક્ષિત છે.
</Step>

<Step title="મંજૂર ડોમેન્સ ગોઠવો">
  એ જ ડેવલપર્સ સેટિંગ્સમાં, જ્યાં વિજેટ એમ્બેડ કરવામાં આવશે તે ડોમેન્સ ઉમેરો. ડેવલપમેન્ટ માટે `localhost` હંમેશા મંજૂર છે. વાઇલ્ડકાર્ડ્સ સપોર્ટેડ છે (દા.ત., `*.example.com`).
</Step>

<Step title="વેબ વિજેટ બનાવો">
  ડેશબોર્ડમાં **વેબ વિજેટ્સ** પર જાઓ અને વિજેટ બનાવો. તમે એક્સપોઝ કરવા માંગો છો તે એજન્ટ અને ઉપયોગ કરવાની પ્રકાશિત કરી શકાય તેવી કી પસંદ કરો. એજન્ટ તમારી પ્રકાશિત કરી શકાય તેવી કી કન્ફિગરેશનમાંથી આપમેળે નક્કી થાય છે.
</Step>
</Steps>

<Warning>
  પ્રકાશિત કરી શકાય તેવી કીઓ (`pk_live_...`) તમારા ગુપ્ત API ટોકન્સ જેવી **નથી**. પ્રકાશિત કરી શકાય તેવી કીઓ ક્લાયન્ટ-સાઇડ ઉપયોગ માટે ડિઝાઇન કરવામાં આવી છે અને તમારા મંજૂર ડોમેન્સ પર વિજેટ સત્રો સુધી મર્યાદિત છે. ક્લાયન્ટ-સાઇડ કોડમાં ક્યારેય તમારા ગુપ્ત API ટોકનનો ઉપયોગ કરશો નહીં.
</Warning>

---

## ઝડપી શરૂઆત

પૅકેજ ઇન્સ્ટોલ કરો:

```bash
npm install @thunderphone/widget
```

તમારી એપમાં વિજેટ ઉમેરો:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

બસ એટલું જ. તમારા વપરાશકર્તાઓને ગ્લાસમોર્ફિક કૉલ બાર દેખાશે, જે તેમને એક જ ક્લિકથી તમારા AI એજન્ટ સાથે જોડે છે.

---

## કસ્ટમાઇઝેશન

વિજેટમાં દેખાવ માટે ચાર પ્રોપ્સ છે:

| પ્રોપ | ડિફૉલ્ટ | વર્ણન |
|------|---------|-------------|
| `theme` | `'light'` | સફેદ ગ્લાસ માટે `'light'`, ડાર્ક ગ્લાસ માટે `'dark'` |
| `primaryColor` | `'#000000'` (લાઇટ) / `'#ffffff'` (ડાર્ક) | શરૂ બટન, વેવફોર્મ અને કનેક્ટિંગ સૂચક માટે એક્સન્ટ રંગ |
| `title` | `'Voice assistant'` | વિજેટમાં દર્શાવાતો ટેક્સ્ટ |
| `position` | `'bottom-right'` | વ્યૂપોર્ટનો ખૂણો: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
```tsx Light theme (default)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
```

```tsx Dark theme with custom color
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>
```
</CodeGroup>

વધુ ત્રણ પ્રોપ્સ દેખાવને બદલે સત્રને કસ્ટમાઇઝ કરે છે -- કૉલ શરૂ થાય ત્યારે બધા સત્ર વિનંતી પર ફૉર્વર્ડ કરવામાં આવે છે:

| પ્રોપ | વર્ણન |
|------|-------------|
| `language` | પ્રતિ-સત્ર ભાષા ઓવરરાઇડ -- `en`, `es`, અથવા `fr-FR` જેવો કોડ અથવા લોકેલ |
| `voice` | પ્રતિ-સત્ર વૉઇસ ઓવરરાઇડ -- `maria` જેવું વૉઇસ નામ |
| `context` | એજન્ટને મોકલવામાં આવતો તથ્યાત્મક પેજ અથવા સાઇટ સંદર્ભ (સર્વર-સાઇડ પર 12,000 અક્ષરો સુધી ટૂંકાવવામાં આવે છે) |

પૂર્ણ પ્રોપ્સ ટેબલ માટે [React કમ્પોનન્ટ રેફરન્સ](/gu/widget/react) જુઓ.

સંપૂર્ણપણે કસ્ટમ UI માટે, તમે પોતાનું ઇન્ટરફેસ બનાવતાં હો ત્યારે વૉઇસ સત્ર મેનેજ કરવા [હેડલેસ હૂક](/gu/widget/headless-hook)નો ઉપયોગ કરો. હૂક ઑડિયો-રિએક્ટિવ વિઝ્યુઅલાઇઝેશન બનાવવા માટે રીઅલ-ટાઇમ ઑડિયો લેવલ્સ એક્સપોઝ કરે છે.

---

## એકીકરણ વિકલ્પો

તમારા સ્ટેકને અનુરૂપ એકીકરણ પદ્ધતિ પસંદ કરો:

<CardGroup cols={3}>
  <Card title="React કોમ્પોનેન્ટ" icon="react" href="/gu/widget/react">
    બિલ્ટ-ઇન કૉલ કંટ્રોલ્સ અને સ્ટેટસ ડિસ્પ્લે સાથેનો પૂર્વનિર્મિત UI કોમ્પોનેન્ટ. ઇમ્પોર્ટ કરો, props પાસ કરો, થઈ ગયું.
  </Card>
  <Card title="હેડલેસ હૂક" icon="code" href="/gu/widget/headless-hook">
    UI પર સંપૂર્ણ નિયંત્રણ. `useThunderPhone` હૂક વૉઇસ સેશનનું સંચાલન કરે છે, જ્યારે તમે તમારું પોતાનું ઇન્ટરફેસ બનાવો છો.
  </Card>
  <Card title="CDN / સ્ક્રિપ્ટ ટૅગ" icon="globe" href="/gu/widget/cdn-script-tag">
    બંડલરની જરૂર નથી. સ્ટેટિક સાઇટ્સ, WordPress અને અન્ય non-React એન્વાયરમેન્ટ્સ માટે સ્ક્રિપ્ટ ટૅગ દ્વારા વિજેટ લોડ કરો.
  </Card>
</CardGroup>

---

## સ્ટાઇલિંગ

વિજેટ `theme` prop દ્વારા નિયંત્રિત બિલ્ટ-ઇન લાઇટ અને ડાર્ક થીમ્સ સાથે આવે છે, તેમજ `primaryColor` prop દ્વારા નિયંત્રિત એક્સેન્ટ કલર સાથે આવે છે. વધુ ઊંડા કસ્ટમાઇઝેશન માટે, તમે CSS કસ્ટમ પ્રોપર્ટીઝ અને ક્લાસિસ ઓવરરાઇડ કરી શકો છો. વિગતો માટે [સ્ટાઇલિંગ માર્ગદર્શિકા](/gu/widget/styling) જુઓ.

<Note>
  મદદ જોઈએ છે? [support@thunderphone.com](mailto:support@thunderphone.com) પર અમારો સંપર્ક કરો
</Note>