--- 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`-നുള്ള `