Upotettava puhewidget

Lisää puheagentti mille tahansa verkkosivustolle muutamalla koodirivillä

ThunderPhonen upotettavan puhewidgetin avulla verkkosivustosi kävijät voivat puhua tekoälyagentin kanssa suoraan selaimesta. Puhelua ei tarvita -- käyttäjät napsauttavat painiketta ja aloittavat ThunderPhonen reaaliaikaisen puhekeskustelun.

Widget näkyy lasimaisena palkkina, joka mukautuu vaaleisiin ja tummiin teemoihin. Korostusvärejä ja sijaintia voi mukauttaa. Se jaetaan @thunderphone/widget-npm-pakettina, ja se on saatavilla myös CDN:n kautta ympäristöihin, joissa ei käytetä bundleria.

Vaatimukset#

Ennen kuin upotat widgetin, suorita nämä kolme vaihetta ThunderPhone Dashboardissa:

1. Luo web-widget

   Siirry hallintapaneelin kohtaan Web Widgets ja luo widget. Valitse puheagentti, jonka haluat tuoda näkyviin. Jokaisella widgetillä on oma julkaistava avain (pk_live_...), joka on turvallista sisällyttää asiakaspuolen koodiin; agentti määritetään avaimen perusteella.

2. Määritä sallitut verkkotunnukset

   Lisää samaan widgetiin verkkotunnukset, joihin se upotetaan. Jokerimerkit ovat tuettuja (esim. *.example.com). Luettelo estää widgetin toiminnan, jos joku kopioi avaimesi toiselle sivustolle; se ei ole todennus, koska selaimen ulkopuolinen skripti voi lähettää minkä tahansa Origin-otsakkeen. localhost ei ole automaattisesti sallittu tuotannossa: lisää se luetteloon testataksesi paikallisesti tuotanto-APIa vasten.

3. Valitse selaimen ohitukset

   Jos sivusi määrittää language, voice tai context, ota kukin käyttöön kohdassa Browser overrides. Uudet widgetit eivät hyväksy mitään, ja istuntopyyntö, joka sisältää käytöstä poistetun asetuksen, epäonnistuu virheellä 400 override_not_allowed. Katso Browser overrides.

Pika-aloitus#

Asenna paketti:

npm install @thunderphone/widget

Lisää widget sovellukseesi:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

Siinä kaikki. Käyttäjäsi näkevät lasimaisen puhelupalkin, joka yhdistää heidät tekoälyagenttiisi yhdellä napsautuksella.

Mukauttaminen#

Widgetissä on neljä ulkoasuun liittyvää proppia:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Kolme muuta prop-arvoa mukauttaa istuntoa ulkoasun sijaan -- kaikki välitetään istuntopyyntöön puhelun alkaessa. Kukin toimii vain, jos widgetin julkaistava avain sallii sen kohdassa Selaimen ohitukset; muussa tapauksessa istuntopyyntö epäonnistuu virheellä 400 override_not_allowed:

Katso täydellinen proppitaulukko React-komponentin viitteestä.

Täysin mukautettua käyttöliittymää varten käytä headless-hookia puheistunnon hallintaan samalla, kun rakennat oman käyttöliittymäsi. Hook tarjoaa reaaliaikaiset äänitasot äänireaktiivisten visualisointien rakentamiseen.

Jokainen widget-keskustelu on puhelu. Se lasketaan mukaan organisaatiosi samanaikaisten puhelujen rajaan (oletusarvoisesti 20 käynnissä olevaa puhelua, jaettu puhelin- ja muiden puhelujen kanssa) sekä widgetin 25 aktiivisen istunnon enimmäismäärään (tai samanaikaisten puhelujen rajaasi, jos se on suurempi). Kummankin rajan kohdalla uutta keskustelua ei voi aloittaa, ennen kuin puhelu päättyy.

Integrointivaihtoehdot#

Valitse teknologiaasi sopiva integrointitapa:

Tyylittely#

Widgetissä on sisäänrakennetut vaalea ja tumma teema, joita hallitaan theme-propilla, sekä korostusväri, jota hallitaan primaryColor-propilla. Jos tarvitset laajempaa mukautusta, voit ylikirjoittaa CSS-mukautettuja ominaisuuksia ja luokkia. Lisätietoja on tyylittelyoppaassa.