Upotettava puhewidget - ThunderPhone

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.

ThunderPhone widget in light and dark themes with various accent colors

Vaatimukset

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

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.

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).

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.

Julkaistavat avaimet (pk_live_...) eivät ole samoja kuin salaiset API-tunnuksesi. Julkaistavat avaimet on suunniteltu asiakaspuolen käyttöön, ja ne on rajattu widget-istuntoihin sallituissa verkkotunnuksissasi. Älä koskaan käytä salaista API-tunnustasi asiakaspuolen koodissa.

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:

Proppi	Oletus	Kuvaus
`theme`	`'light'`	`'light'` valkoiselle lasille, `'dark'` tummalle lasille
`primaryColor`	`'#000000'` (vaalea) / `'#ffffff'` (tumma)	Korostusväri aloituspainikkeelle, aaltomuodolle ja yhdistymisen ilmaisimelle
`title`	`'Voice assistant'`	Widgetissä näytettävä teksti
`position`	`'bottom-right'`	Näkymän kulma: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<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:

Proppi	Kuvaus
`language`	Istuntokohtainen kieliohitus — koodi tai aluekohtainen tunniste, kuten `en`, `es` tai `fr-FR`
`voice`	Istuntokohtainen äänen ohitus — äänen nimi, kuten `maria`
`context`	Agentille välitettävä sivun tai sivuston asiayhteys (katkaistaan palvelinpuolella 12 000 merkkiin)

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:

React-komponentti

Valmis käyttöliittymäkomponentti, jossa on sisäänrakennetut puhelunhallinta- ja tilanäyttötoiminnot. Tuo, välitä propsit, valmista.

Headless-hook

Täysi hallinta käyttöliittymästä. useThunderPhone-hook hallitsee puheistuntoa samalla, kun rakennat oman käyttöliittymäsi.

CDN / Script-tagi

Ei vaadi bundleria. Lataa widget script-tagilla staattisille sivustoille, WordPressiin ja muihin kuin React-ympäristöihin.

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.

Tarvitsetko apua? Ota yhteyttä: support@thunderphone.com

​Vaatimukset

​Pika-aloitus

​Mukauttaminen

​Integrointivaihtoehdot

React-komponentti

Headless-hook

CDN / Script-tagi

​Tyylittely

Vaatimukset

Pika-aloitus

Mukauttaminen

Integrointivaihtoehdot

Tyylittely