Gömülebilir Sesli Widget

ThunderPhone yerleştirilebilir ses widget’ı, web sitenizin ziyaretçilerinin tarayıcıdan doğrudan bir yapay zeka ajanıyla konuşmasını sağlar. Telefon görüşmesi gerekmez — kullanıcılar bir düğmeye tıklar ve ThunderPhone destekli gerçek zamanlı sesli görüşme başlatır. Widget, özelleştirilebilir vurgu renkleri ve konumlandırmayla açık ve koyu temalara uyum sağlayan cam efektli bir çubuk olarak görüntülenir. @thunderphone/widget npm paketi olarak dağıtılır ve paketleyici kullanılmayan ortamlar için CDN üzerinden de kullanılabilir.

Çeşitli vurgu renkleriyle açık ve koyu temalarda ThunderPhone widget'ı

Ön Koşullar

Widget’ı yerleştirmeden önce ThunderPhone Dashboard içinde şu üç adımı tamamlayın:

Yayınlanabilir API anahtarı oluşturun

Pano ayarlarında Geliştiriciler bölümüne gidin ve yayınlanabilir bir anahtar oluşturun. Yayınlanabilir anahtarlar pk_live_ ile başlar ve istemci tarafı kodunda kullanılmaları güvenlidir.

İzin verilen alan adlarını yapılandırın

Aynı Geliştiriciler ayarlarında, widget’ın yerleştirileceği alan adlarını ekleyin. localhost, geliştirme için her zaman izinlidir. Joker karakterler desteklenir (ör. *.example.com).

Web widget'ı oluşturun

Panoda Web Widget’ları bölümüne gidin ve bir widget oluşturun. Kullanıma sunmak istediğiniz ajanı ve kullanılacak yayınlanabilir anahtarı seçin. Ajan, yayınlanabilir anahtar yapılandırmanızdan otomatik olarak belirlenir.

Yayınlanabilir anahtarlar (pk_live_...), gizli API belirteçlerinizle aynı değildir. Yayınlanabilir anahtarlar istemci tarafında kullanım için tasarlanmıştır ve izin verilen alan adlarınızdaki widget oturumlarıyla sınırlıdır. Gizli API belirtecinizi asla istemci tarafı kodunda kullanmayın.

Hızlı Başlangıç

Paketi yükleyin:

npm install @thunderphone/widget

Widget’ı uygulamanıza ekleyin:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

Hepsi bu kadar. Kullanıcılarınız, tek tıklamayla onları yapay zeka ajanınıza bağlayan cam efektli bir arama çubuğu görecektir.

Özelleştirme

Widget’ın görünüm için dört prop’u vardır:

Prop	Varsayılan	Açıklama
`theme`	`'light'`	Beyaz cam için `'light'`, koyu cam için `'dark'`
`primaryColor`	`'#000000'` (açık) / `'#ffffff'` (koyu)	Başlat düğmesi, dalga formu ve bağlanma göstergesi için vurgu rengi
`title`	`'Voice assistant'`	Widget’ta görüntülenen metin
`position`	`'bottom-right'`	Görüntü alanı köşesi: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Üç ek prop, görünüm yerine oturumu özelleştirir — üçü de arama başladığında oturum isteğine iletilir:

Prop	Açıklama
`language`	Oturum başına dil geçersiz kılma — `en`, `es` veya `fr-FR` gibi bir kod ya da yerel ayar
`voice`	Oturum başına ses geçersiz kılma — `maria` gibi bir ses adı
`context`	Ajana iletilen olgusal sayfa veya site bağlamı (sunucu tarafında 12.000 karaktere kısaltılır)

Prop tablosunun tamamı için React bileşeni referansına bakın. Tamamen özel bir kullanıcı arayüzü için, kendi arayüzünüzü oluştururken sesli oturumu yönetmek üzere headless hook’u kullanın. Hook, sese tepki veren görselleştirmeler oluşturmak için gerçek zamanlı ses seviyelerini sunar.

Entegrasyon Seçenekleri

Teknoloji yığınınıza uygun entegrasyon yöntemini seçin:

React Bileşeni

Yerleşik arama kontrolleri ve durum göstergesi içeren hazır kullanıcı arayüzü bileşeni. İçe aktarın, prop’ları iletin, işlem tamam.

Headless Hook

Kullanıcı arayüzü üzerinde tam kontrol. Siz kendi arayüzünüzü oluştururken useThunderPhone hook’u sesli oturumu yönetir.

CDN / Script Etiketi

Bundler gerekmez. Statik siteler, WordPress ve React dışındaki diğer ortamlar için widget’ı bir script etiketiyle yükleyin.

Stil

Widget, theme prop’u ile kontrol edilen yerleşik açık ve koyu temalar ile primaryColor prop’u ile kontrol edilen bir vurgu rengi sunar. Daha kapsamlı özelleştirme için CSS özel özelliklerini ve sınıflarını geçersiz kılabilirsiniz. Ayrıntılar için Stil rehberine bakın.

Yardıma mı ihtiyacınız var? support@thunderphone.com adresinden bizimle iletişime geçin.

​Ön Koşullar

​Hızlı Başlangıç

​Özelleştirme

​Entegrasyon Seçenekleri

React Bileşeni

Headless Hook

CDN / Script Etiketi

​Stil

Ön Koşullar

Hızlı Başlangıç

Özelleştirme

Entegrasyon Seçenekleri

Stil