--- 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 ಬಿಡುಗಡೆಯ ಆವೃತ್ತಿಗೆ URL ಆವೃತ್ತಿಯನ್ನು ಹೊಂದಿಸಿ. --- ## ಮೂಲ ಬಳಕೆ ```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` ಗಾಗಿ ಇರುವ `