CDN / Lebo ya script

Muundo wa CDN hujumuisha React ndani yake, kwa hivyo unaweza kutumia wijeti kwenye tovuti tuli, WordPress, Webflow, au ukurasa wowote ambapo unaweza kuongeza HTML. Huhitaji npm, bundler, wala framework.

URL za CDN

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

Matumizi ya Msingi

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

Wijeti hujipachika kwenye elementi lengwa na huonyeshwa kama upau wa nafasi isiyobadilika katika kona ya eneo la kuonyesha (chaguomsingi bottom-right, inadhibitiwa na chaguo la position). Elementi ya kupachika ni mzizi wa React pekee -- eneo lake kwenye ukurasa haliathiri mahali wijeti inaonekana.

Chaguo za Kupachika

ThunderPhone.mount() hukubali chaguo sawa na kijenzi cha React, pamoja na sifa ya element:

Chaguo	Aina	Inahitajika	Chaguomsingi	Maelezo
`element`	`string \| HTMLElement`	Ndiyo	--	Kiteuzi cha CSS (mfano, `'#thunderphone'`) au rejeleo la elementi ya DOM.
`publishableKey`	`string`	Ndiyo	--	Ufunguo wa API unaoweza kuchapishwa (`pk_live_...`). Ejenti huamuliwa kiotomatiki kutoka kwenye usanidi wa wijeti wa ufunguo.
`theme`	`'light' \| 'dark'`	Hapana	`'light'`	Mpangilio wa rangi.
`primaryColor`	`string`	Hapana	`'#000000'` (mwanga) / `'#ffffff'` (giza)	Mfuatano wa rangi wa CSS unaotumika kama rangi ya mkazo.
`title`	`string`	Hapana	`'Voice assistant'`	Maandishi yanayoonyeshwa kwenye upau wa wijeti.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Hapana	`'bottom-right'`	Nafasi isiyobadilika katika eneo la kuonyesha.
`apiBase`	`string`	Hapana	`'https://api.thunderphone.com/v1'`	Kubatilisha URL msingi ya API.
`language`	`string`	Hapana	--	Kubatilisha lugha kwa kila kipindi -- msimbo wa lugha au locale kama `en`, `es`, au `fr-FR`. Isipowekwa, lugha iliyosanidiwa ya ejenti hutumika.
`voice`	`string`	Hapana	--	Kubatilisha sauti kwa kila kipindi -- jina la sauti kama `maria`. Isipowekwa, sauti iliyosanidiwa ya ejenti hutumika.
`context`	`string`	Hapana	--	Muktadha wa ukweli wa ukurasa au tovuti kwa kila kipindi unaotumwa kwa ejenti. Hukatwa upande wa seva hadi herufi 12,000.
`onConnect`	`() => void`	Hapana	--	Huitwa kipindi cha sauti kinapounganishwa.
`onDisconnect`	`() => void`	Hapana	--	Huitwa kipindi kinapoisha.
`onError`	`(error) => void`	Hapana	--	Huitwa hitilafu zinapotokea. Hitilafu ina sehemu za `error` (msimbo) na `message`.
`ringtone`	`boolean \| string`	Hapana	`false`	Cheza mlio wa simu wakati wa kuunganisha. `true` kwa mlio chaguomsingi wa simu, au mfuatano wa URL kwa sauti maalum.

Usafishaji

ThunderPhone.mount() hurejesha kielelezo cha wijeti chenye mbinu za usafishaji:

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

unmount() na destroy() zote hufanya jambo lilelile -- hutenganisha kipindi chochote cha sauti kinachotumika na kuondoa wijeti kutoka kwenye DOM. Tumia yoyote inayoeleweka zaidi kwenye msimbo wako.

Mifano

Mandhari Meusi yenye Rangi Maalum

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

Nafasi Maalum

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

Yenye Vipokezi vya Tukio

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

Yenye Mlio wa Simu

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

Kutumia Rejeleo la Kipengele cha DOM

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

Ujumuishaji wa WordPress / CMS

Ongeza hii kwenye bloku ya HTML Maalum au sehemu ya chini ya mandhari yako:

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

Utatuzi wa matatizo

Wijeti haionekani

Hakikisha faili za CSS na JS zimepakiwa. Angalia konsoli ya kivinjari kwa hitilafu za mtandao. Thibitisha kwamba elementi lengwa ipo kwenye DOM kabla ya kuita ThunderPhone.mount().

ThunderPhone haijafafanuliwa

Script bado haijapakiwa. Hakikisha lebo ya <script> ya widget.js inaonekana kabla ya mwito wako wa mount, au funga mwito wa mount katika kisikilizaji cha DOMContentLoaded.

Hitilafu ya kikoa kutoruhusiwa

Ongeza kikoa chako kwenye orodha ya vikoa vinavyoruhusiwa katika mipangilio ya Wasanidi kwenye app.thunderphone.com. Kumbuka kwamba localhost huruhusiwa kila wakati.

Hatua zinazofuata

Mitindo

Rekebisha mwonekano wa wijeti kwa kutumia sifa maalum za CSS.

Kipengele cha React

Unatumia React? Ujumuishaji wa kipengele ni rahisi zaidi.