CDN / Скриптов таг

CDN компилацията включва React вътрешно, така че можете да използвате уиджета в статични сайтове, WordPress, Webflow или всяка страница, където можете да добавяте HTML. Не са необходими npm, пакетиращ инструмент или framework.

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 винаги е разрешен.

Следващи стъпки

Стилизиране

Персонализирайте външния вид на уиджета с персонализирани CSS свойства.

React компонент

Използвате React? Интеграцията с компонента е по-лесна.