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>

Основна употреба

<!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? Интеграција компоненте је једноставнија.