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

Додајте гласовног агента на свој маркетиншки сајт или сајт за подршку помоћу једне ознаке скрипте — посетиоци разговарају с њим директно из прегледача, без потребе за бројем телефона.

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

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