CDN / scenarijaus žyma

CDN versija viduje komplektuoja React, todėl valdiklį galite naudoti statinėse svetainėse, WordPress, Webflow arba bet kuriame puslapyje, kuriame galite pridėti HTML. Nereikia nei npm, nei paketų rinkiklio, nei sistemos.

CDN URL

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

Pagrindinis naudojimas

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

Valdiklis prijungiamas prie tikslinio elemento ir rodomas kaip fiksuotos padėties juosta viename iš peržiūros srities kampų (numatytoji padėtis – bottom-right, valdoma parinktimi position). Prijungimo elementas yra tik React šaknis – jo vieta puslapyje neturi įtakos tam, kur rodomas valdiklis.

Prijungimo parinktys

ThunderPhone.mount() priima tas pačias parinktis kaip React komponentas ir papildomą savybę element:

Parinktis	Tipas	Būtina	Numatytoji reikšmė	Aprašymas
`element`	`string \| HTMLElement`	Taip	--	CSS parinkiklis (pvz., `'#thunderphone'`) arba DOM elemento nuoroda.
`publishableKey`	`string`	Taip	--	Viešasis API raktas (`pk_live_...`). Agentas automatiškai nustatomas pagal rakto valdiklio konfigūraciją.
`theme`	`'light' \| 'dark'`	Ne	`'light'`	Spalvų schema.
`primaryColor`	`string`	Ne	`'#000000'` (šviesi) / `'#ffffff'` (tamsi)	CSS spalvos eilutė, naudojama kaip akcento spalva.
`title`	`string`	Ne	`'Voice assistant'`	Valdiklio juostoje rodomas tekstas.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ne	`'bottom-right'`	Fiksuota padėtis peržiūros srityje.
`apiBase`	`string`	Ne	`'https://api.thunderphone.com/v1'`	API bazinio URL nepaisymo reikšmė.
`language`	`string`	Ne	--	Kalbos nepaisymo reikšmė vienai sesijai – kalbos kodas arba lokalė, pvz., `en`, `es` arba `fr-FR`. Nenustačius, taikoma sukonfigūruota agento kalba.
`voice`	`string`	Ne	--	Balso nepaisymo reikšmė vienai sesijai – balso pavadinimas, pvz., `maria`. Nenustačius, taikomas sukonfigūruotas agento balsas.
`context`	`string`	Ne	--	Faktinis puslapio arba svetainės kontekstas vienai sesijai, perduodamas agentui. Serverio pusėje sutrumpinamas iki 12 000 simbolių.
`onConnect`	`() => void`	Ne	--	Iškviečiama, kai prisijungiama prie balso sesijos.
`onDisconnect`	`() => void`	Ne	--	Iškviečiama, kai sesija baigiama.
`onError`	`(error) => void`	Ne	--	Iškviečiama įvykus klaidoms. Klaida turi laukus `error` (kodas) ir `message`.
`ringtone`	`boolean \| string`	Ne	`false`	Prisijungiant leidžiamas skambėjimo tonas. `true` – numatytajam skambėjimo tonui, arba URL eilutė pasirinktiniam garsui.

Išvalymas

ThunderPhone.mount() grąžina valdiklio egzempliorių su išvalymo metodais:

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

Tiek unmount(), tiek destroy() atlieka tą patį veiksmą – atjungia bet kokį aktyvų balso seansą ir pašalina valdiklį iš DOM. Naudokite tą, kuris jūsų kode atrodo tinkamesnis.

Pavyzdžiai

Tamsi tema su pasirinktine spalva

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

Pasirinktinė padėtis

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

Su įvykių atgaliniais iškvietimais

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

Su skambėjimo tonu

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

Naudojant DOM elemento nuorodą

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

Pridėkite tai prie pasirinktinio HTML bloko arba savo temos poraštės:

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

Trikčių šalinimas

Valdiklis nerodomas

Įsitikinkite, kad įkelti ir CSS, ir JS failai. Naršyklės konsolėje patikrinkite, ar nėra tinklo klaidų. Prieš iškviesdami ThunderPhone.mount(), patikrinkite, ar tikslinis elementas yra DOM.

ThunderPhone neapibrėžtas

Scenarijus dar neįkeltas. Įsitikinkite, kad <script> žyma, skirta widget.js, yra prieš prijungimo iškvietimą, arba apgaubkite prijungimo iškvietimą DOMContentLoaded klausytoju.

Neleidžiamo domeno klaida

Pridėkite savo domeną prie leidžiamų domenų sąrašo Kūrėjų nustatymuose adresu app.thunderphone.com. Atminkite, kad localhost visada leidžiamas.

Tolesni veiksmai

Stilius

Pritaikykite valdiklio išvaizdą naudodami CSS tinkintas savybes.

React komponentas

Naudojate React? Komponento integracija yra paprastesnė.