---
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 കോംപോണന്റ് റഫറൻസ്](/ml/widget/react) കാണുക.

പൂർണ്ണമായും ഇഷ്ടാനുസൃതമായ UI-ക്കായി, നിങ്ങളുടെ സ്വന്തം ഇന്റർഫേസ് നിർമിക്കുമ്പോൾ വോയ്‌സ് സെഷൻ നിയന്ത്രിക്കാൻ [ഹെഡ്‌ലെസ് hook](/ml/widget/headless-hook) ഉപയോഗിക്കുക. ഓഡിയോ-പ്രതികരണ ദൃശ്യവത്കരണങ്ങൾ നിർമിക്കുന്നതിനായി hook തത്സമയ ഓഡിയോ നിലകൾ ലഭ്യമാക്കുന്നു.

---

## ഇന്റഗ്രേഷൻ ഓപ്ഷനുകൾ

നിങ്ങളുടെ സ്റ്റാക്കിന് അനുയോജ്യമായ ഇന്റഗ്രേഷൻ രീതി തിരഞ്ഞെടുക്കുക:

<CardGroup cols={3}>
  <Card title="React കോംപോണന്റ്" icon="react" href="/ml/widget/react">
    ബിൽറ്റ്-ഇൻ കോൾ നിയന്ത്രണങ്ങളും സ്റ്റാറ്റസ് ഡിസ്പ്ലേയുമുള്ള മുൻകൂട്ടി നിർമിച്ച UI കോംപോണന്റ്. ഇംപോർട്ട് ചെയ്യുക, props നൽകുക, പൂർത്തിയായി.
  </Card>
  <Card title="ഹെഡ്‌ലെസ് ഹുക്ക്" icon="code" href="/ml/widget/headless-hook">
    UI-യിൽ പൂർണ നിയന്ത്രണം. നിങ്ങൾ സ്വന്തം ഇന്റർഫേസ് നിർമ്മിക്കുമ്പോൾ `useThunderPhone` ഹുക്ക് വോയ്‌സ് സെഷൻ നിയന്ത്രിക്കുന്നു.
  </Card>
  <Card title="CDN / സ്ക്രിപ്റ്റ് ടാഗ്" icon="globe" href="/ml/widget/cdn-script-tag">
    ബണ്ട്ലർ ആവശ്യമില്ല. സ്റ്റാറ്റിക് സൈറ്റുകൾ, WordPress, മറ്റ് React ഇതര പരിതസ്ഥിതികൾ എന്നിവയ്ക്കായി സ്ക്രിപ്റ്റ് ടാഗ് വഴി വിഡ്ജറ്റ് ലോഡ് ചെയ്യുക.
  </Card>
</CardGroup>

---

## സ്റ്റൈലിംഗ്

`theme` prop നിയന്ത്രിക്കുന്ന ബിൽറ്റ്-ഇൻ ലൈറ്റ്, ഡാർക്ക് തീമുകളും `primaryColor` prop നിയന്ത്രിക്കുന്ന ആക്സെന്റ് നിറവും വിഡ്ജറ്റിൽ ഉൾപ്പെടുന്നു. കൂടുതൽ ആഴത്തിലുള്ള കസ്റ്റമൈസേഷനായി, CSS കസ്റ്റം പ്രോപ്പർട്ടികളും ക്ലാസുകളും ഓവർറൈഡ് ചെയ്യാം. വിശദാംശങ്ങൾക്ക് [സ്റ്റൈലിംഗ് ഗൈഡ്](/ml/widget/styling) കാണുക.

<Note>
  സഹായം ആവശ്യമുണ്ടോ? [support@thunderphone.com](mailto:support@thunderphone.com) എന്ന വിലാസത്തിൽ ബന്ധപ്പെടുക
</Note>