CDN / Etichetă de script

Versiunea CDN include React intern, astfel încât puteți utiliza widgetul pe site-uri statice, WordPress, Webflow sau pe orice pagină în care puteți adăuga HTML. Nu sunt necesare npm, un bundler sau un framework.

URL-uri 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>

URL-urile latest sunt generate de generatorul de fragmente de încorporare din tabloul de bord. Sunt stocate în cache timp de 5 minute și preiau automat versiunile stabile noi. Căile fixate /widget/vX.Y.Z/ sunt imuabile și stocate în cache pe termen lung — dacă fixați o versiune, potriviți-o cu versiunea npm @thunderphone/widget pentru care dezvoltați.

Utilizare de bază

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

Widgetul se montează în elementul-țintă și se afișează ca o bară cu poziție fixă într-un colț al ferestrei de vizualizare (implicit bottom-right, controlat prin opțiunea position). Elementul de montare este doar rădăcina React — poziția sa în pagină nu afectează locul în care apare widgetul.

Opțiuni de montare

ThunderPhone.mount() acceptă aceleași opțiuni ca componenta React, plus proprietatea element:

Opțiune	Tip	Obligatoriu	Implicit	Descriere
`element`	`string \| HTMLElement`	Da	—	Selector CSS (de exemplu, `'#thunderphone'`) sau referință la un element DOM.
`publishableKey`	`string`	Da	—	Cheie API publicabilă (`pk_live_...`). Agentul vocal este determinat automat din configurația widgetului cheii.
`theme`	`'light' \| 'dark'`	Nu	`'light'`	Schemă de culori.
`primaryColor`	`string`	Nu	`'#000000'` (deschis) / `'#ffffff'` (închis)	Șir de culoare CSS utilizat ca culoare de accent.
`title`	`string`	Nu	`'Voice assistant'`	Text afișat în bara widgetului.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nu	`'bottom-right'`	Poziție fixă în fereastra de vizualizare.
`apiBase`	`string`	Nu	`'https://api.thunderphone.com/v1'`	Suprascrierea URL-ului de bază al API-ului.
`language`	`string`	Nu	—	Suprascriere a limbii pentru fiecare sesiune — un cod de limbă sau o setare regională, precum `en`, `es` sau `fr-FR`. Când nu este setată, se aplică limba configurată a agentului vocal.
`voice`	`string`	Nu	—	Suprascriere a vocii pentru fiecare sesiune — un nume de voce, precum `maria`. Când nu este setată, se aplică vocea configurată a agentului vocal.
`context`	`string`	Nu	—	Context factual al paginii sau site-ului pentru fiecare sesiune, transmis agentului vocal. Este trunchiat pe server la 12.000 de caractere.
`onConnect`	`() => void`	Nu	—	Apelată când sesiunea vocală se conectează.
`onDisconnect`	`() => void`	Nu	—	Apelată când sesiunea se încheie.
`onError`	`(error) => void`	Nu	—	Apelată la erori. Eroarea are câmpurile `error` (cod) și `message`.
`ringtone`	`boolean \| string`	Nu	`false`	Redă un ton de apel în timpul conectării. `true` pentru tonul de apel implicit sau un șir URL pentru audio personalizat.

Curățare

ThunderPhone.mount() returnează o instanță de widget cu metode de curățare:

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

Atât unmount(), cât și destroy() au același efect — deconectează orice sesiune vocală activă și elimină widgetul din DOM. Folosiți varianta care se potrivește mai bine în codul dumneavoastră.

Curățați întotdeauna widgetul când navigați în afara aplicațiilor cu o singură pagină sau când elementul care îl conține este eliminat. Astfel vă asigurați că sesiunile vocale active sunt deconectate corect.

Exemple

Temă întunecată cu culoare personalizată

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

Poziție personalizată

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

Cu callbackuri de evenimente

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

Cu ton de apel

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

Utilizarea unei referințe la un element 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>

Integrare WordPress / CMS

Adăugați acest cod într-un bloc HTML personalizat sau în subsolul temei dumneavoastră:

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

Elementul <div> poate fi plasat oriunde — este doar punctul de montare. Widgetul propriu-zis se afișează ca o suprapunere fixă într-un colț al ferestrei de vizualizare (stabilit prin opțiunea position) și nu urmează fluxul conținutului din jur.

Depanare

Widgetul nu apare

Asigurați-vă că sunt încărcate atât fișierele CSS, cât și cele JS. Verificați consola browserului pentru erori de rețea. Verificați că elementul țintă există în DOM înainte de a apela ThunderPhone.mount().

ThunderPhone nu este definit

Scriptul nu s-a încărcat încă. Asigurați-vă că eticheta <script> pentru widget.js apare înainte de apelul de montare sau includeți apelul de montare într-un listener DOMContentLoaded.

Eroare: domeniu nepermis

Adăugați domeniul dumneavoastră în lista de domenii permise din setările Dezvoltatori la app.thunderphone.com. Rețineți că localhost este întotdeauna permis.

Widget

CDN / Etichetă de script

URL-uri CDN

Utilizare de bază

Opțiuni de montare

Curățare

Exemple

Temă întunecată cu culoare personalizată

Poziție personalizată

Cu callbackuri de evenimente

Cu ton de apel

Utilizarea unei referințe la un element DOM

Integrare WordPress / CMS

Depanare

Pașii următori

Stilizare

Componentă React

​URL-uri CDN

​Utilizare de bază

​Opțiuni de montare

​Curățare

​Exemple

​Temă întunecată cu culoare personalizată

​Poziție personalizată

​Cu callbackuri de evenimente

​Cu ton de apel

​Utilizarea unei referințe la un element DOM

​Integrare WordPress / CMS

​Depanare

​Pașii următori

Stilizare

Componentă React

URL-uri CDN

Utilizare de bază

Opțiuni de montare

Curățare

Exemple

Temă întunecată cu culoare personalizată

Poziție personalizată

Cu callbackuri de evenimente

Cu ton de apel

Utilizarea unei referințe la un element DOM

Integrare WordPress / CMS

Depanare

Pașii următori