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 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.
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 atļauto domēnu sarakstam Izstrādātāju iestatījumos vietnē app.thunderphone.com. Atcerieties, ka localhost vienmēr ir atļauts.