വെബ് വിജറ്റ് എംബെഡ് ചെയ്യുക

വെബ് വിജറ്റ് നിങ്ങളുടെ സൈറ്റ് സന്ദർശകർക്ക് ബ്രൗസറിന്റെ മൈക്രോഫോൺ ഉപയോഗിച്ച് ഒരു AI ഏജന്റുമായുള്ള ക്ലിക്ക്-ടു-ടോക്ക് സംഭാഷണം നൽകുന്നു. ഇത് സ്വന്തമായ SDK റഫറൻസ് ഉള്ള ഒരു പ്രത്യേക JavaScript / React SDK ആണ് — ഈ ഗൈഡ് വിജറ്റിന് ആവശ്യമായ ThunderPhone-വശത്തെ സജ്ജീകരണത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു.

മുൻവ്യവസ്ഥകൾ

1. ഒരു ഏജന്റ് സൃഷ്ടിക്കുക

   prompt ഉം വോയ്‌സും വിജറ്റ് സെഷൻ പ്രവർത്തിപ്പിക്കുന്ന ഏജന്റ്. widget_enabled: true (സ്ഥിരസ്ഥിതി) സജ്ജമാക്കുക.

2. റൂട്ടിംഗ് മോഡ് തീരുമാനിക്കുക
   • mode="agent" — ഓരോ കീയ്ക്കും ഒരു സ്ഥിര ഏജന്റ്. ഏറ്റവും ലളിതം.
   • mode="webhook" — ഓരോ സന്ദർശകനും നിങ്ങളുടെ സെർവർ ഒരു web.incoming വെബ്ഹുക്ക് വഴി ഏജന്റിനെ തിരഞ്ഞെടുക്കുന്നു. ലോഗിൻ ചെയ്ത ഉപയോക്താക്കൾ, A/B ടെസ്റ്റുകൾ, അല്ലെങ്കിൽ ഓരോ പേജിനുമുള്ള റൂട്ടിംഗ് എന്നിവയ്ക്കായി ഇത് ഉപയോഗിക്കുക.
3. അനുവദിച്ച ഡൊമെയ്‌നുകൾ പട്ടികപ്പെടുത്തുക

   പ്രസിദ്ധീകരിക്കാവുന്ന കീകൾ origin-ലോക്ക് ചെയ്തവയാണ്. വിജറ്റ് എംബെഡ് ചെയ്യുന്ന എല്ലാ hostname-കളും നിങ്ങൾ വ്യക്തമാക്കണം. പ്രാദേശിക വികസനത്തിനിടെ 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 നിങ്ങളുടെ webhook_url-നെ ഒരു web.incoming പേലോഡുമായി വിളിക്കുന്നു. ആ സന്ദർശകനായി പ്രവർത്തിപ്പിക്കേണ്ട ഏജന്റ് കോൺഫിഗറേഷൻ മടക്കി നൽകുക — ഇത് ഫോൺ കോളുകളുടെ അതേ പ്രതികരണ സ്കീമ പിന്തുടരുന്നു:

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

നിങ്ങളുടെ സ്വന്തം സെഷനിൽ നിന്നുള്ള context (ഏത് ഉപഭോക്താവാണ് ബ്രൗസ് ചെയ്യുന്നത്, അവർ ഏത് പേജിലാണ്) prompt-ലേക്ക് ചേർക്കാനും ഓരോ റോൾഔട്ടിനും ഏജന്റുകളെ മാറ്റാനും കഴിയും.

സെഷനുകൾ നിരീക്ഷിക്കുക

Widget സെഷനുകൾ GET /v1/calls-ൽ direction="widget" ഉപയോഗിച്ച് ദൃശ്യമാകും — ഫോൺ കോളുകൾക്കുള്ളതുപോലെ തന്നെ ട്രാൻസ്ക്രിപ്റ്റ്, റെക്കോർഡിംഗ്, ഗ്രേഡിംഗ്, ബില്ലിംഗ് എന്നിവയോടെ. Widget-മാത്രമുള്ള ഡാഷ്ബോർഡ് നിർമ്മിക്കാൻ direction ഉപയോഗിച്ച് ഫിൽട്ടർ ചെയ്യുക.

അടുത്ത ഘട്ടങ്ങൾ