CDN / тег скрипту
Додайте голосовий віджет ThunderPhone на будь-який вебсайт без збирача
CDN-збірка містить React усередині, тому ви можете використовувати віджет на статичних сайтах, WordPress, Webflow або будь-якій сторінці, де можна додати HTML. Не потрібні ні npm, ні бандлер, ні фреймворк.
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>Базове використання
<!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>Віджет монтується в цільовий елемент і відображається як панель із фіксованим положенням у куті області перегляду (за замовчуванням bottom-right, керується параметром position). Елемент монтування — це лише кореневий елемент React; його розташування на сторінці не впливає на місце появи віджета.
Параметри монтування
ThunderPhone.mount() приймає ті самі параметри, що й компонент React, а також властивість element:
| Параметр | Тип | Обов’язково | За замовчуванням | Опис |
|---|---|---|---|---|
element | string | HTMLElement | Так | -- | CSS-селектор (наприклад, '#thunderphone') або посилання на DOM-елемент. |
publishableKey | string | Так | -- | Публічний API-ключ (pk_live_...). Агент автоматично визначається з конфігурації віджета ключа. |
theme | 'light' | 'dark' | Ні | 'light' | Колірна схема. |
primaryColor | string | Ні | '#000000' (світла) / '#ffffff' (темна) | Рядок кольору CSS, що використовується як акцентний колір. |
title | string | Ні | 'Voice assistant' | Текст, що відображається на панелі віджета. |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | Ні | 'bottom-right' | Фіксоване положення в області перегляду. |
apiBase | string | Ні | 'https://api.thunderphone.com/v1' | Перевизначення базової URL-адреси API. |
language | string | Ні | -- | Перевизначення мови для сеансу — код мови або локаль, наприклад en, es чи fr-FR. Якщо не задано, застосовується налаштована мова агента. |
voice | string | Ні | -- | Перевизначення голосу для сеансу — назва голосу, наприклад maria. Якщо не задано, застосовується налаштований голос агента. |
context | string | Ні | -- | Фактичний контекст сторінки або сайту для сеансу, що передається агенту. На сервері скорочується до 12 000 символів. |
onConnect | () => void | Ні | -- | Викликається, коли голосовий сеанс підключається. |
onDisconnect | () => void | Ні | -- | Викликається, коли сеанс завершується. |
onError | (error) => void | Ні | -- | Викликається у разі помилок. Об’єкт помилки має поля error (код) і message. |
ringtone | boolean | string | Ні | false | Відтворювати мелодію виклику під час підключення. true для мелодії за замовчуванням або URL-рядок для власного аудіо. |
Очищення
ThunderPhone.mount() повертає екземпляр віджета з методами очищення:
<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() і destroy() виконують те саме -- вони відключають будь-який активний голосовий сеанс і видаляють віджет із DOM. Використовуйте той варіант, який краще читається у вашому коді.
Приклади
Темна тема з власним кольором
<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>Власне розташування
<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>Зі зворотними викликами подій
<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>З мелодією дзвінка
<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>Використання посилання на 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>Інтеграція з WordPress / CMS
Додайте це до блоку «Власний HTML» або нижнього колонтитула вашої теми:
<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>Усунення несправностей
Віджет не відображається
Переконайтеся, що завантажено файли CSS і JS. Перевірте консоль браузера на наявність мережевих помилок. Переконайтеся, що цільовий елемент існує в DOM перед викликом ThunderPhone.mount().
ThunderPhone не визначено
Скрипт ще не завантажився. Переконайтеся, що тег <script> для widget.js розміщено перед викликом монтування, або обгорніть виклик монтування в слухач DOMContentLoaded.
Помилка: домен не дозволено
Додайте свій домен до списку дозволених доменів у налаштуваннях Розробники на app.thunderphone.com. Пам’ятайте, що localhost завжди дозволено.