ਸ਼ੁਰੂ ਕਰੋ

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

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

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

ਵੱਖ-ਵੱਖ ਐਕਸੈਂਟ ਰੰਗਾਂ ਨਾਲ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮਾਂ ਵਿੱਚ ThunderPhone ਵਿਜਟ

ਪੂਰਵ-ਲੋੜਾਂ

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

  1. ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ API ਕੁੰਜੀ ਬਣਾਓ

    ਡੈਸ਼ਬੋਰਡ ਸੈਟਿੰਗਾਂ ਵਿੱਚ ਡਿਵੈਲਪਰਜ਼ 'ਤੇ ਜਾਓ ਅਤੇ ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀ ਬਣਾਓ। ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀਆਂ pk_live_ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਕਲਾਇੰਟ-ਸਾਈਡ ਕੋਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸੁਰੱਖਿਅਤ ਹਨ।

  2. ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਡੋਮੇਨ ਸੰਰਚਿਤ ਕਰੋ

    ਉਸੇ ਡਿਵੈਲਪਰਜ਼ ਸੈਟਿੰਗਾਂ ਵਿੱਚ, ਉਹ ਡੋਮੇਨ ਸ਼ਾਮਲ ਕਰੋ ਜਿੱਥੇ ਵਿਜਟ ਐਂਬੈਡ ਕੀਤਾ ਜਾਵੇਗਾ। ਵਿਕਾਸ ਲਈ localhost ਹਮੇਸ਼ਾ ਮਨਜ਼ੂਰ ਹੁੰਦਾ ਹੈ। ਵਾਈਲਡਕਾਰਡ ਸਮਰਥਿਤ ਹਨ (ਉਦਾਹਰਨ ਲਈ, *.example.com)।

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

    ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਵੈੱਬ ਵਿਜਟਸ 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਵਿਜਟ ਬਣਾਓ। ਉਹ ਏਜੰਟ ਚੁਣੋ ਜਿਸਨੂੰ ਤੁਸੀਂ ਉਪਲਬਧ ਕਰਵਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਵਰਤਣ ਲਈ ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀ ਚੁਣੋ। ਏਜੰਟ ਤੁਹਾਡੀ ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀ ਦੀ ਸੰਰਚਨਾ ਤੋਂ ਆਪਣੇ ਆਪ ਨਿਰਧਾਰਤ ਹੁੰਦਾ ਹੈ।

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

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

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 ਏਜੰਟ ਨਾਲ ਜੋੜਦੀ ਹੈ।

ਅਨੁਕੂਲਤਾ

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

ਪ੍ਰਾਪਡਿਫਾਲਟਵੇਰਵਾ
theme'light'ਚਿੱਟੇ ਕੱਚ ਲਈ 'light', ਗੂੜ੍ਹੇ ਕੱਚ ਲਈ 'dark'
primaryColor'#000000' (ਹਲਕਾ) / '#ffffff' (ਗੂੜ੍ਹਾ)ਸ਼ੁਰੂ ਬਟਨ, ਵੇਵਫਾਰਮ ਅਤੇ ਕਨੈਕਟਿੰਗ ਸੰਕੇਤਕ ਲਈ ਐਕਸੈਂਟ ਰੰਗ
title'Voice assistant'ਵਿਜਟ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਣ ਵਾਲਾ ਟੈਕਸਟ
position'bottom-right'ਵਿਊਪੋਰਟ ਕੋਨਾ: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

ਤਿੰਨ ਹੋਰ ਪ੍ਰਾਪ ਦਿੱਖ ਦੀ ਬਜਾਏ ਸੈਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹਨ -- ਕਾਲ ਸ਼ੁਰੂ ਹੋਣ 'ਤੇ ਸਾਰੇ ਸੈਸ਼ਨ ਬੇਨਤੀ ਨੂੰ ਅੱਗੇ ਭੇਜੇ ਜਾਂਦੇ ਹਨ:

ਪ੍ਰਾਪਵੇਰਵਾ
languageਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਭਾਸ਼ਾ ਓਵਰਰਾਈਡ -- en, es, ਜਾਂ fr-FR ਵਰਗਾ ਕੋਡ ਜਾਂ ਲੋਕੇਲ
voiceਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਵੌਇਸ ਓਵਰਰਾਈਡ -- maria ਵਰਗਾ ਵੌਇਸ ਨਾਮ
contextਏਜੰਟ ਨੂੰ ਭੇਜਿਆ ਜਾਣ ਵਾਲਾ ਤੱਥਾਤਮਕ ਪੰਨਾ ਜਾਂ ਸਾਈਟ ਸੰਦਰਭ (ਸਰਵਰ-ਸਾਈਡ 'ਤੇ 12,000 ਅੱਖਰਾਂ ਤੱਕ ਛੋਟਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ)

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

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

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

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

React ਕੰਪੋਨੈਂਟ

ਬਿਲਟ-ਇਨ ਕਾਲ ਕੰਟਰੋਲਾਂ ਅਤੇ ਸਥਿਤੀ ਡਿਸਪਲੇ ਵਾਲਾ ਪਹਿਲਾਂ ਤੋਂ ਬਣਿਆ UI ਕੰਪੋਨੈਂਟ। ਇੰਪੋਰਟ ਕਰੋ, props ਪਾਸ ਕਰੋ, ਹੋ ਗਿਆ।

ਹੈੱਡਲੈੱਸ ਹੁੱਕ

UI ਉੱਤੇ ਪੂਰਾ ਕੰਟਰੋਲ। useThunderPhone ਹੁੱਕ ਵੌਇਸ ਸੈਸ਼ਨ ਸੰਭਾਲਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਆਪਣਾ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦੇ ਹੋ।

CDN / ਸਕ੍ਰਿਪਟ ਟੈਗ

ਕਿਸੇ ਬੰਡਲਰ ਦੀ ਲੋੜ ਨਹੀਂ। ਸਟੈਟਿਕ ਸਾਈਟਾਂ, WordPress ਅਤੇ ਹੋਰ ਗੈਰ-React ਵਾਤਾਵਰਨਾਂ ਲਈ ਸਕ੍ਰਿਪਟ ਟੈਗ ਰਾਹੀਂ ਵਿਜੇਟ ਲੋਡ ਕਰੋ।

ਸਟਾਈਲਿੰਗ

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