CDN / Script Tag

Lägg till ThunderPhone-röstwidgeten på valfri webbplats utan en bundler

CDN-versionen paketerar React internt, så du kan använda widgeten på statiska webbplatser, WordPress, Webflow eller vilken sida som helst där du kan lägga till HTML. Ingen npm, ingen bundlare och inget ramverk krävs.

CDN-URL:er

Latest (recommended)

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

Pinned version

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

Grundläggande användning

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

Widgeten monteras i målelementet och renderas som en fält med fast position i ett hörn av visningsområdet (standardvärdet är bottom-right, styrt av alternativet position). Monteringslementet är endast React-roten -- dess placering på sidan påverkar inte var widgeten visas.

Monteringsalternativ

ThunderPhone.mount() accepterar samma alternativ som React-komponenten, plus egenskapen element:

Alternativ	Typ	Krävs	Standard	Beskrivning
`element`	`string \| HTMLElement`	Ja	--	CSS-väljare (t.ex. `'#thunderphone'`) eller en referens till ett DOM-element.
`publishableKey`	`string`	Ja	--	Publicerbar API-nyckel (`pk_live_...`). Röstagenten fastställs automatiskt från nyckelns widgetkonfiguration.
`theme`	`'light' \| 'dark'`	Nej	`'light'`	Färgschema.
`primaryColor`	`string`	Nej	`'#000000'` (light) / `'#ffffff'` (dark)	CSS-färgsträng som används som accentfärg.
`title`	`string`	Nej	`'Voice assistant'`	Text som visas i widgetfältet.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nej	`'bottom-right'`	Fast position i visningsområdet.
`apiBase`	`string`	Nej	`'https://api.thunderphone.com/v1'`	Åsidosättning av API-bas-URL.
`language`	`string`	Nej	--	Åsidosättning av språk per session -- en språkkod eller språkinställning som `en`, `es` eller `fr-FR`. Om det inte anges används röstagentens konfigurerade språk.
`voice`	`string`	Nej	--	Åsidosättning av röst per session -- ett röstnamn som `maria`. Om det inte anges används röstagentens konfigurerade röst.
`context`	`string`	Nej	--	Faktabaserad sid- eller webbplatskontext per session som skickas till röstagenten. Avkortas på serversidan till 12 000 tecken.
`onConnect`	`() => void`	Nej	--	Anropas när röstsessionen ansluts.
`onDisconnect`	`() => void`	Nej	--	Anropas när sessionen avslutas.
`onError`	`(error) => void`	Nej	--	Anropas vid fel. Felet har fälten `error` (kod) och `message`.
`ringtone`	`boolean \| string`	Nej	`false`	Spela en ringsignal under anslutning. `true` för standardringsignalen eller en URL-sträng för anpassat ljud.

Rensning

ThunderPhone.mount() returnerar en widgetinstans med metoder för rensning:

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

Både unmount() och destroy() gör samma sak -- de kopplar från alla aktiva röstsamtal och tar bort widgeten från DOM:en. Använd det alternativ som passar bäst i din kod.

Exempel

Mörkt tema med anpassad färg

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

Anpassad position

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

Med händelseåteranrop

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

Med ringsignal

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

Använda en referens till ett DOM-element

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

Lägg till detta i ett anpassat HTML-block eller i sidfoten för ditt tema:

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

Felsökning

Widgeten visas inte

Kontrollera att både CSS- och JS-filerna har lästs in. Kontrollera webbläsarkonsolen efter nätverksfel. Verifiera att målelementet finns i DOM:en innan du anropar ThunderPhone.mount().

ThunderPhone är inte definierat

Skriptet har inte lästs in ännu. Kontrollera att <script>-taggen för widget.js visas före ditt mount-anrop, eller omslut mount-anropet med en DOMContentLoaded-lyssnare.

Fel: domänen är inte tillåten

Lägg till din domän i listan över tillåtna domäner i inställningarna för Utvecklare på app.thunderphone.com. Kom ihåg att localhost alltid är tillåten.

Nästa steg

Stilsättning

Anpassa widgetens utseende med anpassade CSS-egenskaper.

React-komponent

Använder du React? Komponentintegrationen är enklare.