---
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 కాంపొనెంట్ రిఫరెన్స్](/te/widget/react)ను చూడండి.

పూర్తిగా అనుకూల UI కోసం, మీరు మీ స్వంత ఇంటర్‌ఫేస్‌ను రూపొందిస్తుండగా వాయిస్ సెషన్‌ను నిర్వహించడానికి [హెడ్‌లెస్ హుక్](/te/widget/headless-hook)ను ఉపయోగించండి. ఆడియో-ప్రతిస్పందన విజువలైజేషన్‌లను రూపొందించడానికి హుక్ రియల్‌టైమ్ ఆడియో స్థాయిలను అందిస్తుంది.

---

## ఇంటిగ్రేషన్ ఎంపికలు

మీ స్టాక్‌కు సరిపోయే ఇంటిగ్రేషన్ విధానాన్ని ఎంచుకోండి:

<CardGroup cols={3}>
  <Card title="React కాంపొనెంట్" icon="react" href="/te/widget/react">
    అంతర్నిర్మిత కాల్ నియంత్రణలు మరియు స్థితి ప్రదర్శనతో ముందే రూపొందించిన UI కాంపొనెంట్. ఇంపోర్ట్ చేయండి, props‌ను పంపండి, పూర్తయింది.
  </Card>
  <Card title="హెడ్‌లెస్ హుక్" icon="code" href="/te/widget/headless-hook">
    UIపై పూర్తి నియంత్రణ. మీరు మీ స్వంత ఇంటర్‌ఫేస్‌ను రూపొందిస్తుండగా `useThunderPhone` హుక్ వాయిస్ సెషన్‌ను నిర్వహిస్తుంది.
  </Card>
  <Card title="CDN / స్క్రిప్ట్ ట్యాగ్" icon="globe" href="/te/widget/cdn-script-tag">
    బండ్లర్ అవసరం లేదు. స్టాటిక్ సైట్‌లు, WordPress మరియు ఇతర React కాని పరిసరాల కోసం స్క్రిప్ట్ ట్యాగ్ ద్వారా విడ్జెట్‌ను లోడ్ చేయండి.
  </Card>
</CardGroup>

---

## స్టైలింగ్

విడ్జెట్‌లో `theme` prop ద్వారా నియంత్రించబడే అంతర్నిర్మిత లైట్ మరియు డార్క్ థీమ్‌లు, అలాగే `primaryColor` prop ద్వారా నియంత్రించబడే యాక్సెంట్ రంగు ఉంటాయి. మరింత లోతైన అనుకూలీకరణ కోసం, మీరు CSS కస్టమ్ ప్రాపర్టీలు మరియు క్లాసులను ఓవర్‌రైడ్ చేయవచ్చు. వివరాల కోసం [స్టైలింగ్ గైడ్](/te/widget/styling) చూడండి.

<Note>
  మీకు సహాయం కావాలా? [support@thunderphone.com](mailto:support@thunderphone.com) వద్ద మమ్మల్ని సంప్రదించండి
</Note>