---
title: "உட்பொதிக்கக்கூடிய குரல் விட்ஜெட்"
description: "சில வரி குறியீட்டுடன் எந்த வலைத்தளத்திலும் ஒரு குரல் AI ஏஜென்ட்டைச் சேர்க்கவும்"
---

ThunderPhone உட்பொதிக்கக்கூடிய குரல் விட்ஜெட், உங்கள் வலைத்தள பார்வையாளர்கள் உலாவியிலிருந்தே நேரடியாக ஒரு AI ஏஜென்ட்டுடன் பேச அனுமதிக்கிறது. தொலைபேசி அழைப்பு தேவையில்லை -- பயனர்கள் ஒரு பொத்தானைக் கிளிக் செய்து, ThunderPhone வழங்கும் நிகழ்நேர குரல் உரையாடலைத் தொடங்குவார்கள்.

இந்த விட்ஜெட், தனிப்பயனாக்கக்கூடிய வலியுறுத்தல் வண்ணங்கள் மற்றும் நிலைப்பாட்டுடன், ஒளி மற்றும் இருண்ட தீம்களுக்கு ஏற்ப மாறும் கண்ணாடி தோற்றப் பட்டையாகக் காட்டப்படும். இது `@thunderphone/widget` npm தொகுப்பாக விநியோகிக்கப்படுகிறது; பண்ட்லர் இல்லாத சூழல்களுக்காக CDN மூலமும் கிடைக்கிறது.

<Frame>
  <img src="/images/widget-showcase.png" alt="ThunderPhone widget in light and dark themes with various accent colors" />
</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 ஏஜென்ட்டுடன் இணைக்கும் கண்ணாடி தோற்ற அழைப்புப் பட்டையைக் காண்பார்கள்.

---

## தனிப்பயனாக்கம்

விட்ஜெட்டில் தோற்றத்திற்கான நான்கு props உள்ளன:

| Prop | இயல்புநிலை | விளக்கம் |
|------|---------|-------------|
| `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>

மேலும் மூன்று props தோற்றத்தை விட அமர்வைத் தனிப்பயனாக்குகின்றன -- அழைப்பு தொடங்கும்போது அனைத்தும் அமர்வுக் கோரிக்கைக்கு அனுப்பப்படும்:

| Prop | விளக்கம் |
|------|-------------|
| `language` | ஒவ்வொரு அமர்விற்குமான மொழி மேலெழுதுதல் -- `en`, `es`, அல்லது `fr-FR` போன்ற குறியீடு அல்லது லொக்கேல் |
| `voice` | ஒவ்வொரு அமர்விற்குமான குரல் மேலெழுதுதல் -- `maria` போன்ற குரல் பெயர் |
| `context` | ஏஜென்ட்டுக்கு அனுப்பப்படும் உண்மை அடிப்படையிலான பக்கம் அல்லது தளச் சூழல் (சர்வர்-பக்கத்தில் 12,000 எழுத்துகளாகக் குறைக்கப்படும்) |

முழுமையான props அட்டவணைக்கு [React கூறு குறிப்பைக்](/ta/widget/react) காணவும்.

முழுமையாகத் தனிப்பயனாக்கப்பட்ட UIக்கு, உங்கள் சொந்த இடைமுகத்தை உருவாக்கும் போது குரல் அமர்வை நிர்வகிக்க [headless hook](/ta/widget/headless-hook) ஐப் பயன்படுத்தவும். ஆடியோ-எதிர்வினை காட்சிப்படுத்தல்களை உருவாக்க, இந்த hook நிகழ்நேர ஆடியோ நிலைகளை வெளிப்படுத்துகிறது.

---

## ஒருங்கிணைப்பு விருப்பங்கள்

உங்கள் ஸ்டாக்கிற்கு பொருந்தும் ஒருங்கிணைப்பு முறையைத் தேர்ந்தெடுக்கவும்:

<CardGroup cols={3}>
  <Card title="React கூறு" icon="react" href="/ta/widget/react">
    உள்ளமைக்கப்பட்ட அழைப்பு கட்டுப்பாடுகள் மற்றும் நிலைக் காட்சியுடன் முன்கட்டமைக்கப்பட்ட UI கூறு. இறக்குமதி செய்து, props-ஐ அனுப்பினால் முடிந்தது.
  </Card>
  <Card title="Headless ஹுக்" icon="code" href="/ta/widget/headless-hook">
    UI மீது முழுக் கட்டுப்பாடு. நீங்கள் உங்கள் சொந்த இடைமுகத்தை உருவாக்கும் போது `useThunderPhone` ஹுக் குரல் அமர்வை நிர்வகிக்கும்.
  </Card>
  <Card title="CDN / ஸ்கிரிப்ட் டேக்" icon="globe" href="/ta/widget/cdn-script-tag">
    bundler தேவையில்லை. நிலையான தளங்கள், WordPress மற்றும் பிற React அல்லாத சூழல்களுக்கு ஸ்கிரிப்ட் டேக் மூலம் விட்ஜெட்டை ஏற்றவும்.
  </Card>
</CardGroup>

---

## ஸ்டைலிங்

இந்த விட்ஜெட்டில் `theme` prop மூலம் கட்டுப்படுத்தப்படும் உள்ளமைக்கப்பட்ட லைட் மற்றும் டார்க் தீம்களும், `primaryColor` prop மூலம் கட்டுப்படுத்தப்படும் accent நிறமும் உள்ளன. மேலும் ஆழமான தனிப்பயனாக்கத்திற்கு, CSS தனிப்பயன் பண்புகளையும் கிளாஸ்களையும் மேலெழுதலாம். விவரங்களுக்கு [ஸ்டைலிங் வழிகாட்டியை](/ta/widget/styling) பார்க்கவும்.

<Note>
  உதவி தேவையா? [support@thunderphone.com](mailto:support@thunderphone.com) இல் எங்களைத் தொடர்புகொள்ளவும்
</Note>