Widget

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 julkaistava API-avain

   Siirry hallintapaneelin asetuksissa kohtaan Kehittäjät ja luo julkaistava avain. Julkaistavat avaimet alkavat merkkijonolla pk_live_, ja ne on turvallista sisällyttää asiakaspuolen koodiin.

2. Määritä sallitut verkkotunnukset

   Lisää samoissa Kehittäjät-asetuksissa verkkotunnukset, joihin widget upotetaan. localhost on aina sallittu kehitystä varten. Jokerimerkit ovat tuettuja (esim. *.example.com).

3. Luo verkkowidget

   Siirry hallintapaneelissa kohtaan Verkkowidgetit ja luo widget. Valitse agentti, jonka haluat julkaista, sekä käytettävä julkaistava avain. Agentti määritetään automaattisesti julkaistavan avaimesi asetusten perusteella.

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 proppia mukauttavat istuntoa ulkoasun sijaan -- kaikki välitetään istuntopyyntöön puhelun alkaessa:

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.

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.