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

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

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

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

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

   പ്രോംപ്റ്റും വോയ്‌സും വിജറ്റ് സെഷൻ പ്രവർത്തിപ്പിക്കുന്ന ഏജന്റ്. 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 ടോക്കണുകൾ), കൂടാതെ ഇത് പ്രോംപ്റ്റ്-വലുപ്പ സർചാർജിൽ ഉൾപ്പെടും.

വിജറ്റ്-മോഡ് വെബ്ഹുക്കുകൾ#

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 പ്രകാരം ഫിൽട്ടർ ചെയ്യുക.

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