Open in
CDN / Script Tag
Pievienojiet ThunderPhone balss logrīku jebkurai tīmekļa vietnei bez pakotņu veidotāja
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>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 selektors (piemēram, '#thunderphone') vai DOM elementa atsauce. |
publishableKey | string | Jā | -- | Publicējamā API atslēga (pk_live_...). Balss aģents tiek automātiski noteikts pēc atslēgas logrīka konfigurācijas. |
theme | 'light' | 'dark' | Nē | 'light' | Krāsu shēma. |
primaryColor | string | Nē | '#000000' (gaiša) / '#ffffff' (tumša) | Akcenta krāsai izmantota CSS krāsas virkne. |
title | string | Nē | 'Voice assistant' | Logrīka joslā rādāmais teksts. |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | Nē | 'bottom-right' | Fiksēta pozīcija skatvietā. |
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. Nepieciešams language atslēgas pārlūka pārrakstījumos. |
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. Nepieciešams voice atslēgas pārlūka pārrakstījumos. |
context | string | Nē | -- | Balss aģentam nodots faktiskais lapas vai vietnes konteksts katrai sesijai. Servera pusē tiek saīsināts līdz 12 000 rakstzīmēm. Nepieciešams context atslēgas pārlūka pārrakstījumos. |
onConnect | () => void | Nē | -- | Tiek izsaukts, kad balss sesija tiek savienota. |
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 izveides 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.
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>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 logrīka atļauto domēnu sarakstam lapā Tīmekļa logrīki vietnē app.thunderphone.com. Produkcijas vidē localhost netiek atļauts automātiski; pievienojiet to sarakstam, lai testētu lokāli.