Skip to main content
Web bileşeni, sitenizi ziyaret edenlere tarayıcının mikrofonunu kullanarak yapay zeka ajanıyla tıkla ve konuş görüşmesi sunar. Kendi SDK referansı olan ayrı bir JavaScript / React SDK’sıdır — bu kılavuz, bileşenin ihtiyaç duyduğu ThunderPhone tarafındaki kuruluma odaklanır.
Bunların tümünü cURL olmadan yapabilirsiniz: Web Bileşenleri pano sayfası (/dashboard/web-widgets) bileşeni oluşturur, modunu ve ajanını ayarlar, izin verilen alan adlarını yönetir ve size yerleştirme kod parçacığını verir.

​
Ön koşullar

1

Bir ajan oluşturun

İstemi ve sesi bileşen oturumunu çalıştıracak ajan. Varsayılan olan widget_enabled: true ayarını yapın.
2

Yönlendirme moduna karar verin

  • mode="agent" — anahtar başına bir statik ajan. En basit seçenektir.
  • mode="webhook" — sunucunuz, her ziyaretçi için ajanı bir web.incoming webhook’u aracılığıyla seçer. Bunu oturum açmış kullanıcılar, A/B testleri veya sayfa başına yönlendirme için kullanın.
3

İzin verilen alan adlarını listeleyin

Yayınlanabilir anahtarlar kaynak kilitlidir. Bileşeni yerleştirecek her ana makine adını belirtmelisiniz. Yerel geliştirme sırasında localhost / 127.0.0.1 her zaman izinlidir.

​
Yayınlanabilir anahtar oluşturun

Yanıt, pk_live_... ile başlayan bir key içerir. Yayınlanabilir anahtarlar tasarım gereği herkese açıktır — ön uç paketinizle güvenle yayımlayabilirsiniz. Tüm alanlar için Yayınlanabilir anahtarlar referansına bakın.
allowed_domains en az bir girdi içermelidir. *.example.com, alt alan adlarıyla (ör. api.example.com) eşleşir ancak yalın alan adıyla eşleşmez. * veya *.* gibi yalın joker karakterler reddedilir.

​
Bileşeni sitenize ekleyin

Üç entegrasyon seçeneği bileşen SDK belgelerinde açıklanmıştır:

React bileşeni

<ThunderPhoneWidget publishableKey="pk_live_..." />.

Headless kancası

Özel arayüzler için useThunderPhone().

CDN betik etiketi

Paketleyici kullanmayan siteler için ThunderPhone.mount({...}).
Üçü de aynı publishableKey değerini kabul eder ve mikrofon düğmesini ve görüşme içi ses öğesini işler. Bileşen context değeri 12.000 karakterde kesilir (tipik İngilizce metinde yaklaşık 3.400 token) ve istem boyutu ek ücretine dahil edilir.

​
Bileşen modu webhook’ları

mode="webhook" olduğunda ThunderPhone, her oturum başlangıcında web.incoming yüküyle webhook_url adresinizi çağırır. Bu ziyaretçi için çalıştırmak istediğiniz ajan yapılandırmasını döndürün — telefon görüşmeleriyle aynı yanıt şemasını izler:
Kendi oturumunuzdaki bağlamı (hangi müşterinin gezindiği, hangi sayfada olduğu) isteme ekleyebilir ve her yayına alma için ajanları değiştirebilirsiniz.

​
Oturumları izleyin

Widget oturumları, telefon aramalarıyla aynı transkript, kayıt, değerlendirme ve faturalandırma bilgileriyle GET /v1/calls içinde direction="widget" olarak görünür. Yalnızca widget’a özel bir pano oluşturmak için direction ile filtreleyin.

​
Sonraki adımlar

Widget SDK referansı

React / hook / CDN entegrasyonu ayrıntıları.

Arama başına dinamik yapılandırma

mode="webhook" akışını uçtan uca uygulayın.

Yayınlanabilir anahtarlar referansı

Anahtar kaynağındaki tüm alanlar.

Mikrofon oturumları API'si

Widget’ı atlayın; özel kullanıcı arayüzleri için LiveKit’i doğrudan kullanın.