CDN / Oznaka skripta

Različica CDN interno vključuje React, zato lahko gradnik uporabljate na statičnih spletnih mestih, v WordPressu, Webflowu ali na kateri koli strani, kamor lahko dodate HTML. npm, združevalnik ali ogrodje niso potrebni.

URL-ji CDN

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

Osnovna uporaba

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

Gradnik se priključi v ciljni element in se izriše kot vrstica s fiksnim položajem v kotu vidnega polja (privzeto bottom-right, nadzorovano z možnostjo position). Element priklopa je le koren React -- njegov položaj na strani ne vpliva na to, kje se gradnik prikaže.

Možnosti priklopa

ThunderPhone.mount() sprejme enake možnosti kot komponenta React ter lastnost element:

Možnost	Vrsta	Obvezno	Privzeto	Opis
`element`	`string \| HTMLElement`	Da	--	Izbirnik CSS (npr. `'#thunderphone'`) ali sklic na element DOM.
`publishableKey`	`string`	Da	--	Javni ključ API (`pk_live_...`). Glasovni agent se samodejno določi iz konfiguracije gradnika ključa.
`theme`	`'light' \| 'dark'`	Ne	`'light'`	Barvna shema.
`primaryColor`	`string`	Ne	`'#000000'` (svetla) / `'#ffffff'` (temna)	Niz barve CSS, uporabljen kot poudarjena barva.
`title`	`string`	Ne	`'Voice assistant'`	Besedilo, prikazano v vrstici gradnika.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ne	`'bottom-right'`	Fiksni položaj v vidnem polju.
`apiBase`	`string`	Ne	`'https://api.thunderphone.com/v1'`	Preglasitev osnovnega URL-ja API.
`language`	`string`	Ne	--	Preglasitev jezika za posamezno sejo -- jezikovna koda ali območna nastavitev, kot so `en`, `es` ali `fr-FR`. Če ni nastavljena, se uporabi konfigurirani jezik agenta.
`voice`	`string`	Ne	--	Preglasitev glasu za posamezno sejo -- ime glasu, kot je `maria`. Če ni nastavljeno, se uporabi konfigurirani glas agenta.
`context`	`string`	Ne	--	Dejanski kontekst strani ali spletnega mesta za posamezno sejo, posredovan agentu. Na strežniški strani je skrajšan na 12.000 znakov.
`onConnect`	`() => void`	Ne	--	Pokliče se, ko se glasovna seja poveže.
`onDisconnect`	`() => void`	Ne	--	Pokliče se, ko se seja konča.
`onError`	`(error) => void`	Ne	--	Pokliče se ob napakah. Napaka ima polji `error` (koda) in `message`.
`ringtone`	`boolean \| string`	Ne	`false`	Med povezovanjem predvaja melodijo zvonjenja. `true` za privzeto melodijo zvonjenja ali niz URL za zvok po meri.

Čiščenje

ThunderPhone.mount() vrne primerek pripomočka z metodami za čiščenje:

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

unmount() in destroy() naredita isto – prekineta vsako aktivno glasovno sejo in odstranita pripomoček iz DOM-a. Uporabite tisto, ki se bolje bere v vaši kodi.

Primeri

Temna tema z barvo po meri

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

Položaj po meri

<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 povratnimi klici dogodkov

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

Z zvonjenjem

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

Z uporabo sklica na element DOM

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

Integracija z WordPressom / CMS-jem

To dodajte v blok HTML po meri ali v nogo svoje teme:

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

Odpravljanje težav

Gradnik se ne prikaže

Prepričajte se, da sta naloženi datoteki CSS in JS. V konzoli brskalnika preverite omrežne napake. Pred klicem ThunderPhone.mount() preverite, ali ciljni element obstaja v DOM-u.

ThunderPhone ni definiran

Skript še ni naložen. Prepričajte se, da je oznaka <script> za widget.js pred vašim klicem za priklop, ali pa klic za priklop ovijte v poslušalnik DOMContentLoaded.

Napaka: domena ni dovoljena

Svojo domeno dodajte na seznam dovoljenih domen v nastavitvah Razvijalci na app.thunderphone.com. Ne pozabite, da je localhost vedno dovoljen.

Naslednji koraki

Oblikovanje

Prilagodite videz gradnika z lastnostmi CSS po meri.

Komponenta React

Uporabljate React? Integracija komponente je preprostejša.