Open in
CDN / značka script
Přidejte hlasový widget ThunderPhone na libovolný web bez bundleru
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>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í | Popis |
|---|---|---|---|---|
element | string | HTMLElement | Ano | -- | Selektor CSS (např. '#thunderphone') nebo odkaz na prvek DOM. |
publishableKey | string | Ano | -- | Publikovatelný klíč API (pk_live_...). 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 barva zvýraznění. |
title | string | Ne | 'Voice assistant' | Text zobrazený v liště 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. Vyžaduje language v přepsáních prohlížeče klíče. |
voice | string | Ne | -- | Přepsání hlasu pro relaci -- název hlasu, například maria. Pokud není nastaveno, použije se nakonfigurovaný hlas agenta. Vyžaduje voice v přepsáních prohlížeče klíče. |
context | string | Ne | -- | Faktický kontext stránky nebo webu pro relaci předaný agentovi. Na straně serveru je zkrácen na 12 000 znaků. Vyžaduje context v přepsáních prohlížeče klíče. |
onConnect | () => void | Ne | -- | Volá se při připojení hlasové relace. |
onDisconnect | () => void | Ne | -- | Volá se při 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 pro 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.
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>Řešení potíží
Widget se nezobrazuje
Ujistěte se, že jsou načteny soubory CSS i JS. V konzoli prohlížeče zkontrolujte chyby sítě. Před voláním ThunderPhone.mount() ověřte, že cílový prvek existuje v DOM.
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 mezi povolené domény widgetu na stránce Webové widgety na app.thunderphone.com. localhost není v produkci automaticky povolen; pro místní testování jej přidejte do seznamu.