ਵੈੱਬ ਵਿਜਟ ਨੂੰ ਏਮਬੈਡ ਕਰੋ

ਇੱਕ ਹੀ ਸਕ੍ਰਿਪਟ ਟੈਗ ਨਾਲ ਆਪਣੇ ਮਾਰਕੀਟਿੰਗ ਜਾਂ ਸਹਾਇਤਾ ਸਾਈਟ ਉੱਤੇ ਵੌਇਸ ਏਜੰਟ ਜੋੜੋ — ਵਿਜ਼ਟਰ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਹੀ ਇਸ ਨਾਲ ਗੱਲ ਕਰਦੇ ਹਨ, ਫ਼ੋਨ ਨੰਬਰ ਦੀ ਲੋੜ ਨਹੀਂ।

ਵੈੱਬ ਵਿਜੇਟ ਤੁਹਾਡੀ ਸਾਈਟ ਦੇ ਵਿਜ਼ਿਟਰਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮਾਈਕ੍ਰੋਫ਼ੋਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ AI ਏਜੰਟ ਨਾਲ ਕਲਿੱਕ-ਟੂ-ਟਾਕ ਗੱਲਬਾਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਆਪਣੀ SDK ਰੈਫ਼ਰੈਂਸ ਵਾਲਾ ਇੱਕ ਵੱਖਰਾ JavaScript / React SDK ਹੈ — ਇਹ ਗਾਈਡ ਵਿਜੇਟ ਲਈ ਲੋੜੀਂਦੇ ThunderPhone-ਪੱਖੀ ਸੈਟਅੱਪ ਉੱਤੇ ਕੇਂਦਰਿਤ ਹੈ।

ਪੂਰਵ-ਲੋੜਾਂ#

1. ਏਜੰਟ ਬਣਾਓ

   ਉਹ ਏਜੰਟ ਜਿਸਦਾ prompt ਅਤੇ ਆਵਾਜ਼ ਵਿਜੇਟ ਸੈਸ਼ਨ ਚਲਾਏਗੀ। widget_enabled: true ਸੈੱਟ ਕਰੋ (ਡਿਫੌਲਟ)।

2. ਰੂਟਿੰਗ ਮੋਡ ਚੁਣੋ
   • mode="agent" — ਹਰ ਕੀ ਲਈ ਇੱਕ ਸਥਿਰ ਏਜੰਟ। ਸਭ ਤੋਂ ਸਰਲ।
   • mode="webhook" — ਤੁਹਾਡਾ ਸਰਵਰ ਹਰ ਵਿਜ਼ਿਟਰ ਲਈ ਏਜੰਟ ਚੁਣਦਾ ਹੈ ਇੱਕ web.incoming ਵੈੱਬਹੁੱਕ ਰਾਹੀਂ। ਇਸਨੂੰ ਲੌਗ-ਇਨ ਕੀਤੇ ਯੂਜ਼ਰਾਂ, A/B ਟੈਸਟਾਂ, ਜਾਂ ਪ੍ਰਤੀ-ਪੰਨਾ ਰੂਟਿੰਗ ਲਈ ਵਰਤੋ।
3. ਮਨਜ਼ੂਰ ਡੋਮੇਨ ਸੂਚੀਬੱਧ ਕਰੋ

   ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਯੋਗ ਕੀਜ਼ ਔਰਿਜਿਨ-ਲੌਕਡ ਹੁੰਦੀਆਂ ਹਨ। ਤੁਹਾਨੂੰ ਹਰ ਉਹ ਹੋਸਟਨਾਮ ਦਰਜ ਕਰਨਾ ਹੋਵੇਗਾ ਜੋ ਵਿਜੇਟ ਐਂਬੈਡ ਕਰੇਗਾ। ਸਥਾਨਕ ਡਿਵੈਲਪਮੈਂਟ ਦੌਰਾਨ localhost / 127.0.0.1 ਹਮੇਸ਼ਾਂ ਮਨਜ਼ੂਰ ਹੁੰਦੇ ਹਨ।

ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਯੋਗ ਕੀ ਬਣਾਓ#

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'

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

ਆਪਣੀ ਸਾਈਟ ਉੱਤੇ ਵਿਜੇਟ ਸ਼ਾਮਲ ਕਰੋ#

ਤਿੰਨ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਜੇਟ SDK ਡੌਕਸ ਵਿੱਚ ਕਵਰ ਕੀਤਾ ਗਿਆ ਹੈ:

ਤਿੰਨੇ ਇੱਕੋ publishableKey ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ ਅਤੇ ਮਾਈਕ ਬਟਨ ਨਾਲ ਹੀ ਕਾਲ ਦੌਰਾਨ ਦਾ ਆਡੀਓ ਐਲੀਮੈਂਟ ਰੈਂਡਰ ਕਰਦੇ ਹਨ।

ਵਿਜੇਟ context ਨੂੰ 12,000 ਅੱਖਰਾਂ ਤੱਕ ਸੀਮਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਆਮ ਅੰਗਰੇਜ਼ੀ ਲਿਖਤ ਦੇ ਲਗਭਗ 3,400 ਟੋਕਨ) ਅਤੇ ਇਹ prompt-ਆਕਾਰ ਸਰਚਾਰਜ ਵਿੱਚ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ।

ਵਿਜੇਟ-ਮੋਡ ਵੈੱਬਹੁੱਕਸ#

ਜਦੋਂ mode="webhook" ਹੁੰਦਾ ਹੈ, ThunderPhone ਹਰ ਸੈਸ਼ਨ ਸ਼ੁਰੂ ਹੋਣ ਤੇ web.incoming ਪੇਲੋਡ ਨਾਲ ਤੁਹਾਡੇ webhook_url ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ। ਉਸ ਵਿਜ਼ਿਟਰ ਲਈ ਚਲਾਉਣ ਲਈ ਏਜੰਟ ਸੰਰਚਨਾ ਵਾਪਸ ਭੇਜੋ — ਇਹ ਫ਼ੋਨ ਕਾਲਾਂ ਵਾਲੀ ਹੀ ਰਿਸਪਾਂਸ ਸਕੀਮਾ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

ਤੁਸੀਂ ਆਪਣੇ ਸੈਸ਼ਨ ਤੋਂ ਸੰਦਰਭ (ਕਿਹੜਾ ਗਾਹਕ ਬ੍ਰਾਊਜ਼ ਕਰ ਰਿਹਾ ਹੈ, ਉਹ ਕਿਹੜੇ ਪੰਨੇ ਉੱਤੇ ਹਨ) ਨੂੰ prompt ਵਿੱਚ ਮਿਲਾ ਸਕਦੇ ਹੋ ਅਤੇ ਹਰ ਰੋਲਆਉਟ ਲਈ ਏਜੰਟ ਬਦਲ ਸਕਦੇ ਹੋ।

ਸੈਸ਼ਨਾਂ ਨੂੰ ਵੇਖੋ#

ਵਿਜਿਟ ਸੈਸ਼ਨ GET /v1/calls ਵਿੱਚ direction="widget" ਨਾਲ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ — ਫ਼ੋਨ ਕਾਲਾਂ ਵਾਂਗ ਹੀ ਟ੍ਰਾਂਸਕ੍ਰਿਪਟ, ਰਿਕਾਰਡਿੰਗ, ਗ੍ਰੇਡਿੰਗ ਅਤੇ ਬਿਲਿੰਗ। ਸਿਰਫ਼ ਵਿਜਿਟ ਲਈ ਡੈਸ਼ਬੋਰਡ ਬਣਾਉਣ ਵਾਸਤੇ direction ਅਨੁਸਾਰ ਫ਼ਿਲਟਰ ਕਰੋ।

ਅਗਲੇ ਕਦਮ#