ਏਮਬੈਡ ਕਰਨ ਯੋਗ ਵੌਇਸ ਵਿਜੇਟ

ਕੋਡ ਦੀਆਂ ਕੁਝ ਲਾਈਨਾਂ ਨਾਲ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਵੌਇਸ AI ਏਜੰਟ ਸ਼ਾਮਲ ਕਰੋ

ThunderPhone ਐਂਬੈਡ ਕਰਨ ਯੋਗ ਵੌਇਸ ਵਿਜਟ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੇ ਵਿਜ਼ਿਟਰਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਸਿੱਧਾ ਇੱਕ AI ਏਜੰਟ ਨਾਲ ਗੱਲ ਕਰਨ ਦਿੰਦਾ ਹੈ। ਫ਼ੋਨ ਕਾਲ ਦੀ ਲੋੜ ਨਹੀਂ -- ਵਰਤੋਂਕਾਰ ਇੱਕ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹਨ ਅਤੇ ThunderPhone ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਰੀਅਲ-ਟਾਈਮ ਵੌਇਸ ਗੱਲਬਾਤ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ।

ਵਿਜਟ ਇੱਕ ਗਲਾਸਮੋਰਫ਼ਿਕ ਬਾਰ ਵਜੋਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ ਜੋ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮਾਂ ਅਨੁਸਾਰ ਢਲ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਅਨੁਕੂਲਿਤ ਐਕਸੈਂਟ ਰੰਗ ਅਤੇ ਸਥਿਤੀ ਹੁੰਦੀ ਹੈ। ਇਹ @thunderphone/widget npm ਪੈਕੇਜ ਵਜੋਂ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਗੈਰ-ਬੰਡਲਰ ਵਾਤਾਵਰਨਾਂ ਲਈ CDN ਰਾਹੀਂ ਵੀ ਉਪਲਬਧ ਹੈ।

ਪੂਰਵ-ਲੋੜਾਂ#

ਵਿਜਟ ਨੂੰ ਐਂਬੈਡ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ThunderPhone ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਇਹ ਤਿੰਨ ਕਦਮ ਪੂਰੇ ਕਰੋ:

1. ਵੈੱਬ ਵਿਜਿਟ ਬਣਾਓ

   ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਵੈੱਬ ਵਿਜਿਟਸ 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਵਿਜਿਟ ਬਣਾਓ। ਉਹ ਏਜੰਟ ਚੁਣੋ ਜਿਸਨੂੰ ਤੁਸੀਂ ਉਪਲਬਧ ਕਰਵਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਹਰ ਵਿਜਿਟ ਦੀ ਆਪਣੀ ਪਬਲਿਸ਼ੇਬਲ ਕੁੰਜੀ (pk_live_...) ਹੁੰਦੀ ਹੈ, ਜਿਸਨੂੰ ਕਲਾਇੰਟ-ਸਾਈਡ ਕੋਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਸੁਰੱਖਿਅਤ ਹੈ; ਏਜੰਟ ਕੁੰਜੀ ਤੋਂ ਨਿਰਧਾਰਤ ਹੁੰਦਾ ਹੈ।

2. ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਡੋਮੇਨ ਕੌਂਫਿਗਰ ਕਰੋ

   ਉਸੇ ਵਿਜਿਟ ਵਿੱਚ ਉਹ ਡੋਮੇਨ ਸ਼ਾਮਲ ਕਰੋ ਜਿੱਥੇ ਇਹ ਏਮਬੈਡ ਕੀਤਾ ਜਾਵੇਗਾ। ਵਾਈਲਡਕਾਰਡ ਸਮਰਥਿਤ ਹਨ (ਉਦਾਹਰਨ ਲਈ, *.example.com)। ਇਹ ਸੂਚੀ ਵਿਜਿਟ ਨੂੰ ਕੰਮ ਕਰਨ ਤੋਂ ਰੋਕਦੀ ਹੈ ਜਦੋਂ ਕੋਈ ਤੁਹਾਡੀ ਕੁੰਜੀ ਨੂੰ ਕਿਸੇ ਹੋਰ ਸਾਈਟ 'ਤੇ ਕਾਪੀ ਕਰਦਾ ਹੈ; ਇਹ ਪ੍ਰਮਾਣੀਕਰਨ ਨਹੀਂ ਹੈ, ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਬਾਹਰ ਦੀ ਸਕ੍ਰਿਪਟ ਕੋਈ ਵੀ Origin ਹੈਡਰ ਭੇਜ ਸਕਦੀ ਹੈ। ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ localhost ਆਪਣੇ ਆਪ ਮਨਜ਼ੂਰ ਨਹੀਂ ਹੁੰਦਾ: ਪ੍ਰੋਡਕਸ਼ਨ API ਨਾਲ ਲੋਕਲ ਤੌਰ 'ਤੇ ਟੈਸਟ ਕਰਨ ਲਈ ਇਸਨੂੰ ਸੂਚੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

3. ਬ੍ਰਾਊਜ਼ਰ ਓਵਰਰਾਈਡ ਚੁਣੋ

   ਜੇ ਤੁਹਾਡਾ ਪੰਨਾ language, voice, ਜਾਂ context ਸੈੱਟ ਕਰਦਾ ਹੈ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਓਵਰਰਾਈਡਸ ਹੇਠਾਂ ਹਰੇਕ ਨੂੰ ਚਾਲੂ ਕਰੋ। ਨਵੇਂ ਵਿਜਿਟ ਕਿਸੇ ਨੂੰ ਵੀ ਸਵੀਕਾਰ ਨਹੀਂ ਕਰਦੇ, ਅਤੇ ਬੰਦ ਸੈਟਿੰਗ ਵਾਲੀ ਸੈਸ਼ਨ ਬੇਨਤੀ 400 override_not_allowed ਨਾਲ ਅਸਫਲ ਹੋ ਜਾਂਦੀ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਓਵਰਰਾਈਡਸ ਵੇਖੋ।

ਤੁਰੰਤ ਸ਼ੁਰੂਆਤ#

ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰੋ:

npm install @thunderphone/widget

ਆਪਣੀ ਐਪ ਵਿੱਚ ਵਿਜਟ ਸ਼ਾਮਲ ਕਰੋ:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

ਬੱਸ ਇੰਨਾ ਹੀ। ਤੁਹਾਡੇ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਇੱਕ ਗਲਾਸਮੋਰਫ਼ਿਕ ਕਾਲ ਬਾਰ ਦਿਖਾਈ ਦੇਵੇਗੀ ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਇੱਕ ਕਲਿੱਕ ਨਾਲ ਤੁਹਾਡੇ AI ਏਜੰਟ ਨਾਲ ਜੋੜਦੀ ਹੈ।

ਅਨੁਕੂਲਤਾ#

ਵਿਜਟ ਵਿੱਚ ਦਿੱਖ ਲਈ ਚਾਰ ਪ੍ਰਾਪ ਹਨ:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

ਹੋਰ ਤਿੰਨ props ਦਿੱਖ ਦੀ ਬਜਾਏ ਸੈਸ਼ਨ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਦੇ ਹਨ -- ਕਾਲ ਸ਼ੁਰੂ ਹੋਣ 'ਤੇ ਇਹ ਸਾਰੇ ਸੈਸ਼ਨ ਬੇਨਤੀ ਨੂੰ ਭੇਜੇ ਜਾਂਦੇ ਹਨ। ਹਰ ਇੱਕ ਕੇਵਲ ਤਦ ਹੀ ਕੰਮ ਕਰਦਾ ਹੈ ਜਦੋਂ ਵਿਜਟ ਦੀ publishable key ਬਰਾਊਜ਼ਰ ਓਵਰਰਾਈਡਾਂ ਅਧੀਨ ਇਸਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ; ਨਹੀਂ ਤਾਂ ਸੈਸ਼ਨ ਬੇਨਤੀ 400 override_not_allowed ਨਾਲ ਅਸਫਲ ਹੋ ਜਾਂਦੀ ਹੈ:

ਪ੍ਰਾਪਾਂ ਦੀ ਪੂਰੀ ਸਾਰਣੀ ਲਈ React ਕੰਪੋਨੈਂਟ ਰੈਫਰੈਂਸ ਦੇਖੋ।

ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲਿਤ UI ਲਈ, ਆਪਣਾ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦੇ ਹੋਏ ਵੌਇਸ ਸੈਸ਼ਨ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਹੈੱਡਲੈੱਸ ਹੁੱਕ ਵਰਤੋ। ਹੁੱਕ ਆਡੀਓ-ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਆਡੀਓ ਪੱਧਰ ਉਪਲਬਧ ਕਰਵਾਉਂਦਾ ਹੈ।

ਹਰ ਵਿਜਟ ਗੱਲਬਾਤ ਇੱਕ ਕਾਲ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਸੰਸਥਾ ਦੀ ਇੱਕੋ ਸਮੇਂ ਚੱਲ ਰਹੀਆਂ ਕਾਲਾਂ ਦੀ ਸੀਮਾ ਵਿੱਚ ਗਿਣੀ ਜਾਂਦੀ ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ 20 ਚੱਲ ਰਹੀਆਂ ਕਾਲਾਂ, ਜੋ ਫ਼ੋਨ ਅਤੇ ਹੋਰ ਕਾਲਾਂ ਨਾਲ ਸਾਂਝੀਆਂ ਹਨ) ਅਤੇ ਵਿਜਟ ਦੀ 25 ਸਰਗਰਮ ਸੈਸ਼ਨਾਂ ਦੀ ਸੀਮਾ ਵਿੱਚ ਵੀ (ਜਾਂ ਤੁਹਾਡੀ ਇੱਕੋ ਸਮੇਂ ਚੱਲ ਰਹੀਆਂ ਕਾਲਾਂ ਦੀ ਸੀਮਾ, ਜੇ ਉਹ ਵੱਧ ਹੈ)। ਦੋਹਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਵੀ ਸੀਮਾ 'ਤੇ, ਕਾਲ ਸਮਾਪਤ ਹੋਣ ਤੱਕ ਨਵੀਂ ਗੱਲਬਾਤ ਸ਼ੁਰੂ ਨਹੀਂ ਹੋ ਸਕਦੀ।

ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਵਿਕਲਪ#

ਉਹ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਵਿਧੀ ਚੁਣੋ ਜੋ ਤੁਹਾਡੇ ਸਟੈਕ ਲਈ ਢੁੱਕਵੀਂ ਹੋਵੇ:

ਸਟਾਈਲਿੰਗ#

ਵਿਜੇਟ ਵਿੱਚ theme prop ਦੁਆਰਾ ਨਿਯੰਤਰਿਤ ਬਿਲਟ-ਇਨ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮ, ਅਤੇ primaryColor prop ਦੁਆਰਾ ਨਿਯੰਤਰਿਤ ਐਕਸੈਂਟ ਰੰਗ ਸ਼ਾਮਲ ਹਨ। ਹੋਰ ਡੂੰਘੀ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ, ਤੁਸੀਂ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਅਤੇ ਕਲਾਸਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ। ਵੇਰਵਿਆਂ ਲਈ ਸਟਾਈਲਿੰਗ ਗਾਈਡ ਵੇਖੋ।