CDN / Tag Skrip

Tambahkan widget suara ThunderPhone ke situs web apa pun tanpa bundler

Build CDN membundel React secara internal, sehingga Anda dapat menggunakan widget di situs statis, WordPress, Webflow, atau halaman apa pun tempat Anda dapat menambahkan HTML. Tidak memerlukan npm, bundler, atau framework.

URL CDN

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>

Penggunaan Dasar

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

Widget dipasang ke elemen target dan dirender sebagai bilah berposisi tetap di sudut viewport (default bottom-right, dikendalikan oleh opsi position). Elemen pemasangan hanya merupakan root React -- lokasinya di halaman tidak memengaruhi tempat widget muncul.

Opsi Pemasangan

ThunderPhone.mount() menerima opsi yang sama seperti komponen React, ditambah properti element:

Opsi	Tipe	Wajib	Default	Deskripsi
`element`	`string \| HTMLElement`	Ya	--	Selektor CSS (misalnya, `'#thunderphone'`) atau referensi elemen DOM.
`publishableKey`	`string`	Ya	--	Kunci API yang dapat dipublikasikan (`pk_live_...`). Agen ditentukan secara otomatis dari konfigurasi widget kunci tersebut.
`theme`	`'light' \| 'dark'`	Tidak	`'light'`	Skema warna.
`primaryColor`	`string`	Tidak	`'#000000'` (terang) / `'#ffffff'` (gelap)	String warna CSS yang digunakan sebagai warna aksen.
`title`	`string`	Tidak	`'Voice assistant'`	Teks yang ditampilkan di bilah widget.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Tidak	`'bottom-right'`	Posisi viewport tetap.
`apiBase`	`string`	Tidak	`'https://api.thunderphone.com/v1'`	Penggantian URL dasar API.
`language`	`string`	Tidak	--	Penggantian bahasa per sesi -- kode bahasa atau lokal seperti `en`, `es`, atau `fr-FR`. Jika tidak ditetapkan, bahasa yang dikonfigurasi untuk agen digunakan.
`voice`	`string`	Tidak	--	Penggantian suara per sesi -- nama suara seperti `maria`. Jika tidak ditetapkan, suara yang dikonfigurasi untuk agen digunakan.
`context`	`string`	Tidak	--	Konteks faktual halaman atau situs per sesi yang diteruskan ke agen. Dipotong di sisi server hingga 12.000 karakter.
`onConnect`	`() => void`	Tidak	--	Dipanggil saat sesi suara terhubung.
`onDisconnect`	`() => void`	Tidak	--	Dipanggil saat sesi berakhir.
`onError`	`(error) => void`	Tidak	--	Dipanggil ketika terjadi kesalahan. Error memiliki field `error` (kode) dan `message`.
`ringtone`	`boolean \| string`	Tidak	`false`	Putar nada dering saat menghubungkan. `true` untuk nada dering default, atau string URL untuk audio kustom.

Pembersihan

ThunderPhone.mount() mengembalikan instance widget dengan metode pembersihan:

<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() dan destroy() melakukan hal yang sama -- keduanya memutuskan sesi suara aktif dan menghapus widget dari DOM. Gunakan yang paling sesuai dibaca dalam kode Anda.

Contoh

Tema Gelap dengan Warna Kustom

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

Posisi Kustom

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

Dengan Callback Peristiwa

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

Dengan Nada Dering

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

Menggunakan Referensi Elemen 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>

Integrasi WordPress / CMS

Tambahkan ini ke blok HTML Kustom atau footer tema Anda:

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

Pemecahan Masalah

Widget tidak muncul

Pastikan file CSS dan JS telah dimuat. Periksa konsol browser untuk kesalahan jaringan. Verifikasi bahwa elemen target ada di DOM sebelum memanggil ThunderPhone.mount().

ThunderPhone tidak terdefinisi

Skrip belum dimuat. Pastikan tag <script> untuk widget.js muncul sebelum pemanggilan mount Anda, atau bungkus pemanggilan mount dalam listener DOMContentLoaded.

Kesalahan domain tidak diizinkan

Tambahkan domain Anda ke daftar domain yang diizinkan di pengaturan Developer pada app.thunderphone.com. Ingat bahwa localhost selalu diizinkan.

Langkah Selanjutnya

Penataan Gaya

Sesuaikan tampilan widget dengan properti kustom CSS.

Komponen React

Menggunakan React? Integrasi komponen lebih sederhana.