--- title: "CDN / સ્ક્રિપ્ટ ટૅગ" description: "બંડલર વિના કોઈપણ વેબસાઇટમાં ThunderPhone વૉઇસ વિજેટ ઉમેરો" --- CDN બિલ્ડ React ને આંતરિક રીતે બંડલ કરે છે, તેથી તમે વિજેટનો ઉપયોગ સ્ટેટિક સાઇટ્સ, WordPress, Webflow અથવા એવી કોઈપણ પેજ પર કરી શકો છો જ્યાં તમે HTML ઉમેરી શકો. npm, બંડલર કે ફ્રેમવર્ક જરૂરી નથી. ## CDN URLs ```html Latest (recommended) ``` ```html Pinned version ``` `latest` URLs એ જ છે જે ડેશબોર્ડનું એમ્બેડ સ્નિપેટ જનરેટર બનાવે છે. તે 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` માટેનું `