Gömülebilir Sesli Widget
Birkaç satır kodla herhangi bir web sitesine sesli AI ajanı ekleyin
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.
Ö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.
Hızlı Başlangıç
Paketi yükleyin:
npm install @thunderphone/widgetWidget'ı 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:
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.
Kullanıcı arayüzü üzerinde tam kontrol. Siz kendi arayüzünüzü oluştururken useThunderPhone hook'u sesli oturumu yönetir.
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.