--- title: "CDN / ਸਕ੍ਰਿਪਟ ਟੈਗ" description: "ਬੰਡਲਰ ਤੋਂ ਬਿਨਾਂ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ThunderPhone ਵੌਇਸ ਵਿਜੇਟ ਸ਼ਾਮਲ ਕਰੋ" --- CDN ਬਿਲਡ React ਨੂੰ ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਬੰਡਲ ਕਰਦੀ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਵਿਜਿਟ ਨੂੰ ਸਟੈਟਿਕ ਸਾਈਟਾਂ, WordPress, Webflow, ਜਾਂ ਕਿਸੇ ਵੀ ਪੰਨੇ 'ਤੇ ਵਰਤ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ HTML ਜੋੜ ਸਕਦੇ ਹੋ। ਕਿਸੇ npm, ਬੰਡਲਰ ਜਾਂ ਫਰੇਮਵਰਕ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ## CDN URL ```html Latest (recommended) ``` ```html Pinned version ``` `latest` URL ਉਹ ਹਨ ਜੋ ਡੈਸ਼ਬੋਰਡ ਦਾ embed snippet ਜਨਰੇਟਰ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ 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` ਲਈ `