વેબ વિજેટ એમ્બેડ કરો

એક જ સ્ક્રિપ્ટ ટૅગ સાથે તમારા માર્કેટિંગ અથવા સપોર્ટ સાઇટ પર વૉઇસ એજન્ટ ઉમેરો — મુલાકાતીઓ ફોન નંબરની જરૂર વગર બ્રાઉઝરમાંથી સીધા તેની સાથે વાત કરે છે.

વેબ વિજેટ તમારા સાઇટ મુલાકાતીઓને બ્રાઉઝરના માઇક્રોફોનનો ઉપયોગ કરીને AI એજન્ટ સાથે ક્લિક-ટુ-ટોક સંવાદ આપે છે. તે પોતાનું SDK રેફરન્સ ધરાવતું અલગ JavaScript / React SDK છે — આ માર્ગદર્શિકા વિજેટને જરૂરી ThunderPhone-સાઇડ સેટઅપ પર ધ્યાન કેન્દ્રિત કરે છે.

પૂર્વજરૂરીયાતો#

1. એજન્ટ બનાવો

   જે એજન્ટનો prompt અને અવાજ વિજેટ સત્ર ચલાવશે તે પસંદ કરો. widget_enabled: true સેટ કરો (ડિફૉલ્ટ).

2. રૂટિંગ મોડ નક્કી કરો
   • mode="agent" — દરેક કી માટે એક સ્થિર એજન્ટ. સૌથી સરળ.
   • mode="webhook" — તમારું સર્વર દરેક મુલાકાતી માટે એજન્ટ પસંદ કરે છે web.incoming વેબહૂક દ્વારા. લૉગ-ઇન કરેલા વપરાશકર્તાઓ, 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 સ્વીકારે છે અને માઇક બટન તથા કૉલમાંનો ઑડિયો એલિમેન્ટ રેન્ડર કરે છે.

બ્રાઉઝર ઓવરરાઇડ્સ#

વિજેટ પેજમાંથી પ્રતિ-સેશન ચાર સેટિંગ્સ મોકલી શકે છે:

તમારી publishable key જાહેર છે, તેથી જે કોઈ પાસે તે હોય તે આ સેટિંગ્સ મોકલી શકે છે, જેમાં તમારા ડોમેનનું અનુકરણ કરતી સ્ક્રિપ્ટમાંથી પણ સામેલ છે. તેથી, તમે key પર તેને મંજૂરી ન આપો ત્યાં સુધી દરેક સેટિંગ બંધ રહે છે: ડેશબોર્ડમાં widget બનાવતી અથવા સંપાદિત કરતી વખતે બ્રાઉઝર ઓવરરાઇડ્સ હેઠળ તેને પસંદ કરો, અથવા Publishable keys API દ્વારા allowed_overrides સેટ કરો. તમારી પેજ ખરેખર જે મોકલે છે એટલું જ મંજૂર કરો.

key મંજૂરી ન આપતી હોય તેવું સેટિંગ ધરાવતી સેશન વિનંતી 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 તરીકે આવે છે). આ સેટિંગ અસ્તિત્વમાં આવ્યું તે પહેલાં બનાવેલી keys ચારેયને મંજૂરી આપે છે, જેથી હાલના embeds કાર્યરત રહે; તમે ઉપયોગમાં ન લેતા હોય તે બંધ કરો.

વિજેટ context 12,000 અક્ષરો સુધી ટૂંકાવવામાં આવે છે (સામાન્ય અંગ્રેજી લખાણના આશરે 3,400 tokens) અને તે prompt-કદ સરચાર્જમાં ગણાય છે. એજન્ટને તેને સૂચનાઓ તરીકે નહીં, પરંતુ પેજ સામગ્રી તરીકે ગણવા માટે કહેવામાં આવે છે.

વિજેટ-મોડ webhooks#

જ્યારે 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 */ ]
}

તમે તમારા પોતાના સત્રનો સંદર્ભ (કયો ગ્રાહક બ્રાઉઝ કરી રહ્યો છે, તેઓ કયા પેજ પર છે) promptમાં ઉમેરી શકો છો અને રોલઆઉટ અનુસાર એજન્ટ બદલી શકો છો.

સત્રોનું નિરીક્ષણ કરો#

વિજેટ સત્રો GET /v1/calls માં direction="widget" સાથે દેખાય છે — ફોન કૉલ્સ જેવી જ ટ્રાન્સક્રિપ્ટ, રેકોર્ડિંગ, ગ્રેડિંગ અને બિલિંગ સાથે. ફક્ત વિજેટ માટેનો ડેશબોર્ડ બનાવવા direction દ્વારા ફિલ્ટર કરો.

આગળના પગલાં#