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

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

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

ਪੂਰਵ-ਲੋੜਾਂ#

1. ਏਜੰਟ ਬਣਾਓ

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

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

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

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

   ਤੈਅ ਕਰੋ ਕਿ ਤੁਹਾਡਾ ਪੰਨਾ ਕਿਹੜੀਆਂ ਸੈਸ਼ਨ ਸੈਟਿੰਗਾਂ ਭੇਜ ਸਕਦਾ ਹੈ। ਨਵੀਆਂ ਕੀਆਂ ਕੋਈ ਵੀ ਸਵੀਕਾਰ ਨਹੀਂ ਕਰਦੀਆਂ; ਬ੍ਰਾਊਜ਼ਰ ਓਵਰਰਾਈਡ ਵੇਖੋ।

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

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"],
    "allowed_overrides": ["context"]
  }'

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 ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ ਅਤੇ ਮਾਈਕ ਬਟਨ ਨਾਲ ਹੀ ਕਾਲ ਦੌਰਾਨ ਦਾ ਆਡੀਓ ਐਲੀਮੈਂਟ ਰੈਂਡਰ ਕਰਦੇ ਹਨ।

ਬ੍ਰਾਊਜ਼ਰ ਓਵਰਰਾਈਡਾਂ#

ਵਿਜਟ ਪੰਨੇ ਤੋਂ ਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਚਾਰ ਸੈਟਿੰਗਾਂ ਭੇਜ ਸਕਦਾ ਹੈ:

ਤੁਹਾਡੀ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਯੋਗ ਕੁੰਜੀ ਜਨਤਕ ਹੈ, ਇਸ ਲਈ ਜਿਸ ਕਿਸੇ ਕੋਲ ਇਹ ਹੈ ਉਹ ਇਹ ਸੈਟਿੰਗਾਂ ਭੇਜ ਸਕਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਤੁਹਾਡੇ ਡੋਮੇਨ ਦੀ ਨਕਲ ਕਰਨ ਵਾਲੀ ਸਕ੍ਰਿਪਟ ਤੋਂ ਵੀ ਸ਼ਾਮਲ ਹੈ। ਇਸ ਲਈ ਹਰੇਕ ਸੈਟਿੰਗ ਉਦੋਂ ਤੱਕ ਬੰਦ ਰਹਿੰਦੀ ਹੈ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਇਸਨੂੰ ਕੁੰਜੀ ਲਈ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕਰਦੇ: ਵਿਜਟ ਬਣਾਉਂਦੇ ਜਾਂ ਸੰਪਾਦਿਤ ਕਰਦੇ ਸਮੇਂ ਇਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਓਵਰਰਾਈਡਾਂ ਹੇਠ ਚੁਣੋ, ਜਾਂ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਯੋਗ ਕੁੰਜੀਆਂ API ਰਾਹੀਂ allowed_overrides ਸੈਟ ਕਰੋ। ਸਿਰਫ਼ ਉਹੀ ਮਨਜ਼ੂਰ ਕਰੋ ਜੋ ਤੁਹਾਡਾ ਪੰਨਾ ਅਸਲ ਵਿੱਚ ਭੇਜਦਾ ਹੈ।

ਜੇ ਸੈਸ਼ਨ ਬੇਨਤੀ ਵਿੱਚ ਅਜਿਹੀ ਸੈਟਿੰਗ ਹੋਵੇ ਜਿਸਦੀ ਕੁੰਜੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੰਦੀ, ਤਾਂ ਇਹ 400 ਨਾਲ ਅਸਫਲ ਹੁੰਦੀ ਹੈ ਅਤੇ ਉਸਦਾ ਨਾਮ ਦੱਸਦੀ ਹੈ:

{
  "error": "override_not_allowed",
  "fields": ["voice"],
  "message": "This publishable key does not allow the browser to set `voice`. ..."
}

ਇਹ ਜਾਂਚ ਦੋਵੇਂ ਮੋਡਾਂ ਵਿੱਚ ਲਾਗੂ ਹੁੰਦੀ ਹੈ। webhook ਮੋਡ ਵਿੱਚ ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਸੈਟਿੰਗ ਤੁਹਾਡੇ web.incoming webhook ਨੂੰ ਵੀ ਅੱਗੇ ਭੇਜੀ ਜਾਂਦੀ ਹੈ (context, website_context ਵਜੋਂ ਆਉਂਦਾ ਹੈ)। ਇਹ ਸੈਟਿੰਗ ਆਉਣ ਤੋਂ ਪਹਿਲਾਂ ਬਣਾਈਆਂ ਕੁੰਜੀਆਂ ਚਾਰੇ ਸੈਟਿੰਗਾਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਮੌਜੂਦਾ ਐਂਬੈਡ ਕੰਮ ਕਰਦੇ ਰਹਿੰਦੇ ਹਨ; ਜੋ ਤੁਸੀਂ ਨਹੀਂ ਵਰਤਦੇ ਉਸਨੂੰ ਬੰਦ ਕਰ ਦਿਓ।

ਵਿਜਟ ਦਾ 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 ਅਨੁਸਾਰ ਫ਼ਿਲਟਰ ਕਰੋ।

ਅਗਲੇ ਕਦਮ#