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

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

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

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

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

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

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

વિજેટ-મોડ 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 દ્વારા ફિલ્ટર કરો.

આગળના પગલાં#