--- title: "CDN / స్క్రిప్ట్ ట్యాగ్" description: "బండ్లర్ లేకుండా ఏ వెబ్‌సైట్‌కైనా ThunderPhone వాయిస్ విడ్జెట్‌ను జోడించండి" --- CDN బిల్డ్ Reactను అంతర్గతంగా బండిల్ చేస్తుంది, కాబట్టి మీరు స్టాటిక్ సైట్‌లు, WordPress, Webflow లేదా HTML జోడించగల ఏ పేజీలోనైనా విడ్జెట్‌ను ఉపయోగించవచ్చు. npm, బండ్లర్ లేదా ఫ్రేమ్‌వర్క్ అవసరం లేదు. ## CDN URLలు ```html Latest (recommended) ``` ```html Pinned version ``` `latest` URLలను డ్యాష్‌బోర్డ్ ఎంబెడ్ స్నిపెట్ జనరేటర్ రూపొందిస్తుంది. అవి 5 నిమిషాల పాటు క్యాష్ చేయబడతాయి మరియు కొత్త స్థిరమైన విడుదలలను స్వయంచాలకంగా పొందుతాయి. పిన్ చేసిన `/widget/vX.Y.Z/` పాత్‌లు మార్పులేనివి మరియు దీర్ఘకాలం క్యాష్ చేయబడతాయి -- మీరు పిన్ చేస్తే, మీ అభివృద్ధికి ఉపయోగించే `@thunderphone/widget` npm విడుదలకు సంస్కరణను సరిపోల్చండి. --- ## ప్రాథమిక వినియోగం ```html

``` విడ్జెట్ లక్ష్య ఎలిమెంట్‌లో మౌంట్ అవుతుంది మరియు **వ్యూపోర్ట్ మూలలో స్థిర-స్థాన బార్‌గా** రెండర్ అవుతుంది (డిఫాల్ట్ `bottom-right`, `position` ఎంపిక ద్వారా నియంత్రించబడుతుంది). మౌంట్ ఎలిమెంట్ కేవలం React రూట్ మాత్రమే -- పేజీలో దాని స్థానం విడ్జెట్ కనిపించే స్థానాన్ని ప్రభావితం చేయదు. --- ## మౌంట్ ఎంపికలు `ThunderPhone.mount()` React కాంపొనెంట్‌కు ఉన్న అదే ఎంపికలను, అలాగే `element` ప్రాపర్టీని అంగీకరిస్తుంది: | ఎంపిక | రకం | అవసరం | డిఫాల్ట్ | వివరణ | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | అవును | -- | CSS సెలెక్టర్ (ఉదాహరణకు, `'#thunderphone'`) లేదా DOM ఎలిమెంట్ రిఫరెన్స్. | | `publishableKey` | `string` | అవును | -- | ప్రచురించదగిన API కీ (`pk_live_...`). కీ యొక్క విడ్జెట్ కాన్ఫిగరేషన్ నుండి ఏజెంట్ స్వయంచాలకంగా నిర్ణయించబడుతుంది. | | `theme` | `'light' \| 'dark'` | కాదు | `'light'` | రంగు పథకం. | | `primaryColor` | `string` | కాదు | `'#000000'` (లైట్) / `'#ffffff'` (డార్క్) | యాక్సెంట్ రంగుగా ఉపయోగించే CSS రంగు స్ట్రింగ్. | | `title` | `string` | కాదు | `'Voice assistant'` | విడ్జెట్ బార్‌లో ప్రదర్శించబడే టెక్స్ట్. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | కాదు | `'bottom-right'` | స్థిర వ్యూపోర్ట్ స్థానం. | | `apiBase` | `string` | కాదు | `'https://api.thunderphone.com/v1'` | API బేస్ URL ఓవర్‌రైడ్. | | `language` | `string` | కాదు | -- | ప్రతి సెషన్‌కు భాష ఓవర్‌రైడ్ -- `en`, `es` లేదా `fr-FR` వంటి భాష కోడ్ లేదా లోకేల్. సెట్ చేయనప్పుడు, ఏజెంట్ కాన్ఫిగర్ చేసిన భాష వర్తిస్తుంది. | | `voice` | `string` | కాదు | -- | ప్రతి సెషన్‌కు వాయిస్ ఓవర్‌రైడ్ -- `maria` వంటి వాయిస్ పేరు. సెట్ చేయనప్పుడు, ఏజెంట్ కాన్ఫిగర్ చేసిన వాయిస్ వర్తిస్తుంది. | | `context` | `string` | కాదు | -- | ఏజెంట్‌కు పంపబడే ప్రతి సెషన్‌కు సంబంధించిన వాస్తవిక పేజీ లేదా సైట్ సందర్భం. సర్వర్ వైపు 12,000 అక్షరాలకు కుదించబడుతుంది. | | `onConnect` | `() => void` | కాదు | -- | వాయిస్ సెషన్ కనెక్ట్ అయినప్పుడు కాల్ చేయబడుతుంది. | | `onDisconnect` | `() => void` | కాదు | -- | సెషన్ ముగిసినప్పుడు కాల్ చేయబడుతుంది. | | `onError` | `(error) => void` | కాదు | -- | లోపాలపై కాల్ చేయబడుతుంది. లోపంలో `error` (కోడ్) మరియు `message` ఫీల్డ్‌లు ఉంటాయి. | | `ringtone` | `boolean \| string` | కాదు | `false` | కనెక్ట్ అవుతున్నప్పుడు రింగ్‌టోన్ ప్లే చేయండి. డిఫాల్ట్ రింగ్‌టోన్ కోసం `true`, లేదా అనుకూల ఆడియో కోసం URL స్ట్రింగ్. | --- ## శుభ్రపరచడం `ThunderPhone.mount()` శుభ్రపరిచే మెథడ్‌లతో కూడిన విడ్జెట్ ఇన్‌స్టాన్స్‌ను తిరిగి ఇస్తుంది: ```html ``` `unmount()` మరియు `destroy()` రెండూ ఒకే పని చేస్తాయి -- అవి సక్రియ వాయిస్ సెషన్‌ను డిస్‌కనెక్ట్ చేసి, DOM నుండి విడ్జెట్‌ను తొలగిస్తాయి. మీ కోడ్‌లో ఏది మెరుగ్గా చదవబడుతుందో దానిని ఉపయోగించండి. సింగిల్-పేజ్ అప్లికేషన్‌లలో ఇతర పేజీకి వెళ్లేటప్పుడు లేదా కంటైనింగ్ ఎలిమెంట్ తొలగించబడినప్పుడు విడ్జెట్‌ను ఎల్లప్పుడూ శుభ్రపరచండి. దీనివల్ల సక్రియ వాయిస్ సెషన్‌లు సరిగ్గా డిస్‌కనెక్ట్ అవుతాయి. --- ## ఉదాహరణలు ### అనుకూల రంగుతో డార్క్ థీమ్ ```html

``` ### అనుకూల స్థానం ```html

``` ### ఈవెంట్ కాల్‌బ్యాక్‌లతో ```html

``` ### రింగ్‌టోన్‌తో ```html

``` ### DOM ఎలిమెంట్ రిఫరెన్స్‌ను ఉపయోగించడం ```html

``` ### WordPress / CMS ఇంటిగ్రేషన్ దీన్ని కస్టమ్ HTML బ్లాక్‌కు లేదా మీ థీమ్ ఫుటర్‌కు జోడించండి: ```html ``` `

` ఎక్కడైనా ఉంచవచ్చు -- ఇది కేవలం మౌంట్ పాయింట్ మాత్రమే. విడ్జెట్ స్వయంగా వ్యూపోర్ట్ మూలలో స్థిర ఓవర్‌లేగా రెండర్ అవుతుంది (`position` ఎంపిక ద్వారా సెట్ చేయబడుతుంది) మరియు చుట్టుపక్కల కంటెంట్‌తో కలిసి ప్రవహించదు. --- ## సమస్య పరిష్కారం CSS మరియు JS ఫైల్‌లు రెండూ లోడ్ అయ్యాయని నిర్ధారించుకోండి. నెట్‌వర్క్ లోపాల కోసం బ్రౌజర్ కన్సోల్‌ను తనిఖీ చేయండి. `ThunderPhone.mount()`ను కాల్ చేయడానికి ముందు లక్ష్య ఎలిమెంట్ DOMలో ఉందని ధృవీకరించండి. స్క్రిప్ట్ ఇంకా లోడ్ కాలేదు. `widget.js` కోసం ఉన్న `