CDN / skriptisilt

CDN-i build sisaldab Reacti sisemiselt, seega saad vidinat kasutada staatilistel saitidel, WordPressis, Webflow's või mis tahes lehel, kuhu saad lisada HTML-i. npm-i, bundlerit ega raamistikku pole vaja.

CDN-i URL-id

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

Põhikasutus

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>

  <div id="thunderphone"></div>

  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>

</body>
</html>

Vidina paigaldatakse sihtelementi ja see kuvatakse fikseeritud asukohaga ribana vaateala nurgas (vaikimisi bottom-right, mida juhib suvand position). Paigalduselement on ainult Reacti juurelement -- selle asukoht lehel ei mõjuta vidina kuvamiskohta.

Paigaldussuvandid

ThunderPhone.mount() aktsepteerib samu suvandeid nagu Reacti komponent ning lisaks omadust element:

Suvand	Tüüp	Kohustuslik	Vaikimisi	Kirjeldus
`element`	`string \| HTMLElement`	Jah	--	CSS-i selektor (nt `'#thunderphone'`) või DOM-i elemendi viide.
`publishableKey`	`string`	Jah	--	Avalik API-võti (`pk_live_...`). Häälagent määratakse võtme vidina konfiguratsiooni põhjal automaatselt.
`theme`	`'light' \| 'dark'`	Ei	`'light'`	Värviskeem.
`primaryColor`	`string`	Ei	`'#000000'` (hele) / `'#ffffff'` (tume)	Aktsentvärvina kasutatav CSS-i värvistring.
`title`	`string`	Ei	`'Voice assistant'`	Vidinaribal kuvatav tekst.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ei	`'bottom-right'`	Fikseeritud asukoht vaatealas.
`apiBase`	`string`	Ei	`'https://api.thunderphone.com/v1'`	API baas-URL-i ülekirjutus.
`language`	`string`	Ei	--	Seansipõhine keele ülekirjutus -- keelekood või lokaat, näiteks `en`, `es` või `fr-FR`. Kui see pole määratud, kasutatakse häälagendi seadistatud keelt.
`voice`	`string`	Ei	--	Seansipõhine hääle ülekirjutus -- hääle nimi, näiteks `maria`. Kui see pole määratud, kasutatakse häälagendi seadistatud häält.
`context`	`string`	Ei	--	Häälagendile edastatav seansipõhine faktiline lehe või saidi kontekst. Serveris kärbitakse see 12 000 tähemärgini.
`onConnect`	`() => void`	Ei	--	Kutsutakse välja, kui hääleseanss ühendub.
`onDisconnect`	`() => void`	Ei	--	Kutsutakse välja, kui seanss lõpeb.
`onError`	`(error) => void`	Ei	--	Kutsutakse välja vigade korral. Vead sisaldavad välju `error` (kood) ja `message`.
`ringtone`	`boolean \| string`	Ei	`false`	Esita ühenduse loomise ajal helinat. Vaikimisi helina jaoks kasuta `true` või kohandatud heli jaoks URL-stringi.

Puhastamine

ThunderPhone.mount() tagastab vidina eksemplari puhastusmeetoditega:

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })

  // Later, when you want to remove the widget:
  widget.unmount()

  // Or equivalently:
  widget.destroy()
</script>

Nii unmount() kui ka destroy() teevad sama asja -- katkestavad aktiivse häälseansi ja eemaldavad vidina DOM-ist. Kasuta oma koodis seda, mis loetavam tundub.

Näited

Tume teema kohandatud värviga

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

Kohandatud asukoht

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

Sündmuste tagasihelistustega

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

Helinaga

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

DOM-elemendi viite kasutamine

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')

  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

WordPressi / CMS-i integreerimine

Lisa see kohandatud HTML-i plokki või oma teema jalusesse:

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

Tõrkeotsing

Vidinat ei kuvata

Veendu, et nii CSS- kui ka JS-failid on laaditud. Kontrolli brauseri konsoolist võrguvigu. Enne ThunderPhone.mount() käivitamist veendu, et sihtelement on DOM-is olemas.

ThunderPhone pole määratletud

Skript pole veel laaditud. Veendu, et widget.js-i <script>-silt asub enne mount-kutset, või mähi mount-kutse DOMContentLoaded kuulaja sisse.

Domeen pole lubatud

Lisa oma domeen lubatud domeenide loendisse app.thunderphone.com jaotise Arendajad seadetes. Pea meeles, et localhost on alati lubatud.

Järgmised sammud

Stiilimine

Kohanda vidina välimust CSS-i kohandatud omadustega.

Reacti komponent

Kasutad Reacti? Komponendi integreerimine on lihtsam.