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

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

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

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

   જે એજન્ટનો prompt અને અવાજ વિજેટ સત્ર ચલાવશે. 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 ટોકન) અને તે 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 દ્વારા ફિલ્ટર કરો.

આગળના પગલાં