--- title: "CDN / ஸ்கிரிப்ட் குறிச்சொல்" description: "பண்ட்லர் இல்லாமல் எந்த வலைத்தளத்திலும் ThunderPhone குரல் விட்ஜெட்டைச் சேர்க்கவும்" --- CDN பில்ட் React-ஐ உள்நிலையாக தொகுக்கிறது; எனவே நிலையான தளங்கள், WordPress, Webflow அல்லது HTML சேர்க்கக்கூடிய எந்தப் பக்கத்திலும் விட்ஜெட்டை பயன்படுத்தலாம். npm, bundler அல்லது framework தேவையில்லை. ## CDN URL-கள் ```html Latest (recommended) ``` ```html Pinned version ``` `latest` URL-களையே டாஷ்போர்டின் embed snippet generator உருவாக்குகிறது. அவை 5 நிமிடங்களுக்கு cache செய்யப்படும்; மேலும் புதிய நிலையான வெளியீடுகளை தானாகப் பெறும். Pinned செய்யப்பட்ட `/widget/vX.Y.Z/` பாதைகள் மாற்றமுடியாதவை மற்றும் நீண்டகாலம் cache செய்யப்படும் -- நீங்கள் pin செய்தால், உருவாக்கும்போது பயன்படுத்தும் `@thunderphone/widget` npm வெளியீட்டுடன் பதிப்பைப் பொருத்தவும். --- ## அடிப்படை பயன்பாடு ```html
``` விட்ஜெட் இலக்கு உறுப்பில் mount ஆகி, **viewport-இன் ஒரு மூலையில் நிலையான-நிலை பட்டையாக** ரெண்டர் செய்யப்படும் (இயல்புநிலை `bottom-right`; `position` விருப்பத்தால் கட்டுப்படுத்தப்படுகிறது). Mount உறுப்பு React root மட்டுமே -- பக்கத்தில் அதன் இருப்பிடம், விட்ஜெட் எங்கு தோன்றும் என்பதைப் பாதிக்காது. --- ## Mount விருப்பங்கள் `ThunderPhone.mount()` ஆனது React component-இன் அதே விருப்பங்களையும், `element` பண்பையும் ஏற்கிறது: | விருப்பம் | வகை | அவசியம் | இயல்புநிலை | விளக்கம் | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | ஆம் | -- | CSS selector (எ.கா., `'#thunderphone'`) அல்லது DOM உறுப்பு குறிப்பு. | | `publishableKey` | `string` | ஆம் | -- | வெளியிடக்கூடிய API விசை (`pk_live_...`). விசையின் விட்ஜெட் உள்ளமைவிலிருந்து ஏஜென்ட் தானாகத் தீர்மானிக்கப்படும். | | `theme` | `'light' \| 'dark'` | இல்லை | `'light'` | வண்ணத் திட்டம். | | `primaryColor` | `string` | இல்லை | `'#000000'` (ஒளி) / `'#ffffff'` (இருள்) | accent வண்ணமாகப் பயன்படுத்தப்படும் CSS வண்ண string. | | `title` | `string` | இல்லை | `'Voice assistant'` | விட்ஜெட் பட்டையில் காட்டப்படும் உரை. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | இல்லை | `'bottom-right'` | நிலையான viewport நிலை. | | `apiBase` | `string` | இல்லை | `'https://api.thunderphone.com/v1'` | API அடிப்படை URL override. | | `language` | `string` | இல்லை | -- | ஒவ்வொரு session-க்குமான மொழி override -- `en`, `es`, அல்லது `fr-FR` போன்ற மொழிக் குறியீடு அல்லது locale. அமைக்கப்படாதபோது, ஏஜென்டின் உள்ளமைக்கப்பட்ட மொழி பயன்படுத்தப்படும். | | `voice` | `string` | இல்லை | -- | ஒவ்வொரு session-க்குமான குரல் override -- `maria` போன்ற குரல் பெயர். அமைக்கப்படாதபோது, ஏஜென்டின் உள்ளமைக்கப்பட்ட குரல் பயன்படுத்தப்படும். | | `context` | `string` | இல்லை | -- | ஏஜென்டிற்கு அனுப்பப்படும் ஒவ்வொரு session-க்குமான உண்மைத்தகவல் பக்கம் அல்லது தள context. சர்வர் பக்கத்தில் 12,000 எழுத்துகளாகக் குறைக்கப்படும். | | `onConnect` | `() => void` | இல்லை | -- | குரல் session இணைக்கப்படும்போது அழைக்கப்படும். | | `onDisconnect` | `() => void` | இல்லை | -- | session முடிவடையும்போது அழைக்கப்படும். | | `onError` | `(error) => void` | இல்லை | -- | பிழைகள் ஏற்பட்டால் அழைக்கப்படும். பிழையில் `error` (குறியீடு) மற்றும் `message` புலங்கள் உள்ளன. | | `ringtone` | `boolean \| string` | இல்லை | `false` | இணைக்கும்போது ரிங்டோனை இயக்கவும். இயல்புநிலை ரிங்டோனுக்கு `true`, அல்லது தனிப்பயன் ஆடியோவுக்கு URL string. | --- ## சுத்தம் செய்தல் `ThunderPhone.mount()` சுத்தம் செய்யும் முறைகளுடன் ஒரு விட்ஜெட் இன்ஸ்டன்ஸைத் திருப்பி வழங்குகிறது: ```html ``` `unmount()` மற்றும் `destroy()` இரண்டும் ஒரே செயலையே செய்கின்றன -- அவை செயலில் உள்ள குரல் அமர்வுகளைத் துண்டித்து, DOM-இலிருந்து விட்ஜெட்டை அகற்றும். உங்கள் குறியீட்டில் எது சிறப்பாகப் படிக்கிறதோ அதைப் பயன்படுத்துங்கள். ஒற்றைப் பக்க பயன்பாடுகளில் வேறு பக்கத்திற்குச் செல்லும்போதோ அல்லது உள்ளடக்கிய எலிமென்ட் அகற்றப்படும்போதோ விட்ஜெட்டை எப்போதும் சுத்தம் செய்யுங்கள். இது செயலில் உள்ள குரல் அமர்வுகள் முறையாகத் துண்டிக்கப்படுவதை உறுதிசெய்கிறது. --- ## எடுத்துக்காட்டுகள் ### தனிப்பயன் நிறத்துடன் கூடிய இருண்ட தீம் ```html
``` ### தனிப்பயன் நிலை ```html
``` ### நிகழ்வு கால்பேக்குகளுடன் ```html
``` ### ரிங்டோனுடன் ```html
``` ### DOM எலிமென்ட் குறிப்பைப் பயன்படுத்தி ```html
``` ### WordPress / CMS ஒருங்கிணைப்பு இதனை தனிப்பயன் HTML பிளாக்கிலோ அல்லது உங்கள் தீமின் அடிக்குறிப்பிலோ சேர்க்கவும்: ```html
``` `
` எங்கு வேண்டுமானாலும் இருக்கலாம் -- அது மவுண்ட் புள்ளி மட்டுமே. விட்ஜெட் தானாகவே வியூபோர்ட்டின் ஒரு மூலையில் நிலையான ஓவர்லேவாக ரெண்டர் செய்யப்படும் (`position` விருப்பத்தால் அமைக்கப்படும்); அது சுற்றியுள்ள உள்ளடக்கத்துடன் பாய்ந்து செல்லாது. --- ## சிக்கல் தீர்வு CSS மற்றும் JS கோப்புகள் இரண்டும் ஏற்றப்பட்டுள்ளனவா என்பதை உறுதிப்படுத்துங்கள். நெட்வொர்க் பிழைகளுக்காக உலாவி கன்சோலைச் சரிபார்க்கவும். `ThunderPhone.mount()`-ஐ அழைப்பதற்கு முன் இலக்கு உறுப்பு DOM-இல் உள்ளதா என்பதைச் சரிபார்க்கவும். ஸ்கிரிப்ட் இன்னும் ஏற்றப்படவில்லை. `widget.js`-க்கான `