CDN / Script Tag

CDN būvējums iekšēji ietver React, tāpēc varat izmantot logrīku statiskās vietnēs, WordPress, Webflow vai jebkurā lapā, kur varat pievienot HTML. Nav nepieciešams npm, būvētājs vai ietvars.

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 ar latest ir tie, ko ģenerē informācijas paneļa iegulšanas koda fragmentu ģenerators. Tie tiek kešoti 5 minūtes un automātiski saņem jaunus stabilos laidienus. Piespraustie ceļi /widget/vX.Y.Z/ ir nemaināmi un tiek kešoti ilgtermiņā — ja piespraužat versiju, saskaņojiet to ar @thunderphone/widget npm laidienu, pret kuru izstrādājat.

Pamatlietojums

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

Logrīks tiek pievienots mērķa elementam un tiek attēlots kā fiksētas pozīcijas josla skata apgabala stūrī (noklusējums ir bottom-right, ko nosaka opcija position). Pievienošanas elements ir tikai React saknes elements — tā atrašanās vieta lapā neietekmē vietu, kur tiek parādīts logrīks.

Pievienošanas opcijas

ThunderPhone.mount() pieņem tās pašas opcijas kā React komponents, kā arī rekvizītu element:

Opcija	Tips	Obligāts	Noklusējums	Apraksts
`element`	`string \| HTMLElement`	Jā	—	CSS atlasītājs (piemēram, `'#thunderphone'`) vai DOM elementa atsauce.
`publishableKey`	`string`	Jā	—	Publicējamā API atslēga (`pk_live_...`). Balss aģents tiek automātiski noteikts no atslēgas logrīka konfigurācijas.
`theme`	`'light' \| 'dark'`	Nē	`'light'`	Krāsu shēma.
`primaryColor`	`string`	Nē	`'#000000'` (gaišs) / `'#ffffff'` (tumšs)	CSS krāsas virkne, kas tiek izmantota kā akcenta krāsa.
`title`	`string`	Nē	`'Voice assistant'`	Logrīka joslā parādāmais teksts.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nē	`'bottom-right'`	Fiksēta pozīcija skata apgabalā.
`apiBase`	`string`	Nē	`'https://api.thunderphone.com/v1'`	API bāzes URL pārrakstīšana.
`language`	`string`	Nē	—	Valodas pārrakstīšana katrai sesijai — valodas kods vai lokalizācija, piemēram, `en`, `es` vai `fr-FR`. Ja nav iestatīta, tiek izmantota balss aģenta konfigurētā valoda.
`voice`	`string`	Nē	—	Balss pārrakstīšana katrai sesijai — balss nosaukums, piemēram, `maria`. Ja nav iestatīta, tiek izmantota balss aģenta konfigurētā balss.
`context`	`string`	Nē	—	Faktuāls lapas vai vietnes konteksts katrai sesijai, kas tiek nodots balss aģentam. Servera pusē saīsināts līdz 12 000 rakstzīmēm.
`onConnect`	`() => void`	Nē	—	Tiek izsaukts, kad tiek savienota balss sesija.
`onDisconnect`	`() => void`	Nē	—	Tiek izsaukts, kad sesija beidzas.
`onError`	`(error) => void`	Nē	—	Tiek izsaukts kļūdu gadījumā. Kļūdai ir lauki `error` (kods) un `message`.
`ringtone`	`boolean \| string`	Nē	`false`	Savienojuma veidošanas laikā atskaņot zvana signālu. `true` noklusējuma zvana signālam vai URL virkne pielāgotam audio.

Tīrīšana

ThunderPhone.mount() atgriež logrīka instanci ar tīrīšanas metodēm:

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

Gan unmount(), gan destroy() dara vienu un to pašu — tās atvieno jebkuru aktīvu balss sesiju un noņem logrīku no DOM. Izmantojiet to, kura jūsu kodā ir saprotamāka.

Vienmēr notīriet logrīku, pārejot uz citu skatu vienas lapas lietojumprogrammās vai noņemot ietverošo elementu. Tas nodrošina, ka aktīvās balss sesijas tiek pareizi atvienotas.

Piemēri

Tumšais motīvs ar pielāgotu krāsu

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

Pielāgota pozīcija

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

Ar notikumu atzvaniem

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

Ar zvana signālu

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

Izmantojot DOM elementa atsauci

<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 integrācija

Pievienojiet šo pielāgota HTML blokam vai savas tēmas kājenei:

<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> var atrasties jebkur — tas ir tikai pievienošanas punkts. Pats logrīks tiek attēlots kā fiksēts pārklājums skata loga stūrī (to nosaka opcija position) un neiekļaujas apkārtējā satura plūsmā.

Problēmu novēršana

Logrīks netiek parādīts

Pārliecinieties, ka ir ielādēti gan CSS, gan JS faili. Pārbaudiet pārlūkprogrammas konsoli, vai nav tīkla kļūdu. Pirms ThunderPhone.mount() izsaukšanas pārbaudiet, vai mērķa elements pastāv DOM.

ThunderPhone nav definēts

Skripts vēl nav ielādēts. Pārliecinieties, ka <script> tags failam widget.js atrodas pirms jūsu montēšanas izsaukuma, vai ietveriet montēšanas izsaukumu DOMContentLoaded klausītājā.

Domēns nav atļauts

Pievienojiet savu domēnu atļauto domēnu sarakstam Izstrādātāju iestatījumos vietnē app.thunderphone.com. Atcerieties, ka localhost vienmēr ir atļauts.

Widget

CDN URL

Pamatlietojums

Pievienošanas opcijas

Tīrīšana

Piemēri

Tumšais motīvs ar pielāgotu krāsu

Pielāgota pozīcija

Ar notikumu atzvaniem

Ar zvana signālu

Izmantojot DOM elementa atsauci

WordPress / CMS integrācija

Problēmu novēršana

Nākamās darbības

Stilizēšana

React komponents

​CDN URL

​Pamatlietojums

​Pievienošanas opcijas

​Tīrīšana

​Piemēri

​Tumšais motīvs ar pielāgotu krāsu

​Pielāgota pozīcija

​Ar notikumu atzvaniem

​Ar zvana signālu

​Izmantojot DOM elementa atsauci

​WordPress / CMS integrācija

​Problēmu novēršana

​Nākamās darbības

Stilizēšana

React komponents

CDN URL

Pamatlietojums

Pievienošanas opcijas

Tīrīšana

Piemēri

Tumšais motīvs ar pielāgotu krāsu

Pielāgota pozīcija

Ar notikumu atzvaniem

Ar zvana signālu

Izmantojot DOM elementa atsauci

WordPress / CMS integrācija

Problēmu novēršana

Nākamās darbības