Вграждане на уеб джаджата

Добавете гласов агент към вашия маркетингов или сайт за поддръжка с един-единствен script таг — посетителите говорят с него директно от браузъра, без да е необходим телефонен номер.

Уеб уиджетът дава на посетителите на сайта ви разговор с кликване за говорене с 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_.... Публикуемите ключове по замисъл са публични — безопасно е да ги включите във вашия front-end пакет. Вижте справката за публикуеми ключове за всички полета.

Добавете уиджета към сайта си#

Три варианта за интеграция са разгледани в документацията за SDK на уиджета:

И трите приемат един и същ publishableKey и визуализират бутона за микрофона заедно с аудио елемента по време на разговор.

context на уиджета се съкращава до 12 000 знака (приблизително 3400 токена типичен английски текст) и се включва в доплащането за размер на подканата.

Уебкукове в режим на уиджет#

Когато mode="webhook", ThunderPhone извиква вашия webhook_url при всяко стартиране на сесия с payload 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, за да създадете табло само за уиджета.

Следващи стъпки#