CDN / Script Tag

CDN-versio niputtaa Reactin sisäisesti, joten voit käyttää widgetiä staattisilla sivustoilla, WordPressissä, Webflowssa tai millä tahansa sivulla, jolle voit lisätä HTML:ää. Et tarvitse npm:ää, niputtajaa etkä kehystä.

CDN-URL-osoitteet

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

latest-URL-osoitteet ovat niitä, jotka hallintapaneelin upotuskoodin luontitoiminto tuottaa. Ne tallennetaan välimuistiin 5 minuutiksi, ja ne ottavat uudet vakaat julkaisut käyttöön automaattisesti. Kiinnitetyt /widget/vX.Y.Z/-polut ovat muuttumattomia ja ne tallennetaan välimuistiin pitkäksi aikaa — jos kiinnität version, varmista, että se vastaa käyttämääsi @thunderphone/widget npm-julkaisua.

Peruskäyttö

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

Widget liitetään kohde-elementtiin ja näytetään kiinteästi sijoitettuna palkkina näkymän kulmassa (oletusarvo bottom-right, jota hallitaan position-asetuksella). Liitoselementti on vain React-juuri — sen sijainti sivulla ei vaikuta siihen, missä widget näkyy.

Liitosasetukset

ThunderPhone.mount() hyväksyy samat asetukset kuin React-komponentti sekä element-ominaisuuden:

Asetus	Tyyppi	Pakollinen	Oletusarvo	Kuvaus
`element`	`string \| HTMLElement`	Kyllä	—	CSS-valitsin (esim. `'#thunderphone'`) tai viittaus DOM-elementtiin.
`publishableKey`	`string`	Kyllä	—	Julkaistava API-avain (`pk_live_...`). Agentti määritetään automaattisesti avaimen widget-määrityksestä.
`theme`	`'light' \| 'dark'`	Ei	`'light'`	Värimalli.
`primaryColor`	`string`	Ei	`'#000000'` (vaalea) / `'#ffffff'` (tumma)	Korostusvärinä käytettävä CSS-värimerkkijono.
`title`	`string`	Ei	`'Voice assistant'`	Widget-palkissa näytettävä teksti.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ei	`'bottom-right'`	Kiinteä sijainti näkymässä.
`apiBase`	`string`	Ei	`'https://api.thunderphone.com/v1'`	API:n perus-URL-osoitteen ohitus.
`language`	`string`	Ei	—	Istuntokohtainen kieliohitus — kielikoodi tai kielialue, kuten `en`, `es` tai `fr-FR`. Jos sitä ei ole asetettu, käytetään agentin määritettyä kieltä.
`voice`	`string`	Ei	—	Istuntokohtainen äänen ohitus — äänen nimi, kuten `maria`. Jos sitä ei ole asetettu, käytetään agentin määritettyä ääntä.
`context`	`string`	Ei	—	Istuntokohtainen sivua tai sivustoa koskeva faktakonteksti, joka välitetään agentille. Katkaistaan palvelinpuolella 12 000 merkkiin.
`onConnect`	`() => void`	Ei	—	Kutsutaan, kun puheistunto yhdistetään.
`onDisconnect`	`() => void`	Ei	—	Kutsutaan, kun istunto päättyy.
`onError`	`(error) => void`	Ei	—	Kutsutaan virheiden yhteydessä. Virheessä on `error`- (koodi) ja `message`-kentät.
`ringtone`	`boolean \| string`	Ei	`false`	Toista soittoääni yhdistämisen aikana. Käytä `true` oletussoittoäänelle tai URL-merkkijonoa mukautetulle äänelle.

Siivous

ThunderPhone.mount() palauttaa widget-instanssin, jossa on siivousmenetelmät:

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

Sekä unmount() että destroy() tekevät saman asian — ne katkaisevat aktiivisen puheistunnon ja poistavat widgetin DOM:sta. Käytä koodissasi sitä, joka on luettavampi.

Siivoa widget aina, kun siirryt pois yksisivusovelluksessa tai kun sen sisältävä elementti poistetaan. Näin varmistat, että aktiiviset puheistunnot katkaistaan oikein.

Esimerkit

Tumma teema mukautetulla värillä

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

Mukautettu sijainti

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

Tapahtumakutsuilla

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

Soittoäänellä

<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-elementtiviittauksen käyttäminen

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

WordPress- / CMS-integraatio

Lisää tämä mukautettuun HTML-lohkoon tai teemasi alatunnisteeseen:

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

<div> voi olla missä tahansa — se on vain kiinnityskohta. Widget itse renderöityy kiinteänä peittokuvana näkymän kulmaan (position-asetuksen määrittämänä), eikä se mukaudu ympäröivän sisällön sijoitteluun.

Vianmääritys

Widget ei näy

ThunderPhone ei ole määritetty

Skriptiä ei ole vielä ladattu. Varmista, että widget.js-tiedoston <script>-tagi on ennen liitoskutsuasi, tai kääri liitoskutsu DOMContentLoaded-kuuntelijaan.

Toimialue ei ole sallittu -virhe

Lisää toimialueesi sallittujen toimialueiden luetteloon app.thunderphone.com-palvelun Kehittäjät-asetuksissa. Muista, että localhost on aina sallittu.

Widget

CDN-URL-osoitteet

Peruskäyttö

Liitosasetukset

Siivous

Esimerkit

Tumma teema mukautetulla värillä

Mukautettu sijainti

Tapahtumakutsuilla

Soittoäänellä

DOM-elementtiviittauksen käyttäminen

WordPress- / CMS-integraatio

Vianmääritys

Seuraavat vaiheet

Tyylittely

React-komponentti

​CDN-URL-osoitteet

​Peruskäyttö

​Liitosasetukset

​Siivous

​Esimerkit

​Tumma teema mukautetulla värillä

​Mukautettu sijainti

​Tapahtumakutsuilla

​Soittoäänellä

​DOM-elementtiviittauksen käyttäminen

​WordPress- / CMS-integraatio

​Vianmääritys

​Seuraavat vaiheet

Tyylittely

React-komponentti

CDN-URL-osoitteet

Peruskäyttö

Liitosasetukset

Siivous

Esimerkit

Tumma teema mukautetulla värillä

Mukautettu sijainti

Tapahtumakutsuilla

Soittoäänellä

DOM-elementtiviittauksen käyttäminen

WordPress- / CMS-integraatio

Vianmääritys

Seuraavat vaiheet