CDN / Značka scriptu

Verzia CDN interne obsahuje React, takže widget môžete použiť na statických stránkach, vo WordPress, Webflow alebo na akejkoľvek stránke, na ktorú môžete pridať HTML. Nevyžaduje sa npm, bundler ani framework.

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

Základné použitie

<!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 sa pripojí do cieľového prvku a vykreslí sa ako panel s pevnou pozíciou v rohu zobrazovacej oblasti (predvolene bottom-right, ovládané voľbou position). Prvok pripojenia je iba koreň Reactu -- jeho umiestnenie na stránke nemá vplyv na to, kde sa widget zobrazí.

Možnosti pripojenia

ThunderPhone.mount() prijíma rovnaké možnosti ako komponent Reactu a navyše vlastnosť element:

Možnosť	Typ	Povinné	Predvolené	Popis
`element`	`string \| HTMLElement`	Áno	--	Selektor CSS (napr. `'#thunderphone'`) alebo referencia na prvok DOM.
`publishableKey`	`string`	Áno	--	Verejný kľúč API (`pk_live_...`). Agent sa automaticky určí z konfigurácie widgetu kľúča.
`theme`	`'light' \| 'dark'`	Nie	`'light'`	Farebná schéma.
`primaryColor`	`string`	Nie	`'#000000'` (svetlá) / `'#ffffff'` (tmavá)	Reťazec farby CSS použitý ako farba akcentu.
`title`	`string`	Nie	`'Voice assistant'`	Text zobrazený na paneli widgetu.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nie	`'bottom-right'`	Pevná pozícia v zobrazovacej oblasti.
`apiBase`	`string`	Nie	`'https://api.thunderphone.com/v1'`	Prepísanie základnej adresy URL API.
`language`	`string`	Nie	--	Prepísanie jazyka pre reláciu -- kód jazyka alebo lokálne nastavenie, napríklad `en`, `es` alebo `fr-FR`. Keď nie je nastavené, použije sa nakonfigurovaný jazyk agenta.
`voice`	`string`	Nie	--	Prepísanie hlasu pre reláciu -- názov hlasu, napríklad `maria`. Keď nie je nastavené, použije sa nakonfigurovaný hlas agenta.
`context`	`string`	Nie	--	Kontext faktických informácií o stránke alebo webe pre reláciu odovzdaný agentovi. Na strane servera sa skráti na 12 000 znakov.
`onConnect`	`() => void`	Nie	--	Zavolá sa po pripojení hlasovej relácie.
`onDisconnect`	`() => void`	Nie	--	Zavolá sa po ukončení relácie.
`onError`	`(error) => void`	Nie	--	Zavolá sa pri chybách. Chyba obsahuje polia `error` (kód) a `message`.
`ringtone`	`boolean \| string`	Nie	`false`	Počas pripájania prehrá vyzváňací tón. Hodnota `true` použije predvolený vyzváňací tón alebo reťazec URL pre vlastný zvuk.

Vyčistenie

ThunderPhone.mount() vracia inštanciu widgetu s metódami na vyčistenie:

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

Funkcie unmount() aj destroy() robia to isté – odpoja všetky aktívne hlasové relácie a odstránia widget z DOM. Použite tú, ktorá sa vo vašom kóde číta lepšie.

Príklady

Tmavá téma s vlastnou farbou

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

Vlastná pozícia

<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 spätnými volaniami udalostí

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

So zvonením

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

Použitie odkazu na prvok 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>

Integrácia s WordPressom / CMS

Pridajte tento kód do bloku Vlastné HTML alebo do päty svojej témy:

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

Riešenie problémov

Widget sa nezobrazuje

Uistite sa, že sú načítané súbory CSS aj JS. Skontrolujte konzolu prehliadača, či neobsahuje sieťové chyby. Overte, že cieľový prvok existuje v DOM pred volaním ThunderPhone.mount().

ThunderPhone nie je definovaný

Skript sa ešte nenačítal. Uistite sa, že značka <script> pre widget.js sa nachádza pred volaním pripojenia, alebo volanie pripojenia zabaľte do poslucháča DOMContentLoaded.

Chyba: doména nie je povolená

Pridajte svoju doménu do zoznamu povolených domén v nastaveniach Vývojári na app.thunderphone.com. Nezabudnite, že localhost je vždy povolený.

Ďalšie kroky

Štýlovanie

Prispôsobte vzhľad widgetu pomocou vlastných vlastností CSS.

Komponent React

Používate React? Integrácia komponentu je jednoduchšia.