CDN / Script Tag

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

<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:erna för latest är de som instrumentpanelens generator för inbäddningskod skapar. De cachelagras i 5 minuter och hämtar automatiskt nya stabila versioner. Fästa sökvägar för /widget/vX.Y.Z/ är oföränderliga och cachelagras långsiktigt — om du fäster en version ska den matcha den npm-version av @thunderphone/widget som du utvecklar mot.

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.

Rensa alltid upp widgeten när du navigerar bort i ensidiga applikationer eller när det innehållande elementet tas bort. Detta säkerställer att aktiva röstsamtal kopplas från korrekt.

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>

<div>-elementet kan placeras var som helst — det är bara monteringspunkten. Själva widgeten renderas som ett fast överlägg i ett hörn av visningsytan (anges med alternativet position) och följer inte omgivande innehåll.

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.

Widget

CDN-URL:er

Grundläggande användning

Monteringsalternativ

Rensning

Exempel

Mörkt tema med anpassad färg

Anpassad position

Med händelseåteranrop

Med ringsignal

Använda en referens till ett DOM-element

WordPress-/CMS-integration

Felsökning

Nästa steg

Stilsättning

React-komponent

​CDN-URL:er

​Grundläggande användning

​Monteringsalternativ

​Rensning

​Exempel

​Mörkt tema med anpassad färg

​Anpassad position

​Med händelseåteranrop

​Med ringsignal

​Använda en referens till ett DOM-element

​WordPress-/CMS-integration

​Felsökning

​Nästa steg

Stilsättning

React-komponent

CDN-URL:er

Grundläggande användning

Monteringsalternativ

Rensning

Exempel

Mörkt tema med anpassad färg

Anpassad position

Med händelseåteranrop

Med ringsignal

Använda en referens till ett DOM-element

WordPress-/CMS-integration

Felsökning

Nästa steg