CDN / тег скрипту

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>

URL-адреси latest генерує генератор коду для вбудовування в дашборді. Вони кешуються на 5 хвилин і автоматично отримують нові стабільні релізи. Закріплені шляхи /widget/vX.Y.Z/ є незмінними та кешуються довгостроково — якщо ви закріплюєте версію, вона має відповідати релізу npm @thunderphone/widget, з яким ви розробляєте.

Базове використання

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

<div> можна розмістити будь-де — це лише точка монтування. Сам віджет відображається як фіксоване накладання в куті області перегляду (задається параметром position) і не залежить від навколишнього вмісту.

Усунення несправностей

Віджет не відображається

Переконайтеся, що завантажено файли CSS і JS. Перевірте консоль браузера на наявність мережевих помилок. Переконайтеся, що цільовий елемент існує в DOM перед викликом ThunderPhone.mount().

ThunderPhone не визначено

Скрипт ще не завантажився. Переконайтеся, що тег <script> для widget.js розміщено перед викликом монтування, або обгорніть виклик монтування в слухач DOMContentLoaded.

Помилка: домен не дозволено

Додайте свій домен до списку дозволених доменів у налаштуваннях Розробники на app.thunderphone.com. Пам’ятайте, що localhost завжди дозволено.

Наступні кроки

Стилізація

Налаштуйте вигляд віджета за допомогою користувацьких властивостей CSS.

Компонент React

Використовуєте React? Інтеграція компонента простіша.

​CDN URL-адреси

​Базове використання

​Параметри монтування

​Очищення

​Приклади

​Темна тема з власним кольором

​Власне розташування

​Зі зворотними викликами подій

​З мелодією дзвінка

​Використання посилання на DOM-елемент

​Інтеграція з WordPress / CMS

​Усунення несправностей

​Наступні кроки

Стилізація

Компонент React

CDN URL-адреси

Базове використання

Параметри монтування

Очищення

Приклади

Темна тема з власним кольором

Власне розташування

Зі зворотними викликами подій

З мелодією дзвінка

Використання посилання на DOM-елемент

Інтеграція з WordPress / CMS

Усунення несправностей

Наступні кроки