Уградите веб-виџет

Веб виџет посетиоцима Вашег сајта пружа разговор који се покреће кликом са AI агентом, користећи микрофон прегледача. То је засебан JavaScript / React SDK са сопственом 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"]
  }'

Одговор садржи key који почиње са pk_live_.... Објављиви кључеви су јавно доступни по дизајну — безбедно их је укључити у пакет Вашег фронтенда. Погледајте референцу објављивих кључева за сва поља.

Додајте виџет на свој сајт

Три опције интеграције описане су у документацији 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 да бисте направили контролну таблу само за виџет.

Следећи кораци