CDN / značka script

Sestavení CDN interně obsahuje React, takže widget můžete použít na statických webech, ve WordPressu, ve Webflow nebo na jakékoli stránce, kam můžete přidat HTML. Není potřeba 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>

Adresy URL latest vytváří generátor vloženého úryvku v dashboardu. Ukládají se do mezipaměti na 5 minut a automaticky přebírají nová stabilní vydání. Připnuté cesty /widget/vX.Y.Z/ jsou neměnné a ukládají se do mezipaměti dlouhodobě — pokud verzi připnete, musí odpovídat vydání npm balíčku @thunderphone/widget, pro které vyvíjíte.

Základní použití

<!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 se připojí do cílového prvku a vykreslí se jako panel s pevnou pozicí v rohu výřezu (ve výchozím nastavení bottom-right, řízeno volbou position). Prvek připojení je pouze kořen Reactu — jeho umístění na stránce nemá vliv na to, kde se widget zobrazí.

Možnosti připojení

ThunderPhone.mount() přijímá stejné možnosti jako komponenta React plus vlastnost element:

Možnost	Typ	Povinné	Výchozí hodnota	Popis
`element`	`string \| HTMLElement`	Ano	—	Selektor CSS (např. `'#thunderphone'`) nebo odkaz na prvek DOM.
`publishableKey`	`string`	Ano	—	Publikovatelný klíč API (`pk_live_...`). Hlasový agent se automaticky určí z konfigurace widgetu klíče.
`theme`	`'light' \| 'dark'`	Ne	`'light'`	Barevné schéma.
`primaryColor`	`string`	Ne	`'#000000'` (světlé) / `'#ffffff'` (tmavé)	Řetězec barvy CSS použitý jako zvýrazňující barva.
`title`	`string`	Ne	`'Voice assistant'`	Text zobrazený v panelu widgetu.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ne	`'bottom-right'`	Pevná pozice ve výřezu.
`apiBase`	`string`	Ne	`'https://api.thunderphone.com/v1'`	Přepsání základní adresy URL API.
`language`	`string`	Ne	—	Přepsání jazyka pro relaci — kód jazyka nebo národní prostředí, například `en`, `es` nebo `fr-FR`. Pokud není nastaveno, použije se nakonfigurovaný jazyk agenta.
`voice`	`string`	Ne	—	Přepsání hlasu pro relaci — název hlasu, například `maria`. Pokud není nastaveno, použije se nakonfigurovaný hlas agenta.
`context`	`string`	Ne	—	Faktický kontext stránky nebo webu pro relaci předaný agentovi. Na straně serveru se zkrátí na 12 000 znaků.
`onConnect`	`() => void`	Ne	—	Volá se při připojení hlasové relace.
`onDisconnect`	`() => void`	Ne	—	Volá se po ukončení relace.
`onError`	`(error) => void`	Ne	—	Volá se při chybách. Chyba obsahuje pole `error` (kód) a `message`.
`ringtone`	`boolean \| string`	Ne	`false`	Při připojování přehraje vyzváněcí tón. `true` použije výchozí vyzváněcí tón nebo řetězec URL pro vlastní zvuk.

Vyčištění

ThunderPhone.mount() vrací instanci widgetu s metodami pro vyčištění:

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

Metody unmount() a destroy() provádějí totéž — odpojí všechny aktivní hlasové relace a odstraní widget z DOM. Použijte tu, která se ve vašem kódu čte lépe.

Widget vždy vyčistěte při navigaci pryč v jednostránkových aplikacích nebo při odstranění obsahujícího prvku. Tím zajistíte správné odpojení aktivních hlasových relací.

Příklady

Tmavý motiv s vlastní barvou

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

<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 obslužnými funkcemi událostí

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

S vyzvánění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žití odkazu na prvek 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>

Integrace s WordPress / CMS

Přidejte toto do bloku vlastního HTML nebo do zápatí motivu:

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

Prvek <div> může být kdekoli — slouží pouze jako bod připojení. Samotný widget se vykresluje jako pevné překrytí v rohu výřezu (nastaveném možností position) a neřídí se tokem okolního obsahu.

Řešení potíží

Widget se nezobrazuje

ThunderPhone není definován

Skript se ještě nenačetl. Ujistěte se, že značka <script> pro widget.js je uvedena před voláním připojení, nebo volání připojení zabalte do posluchače DOMContentLoaded.

Chyba: doména není povolena

Přidejte svou doménu do seznamu povolených domén v nastavení Vývojáři na app.thunderphone.com. Nezapomeňte, že localhost je vždy povolen.

Widget

Adresy URL CDN

Základní použití

Možnosti připojení

Vyčištění

Příklady

Tmavý motiv s vlastní barvou

Vlastní pozice

S obslužnými funkcemi událostí

S vyzváněním

Použití odkazu na prvek DOM

Integrace s WordPress / CMS

Řešení potíží

Další kroky

Vzhled

Komponenta React

​Adresy URL CDN

​Základní použití

​Možnosti připojení

​Vyčištění

​Příklady

​Tmavý motiv s vlastní barvou

​Vlastní pozice

​S obslužnými funkcemi událostí

​S vyzváněním

​Použití odkazu na prvek DOM

​Integrace s WordPress / CMS

​Řešení potíží

​Další kroky

Vzhled

Komponenta React

Adresy URL CDN

Základní použití

Možnosti připojení

Vyčištění

Příklady

Tmavý motiv s vlastní barvou

Vlastní pozice

S obslužnými funkcemi událostí

S vyzváněním

Použití odkazu na prvek DOM

Integrace s WordPress / CMS

Řešení potíží

Další kroky