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

ഒറ്റ സ്ക്രിപ്റ്റ് ടാഗ് ഉപയോഗിച്ച് നിങ്ങളുടെ മാർക്കറ്റിംഗ് അല്ലെങ്കിൽ പിന്തുണാ സൈറ്റിൽ ഒരു വോയ്‌സ് ഏജന്റിനെ ചേർക്കുക — സന്ദർശകർക്ക് ഫോൺ നമ്പർ ആവശ്യമില്ലാതെ ബ്രൗസറിൽ നിന്ന് നേരിട്ട് അതുമായി സംസാരിക്കാം.

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

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

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

   widget സെഷൻ പ്രവർത്തിപ്പിക്കുന്ന prompt-ഉം ശബ്ദവും ഉള്ള ഏജന്റ്. widget_enabled: true (ഡിഫോൾട്ട്) സജ്ജമാക്കുക.

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

   widget എംബെഡ് ചെയ്യുന്ന എല്ലാ ഹോസ്റ്റ്നാമങ്ങളും നൽകുക. ഓരോ സെഷൻ അഭ്യർത്ഥനയോടും ബ്രൗസറുകൾ പേജിന്റെ origin അയയ്ക്കുന്നതിനാൽ, ആരെങ്കിലും നിങ്ങളുടെ കീ മറ്റൊരു സൈറ്റിലേക്ക് പകർത്തുമ്പോൾ അത് പ്രവർത്തിക്കുന്നത് ഈ പട്ടിക തടയും. ഇത് ഓതന്റിക്കേഷൻ അല്ല: ബ്രൗസറിന് പുറത്തുള്ള ഒരു സ്ക്രിപ്റ്റിന് ഏത് 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 സ്വീകരിക്കുകയും മൈക്രോഫോൺ ബട്ടണും കോളിനിടയിലെ ഓഡിയോ എലമെന്റും റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു.

ബ്രൗസർ ഓവർറൈഡുകൾ#

വിജറ്റിന് ഓരോ സെഷനിലുമായി പേജിൽ നിന്ന് നാല് ക്രമീകരണങ്ങൾ അയയ്ക്കാൻ കഴിയും:

നിങ്ങളുടെ publishable കീ പൊതുവായതിനാൽ, അത് കൈവശമുള്ള ആർക്കും നിങ്ങളുടെ ഡൊമെയ്ൻ അനുകരിക്കുന്ന ഒരു സ്ക്രിപ്റ്റിൽ നിന്നുൾപ്പെടെ ഈ ക്രമീകരണങ്ങൾ അയയ്ക്കാൻ കഴിയും. അതിനാൽ, കീയിൽ നിങ്ങൾ അവ അനുവദിക്കുന്നതുവരെ ഓരോന്നും പ്രവർത്തനരഹിതമായിരിക്കും: ഡാഷ്ബോർഡിൽ വിഡ്ജറ്റ് സൃഷ്ടിക്കുമ്പോഴോ എഡിറ്റ് ചെയ്യുമ്പോഴോ ബ്രൗസർ ഓവർറൈഡുകൾ എന്നതിന് കീഴിൽ അത് തിരഞ്ഞെടുക്കുക, അല്ലെങ്കിൽ Publishable കീകൾ 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 നിങ്ങളുടെ webhook_url-ലേക്ക് ഒരു web.incoming പേലോഡോടെ വിളിക്കുന്നു. ആ സന്ദർശകനായി പ്രവർത്തിപ്പിക്കേണ്ട ഏജന്റ് കോൺഫിഗറേഷൻ തിരികെ നൽകുക — ഇത് ഫോൺ കോളുകളുടെ അതേ പ്രതികരണ സ്കീമ പിന്തുടരുന്നു:

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

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

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

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

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