Developer cookbook

Upota verkkowidget

Lisää puheagentti markkinointi- tai tukisivustollesi yhdellä skriptitunnisteella — kävijät voivat puhua sille suoraan selaimesta ilman puhelinnumeroa.

Verkkowidget antaa sivustosi kävijöille selaimen mikrofonia hyödyntävän klikkaa ja puhu -keskustelun tekoälyagentin kanssa. Se on erillinen JavaScript- / React-SDK omalla SDK-viitteellään — tässä oppaassa keskitytään widgetin tarvitsemaan ThunderPhone-puolen määritykseen.

Vaatimukset#

1. Luo agentti

   Agentti, jonka kehote ja ääni suorittavat widget-istunnon. Aseta widget_enabled: true (oletusarvo).

2. Valitse reititystila
   • mode="agent" — yksi staattinen agentti avainta kohden. Yksinkertaisin vaihtoehto.
   • mode="webhook" — palvelimesi valitsee agentin kävijäkohtaisesti web.incoming-webhookin kautta. Käytä tätä kirjautuneille käyttäjille, A/B-testeille tai sivukohtaiseen reititykseen.
3. Listaa sallitut verkkotunnukset

   Julkaistavat avaimet on rajoitettu alkuperään. Sinun on nimettävä jokainen isäntänimi, johon widget upotetaan. localhost / 127.0.0.1 ovat aina sallittuja paikallisen kehityksen aikana.

Luo julkaistava avain#

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"]
  }'

Vastaus sisältää pk_live_...-alkuisen key-avaimen. Julkaistavat avaimet ovat julkisia tarkoituksella — ne voi sisällyttää turvallisesti käyttöliittymäpakettiisi. Katso kaikki kentät julkaistavien avainten viitteestä.

Lisää widget sivustollesi#

Kolme integraatiovaihtoehtoa käsitellään widgetin SDK-dokumentaatiossa:

Kaikki kolme hyväksyvät saman publishableKey-arvon ja renderöivät mikrofonipainikkeen sekä puhelun aikaisen äänielementin.

Widgetin context katkaistaan 12 000 merkkiin (noin 3 400 tokenia tyypillistä englanninkielistä tekstiä), ja se lasketaan mukaan kehotteen koon lisämaksuun.

Widget-tilan webhookit#

Kun mode="webhook", ThunderPhone kutsuu webhook_url-osoitettasi jokaisen istunnon alkaessa web.incoming-payloadilla. Palauta agentin määritys, jonka haluat suorittaa kyseiselle kävijälle — se noudattaa samaa vastausskeemaa kuin puhelut:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

Voit yhdistää omaa istuntoasi koskevan kontekstin (mitä asiakasta selataan, millä sivulla hän on) kehotteeseen ja vaihtaa agentteja käyttöönoton mukaan.

Tarkastele sessioita#

Widget-sessiot näkyvät GET /v1/calls-päätepisteessä, kun direction="widget" — niillä on sama transkriptio, tallenne, arviointi ja laskutus kuin puheluilla. Suodata direction-kentän mukaan luodaksesi vain widgeteille tarkoitetun hallintapaneelin.

Seuraavat vaiheet#