CDN / oznaka skripte

CDN izgradnja interno uključuje React, pa widget možete upotrebljavati na statičkim stranicama, u WordPressu, Webflowu ili na bilo kojoj stranici na koju možete dodati HTML. Nisu potrebni npm, alat za grupiranje ni radni okvir.

CDN URL-ovi

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

Osnovna upotreba

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

Widget se montira u ciljni element i prikazuje kao traka s fiksnim položajem u kutu prikaza (zadano bottom-right, kontrolira se opcijom position). Element za montiranje samo je korijenski element Reacta -- njegov položaj na stranici ne utječe na mjesto prikaza widgeta.

Opcije montiranja

ThunderPhone.mount() prihvaća iste opcije kao komponenta Reacta, uz svojstvo element:

Opcija	Vrsta	Obavezno	Zadano	Opis
`element`	`string \| HTMLElement`	Da	--	CSS selektor (npr. `'#thunderphone'`) ili referenca na DOM element.
`publishableKey`	`string`	Da	--	Javni API ključ (`pk_live_...`). Agent se automatski određuje iz konfiguracije widgeta ključa.
`theme`	`'light' \| 'dark'`	Ne	`'light'`	Shema boja.
`primaryColor`	`string`	Ne	`'#000000'` (svijetla) / `'#ffffff'` (tamna)	CSS niz boje koji se upotrebljava kao naglasna boja.
`title`	`string`	Ne	`'Voice assistant'`	Tekst prikazan na traci widgeta.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ne	`'bottom-right'`	Fiksni položaj u prikazu.
`apiBase`	`string`	Ne	`'https://api.thunderphone.com/v1'`	Nadjačavanje osnovnog URL-a API-ja.
`language`	`string`	Ne	--	Nadjačavanje jezika po sesiji -- jezični kôd ili regionalna postavka, poput `en`, `es` ili `fr-FR`. Kada nije postavljeno, primjenjuje se konfigurirani jezik agenta.
`voice`	`string`	Ne	--	Nadjačavanje glasa po sesiji -- naziv glasa, poput `maria`. Kada nije postavljeno, primjenjuje se konfigurirani glas agenta.
`context`	`string`	Ne	--	Činjenični kontekst stranice ili web-mjesta po sesiji koji se prosljeđuje agentu. Na strani poslužitelja skraćuje se na 12.000 znakova.
`onConnect`	`() => void`	Ne	--	Poziva se kada se poveže glasovna sesija.
`onDisconnect`	`() => void`	Ne	--	Poziva se kada sesija završi.
`onError`	`(error) => void`	Ne	--	Poziva se pri pogreškama. Pogreška ima polja `error` (kôd) i `message`.
`ringtone`	`boolean \| string`	Ne	`false`	Reproducirajte melodiju zvona tijekom povezivanja. `true` za zadanu melodiju zvona ili URL niz za prilagođeni zvuk.

Čišćenje

ThunderPhone.mount() vraća instancu widgeta s metodama za čišćenje:

<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() i destroy() rade isto -- prekidaju svaku aktivnu glasovnu sesiju i uklanjaju widget iz DOM-a. Upotrijebite onu koja se bolje uklapa u vaš kôd.

Primjeri

Tamna tema s prilagođenom bojom

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

Prilagođeni položaj

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

S povratnim pozivima događaja

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

S melodijom zvona

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

Upotreba reference elementa DOM-a

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

Integracija s WordPressom / CMS-om

Dodajte ovo u blok Prilagođeni HTML ili podnožje svoje teme:

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

Rješavanje problema

Widget se ne prikazuje

Provjerite jesu li učitane i CSS i JS datoteke. Provjerite postoje li mrežne pogreške u konzoli preglednika. Provjerite postoji li ciljni element u DOM-u prije pozivanja ThunderPhone.mount().

ThunderPhone nije definiran

Skripta se još nije učitala. Provjerite pojavljuje li se oznaka <script> za widget.js prije vašeg poziva za montiranje ili omotajte poziv za montiranje u osluškivač DOMContentLoaded.

Pogreška: domena nije dopuštena

Dodajte svoju domenu na popis dopuštenih domena u postavkama Razvojni programeri na app.thunderphone.com. Imajte na umu da je localhost uvijek dopušten.

Sljedeći koraci

Stiliziranje

Prilagodite izgled widgeta pomoću prilagođenih CSS svojstava.

React komponenta

Koristite React? Integracija komponente jednostavnija je.