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:

1. Web bileşeni oluşturun

   Kontrol panelinde Web Bileşenleri bölümüne gidin ve bir bileşen oluşturun. Kullanıma sunmak istediğiniz yapay zeka ajanını seçin. Her bileşenin kendine ait bir yayınlanabilir anahtarı (pk_live_...) vardır; bu anahtarı istemci tarafı koduna eklemek güvenlidir ve yapay zeka ajanı anahtardan belirlenir.

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

   Aynı bileşende, bileşenin gömüleceği alan adlarını ekleyin. Joker karakterler desteklenir (ör. *.example.com). Bu liste, birisi anahtarınızı başka bir siteye kopyaladığında bileşenin çalışmasını engeller; tarayıcı dışındaki bir betik herhangi bir Origin üst bilgisi gönderebildiğinden kimlik doğrulama sağlamaz. localhost üretimde otomatik olarak izinli değildir: üretim API'sine karşı yerel olarak test etmek için listeye ekleyin.

3. Tarayıcı geçersiz kılmalarını seçin

   Sayfanız language, voice veya context ayarlıyorsa, her birini Tarayıcı geçersiz kılmaları altında etkinleştirin. Yeni bileşenler hiçbirini kabul etmez ve kapalı bir ayarı içeren oturum isteği 400 override_not_allowed hatasıyla başarısız olur. Bkz. Tarayıcı geçersiz kılmaları.

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:

<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 -- bir çağrı başladığında tümü oturum isteğine iletilir. Her biri yalnızca widget'ın yayınlanabilir anahtarı Tarayıcı geçersiz kılmaları altında buna izin veriyorsa çalışır; aksi takdirde oturum isteği 400 override_not_allowed ile başarısız olur:

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.

Her widget görüşmesi bir çağrıdır. Kuruluşunuzun eşzamanlı çağrı sınırına (varsayılan olarak devam eden 20 çağrı; telefon ve diğer çağrılarla paylaşılır) ve 25 etkin oturumluk widget sınırına (veya daha yüksekse eşzamanlı çağrı sınırınıza) dahil edilir. Herhangi bir sınıra ulaşıldığında, bir çağrı sona erene kadar yeni bir görüşme başlatılamaz.

Entegrasyon Seçenekleri#

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

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.