Web Sitesi Widget'ları
AI sesli ajanınızı herhangi bir web sitesine gömün, böylece ziyaretçiler doğrudan tarayıcıdan sesli konuşma başlatabilir. Widgets sekmesi gömme kodları, özelleştirme seçenekleri ve alan güvenlik ayarları sağlar.
Geri Arama Widget'ı bu sayfadaki widget'lardan çok farklı çalışır — tarayıcı sesli çağrı başlatmak yerine, ziyaretçinin telefon numarasını toplar ve ajanınızın onu geri aramasını sağlar. Özel Geri Arama Widget'ı sayfasına bakın.
Widget Türleri
Hanc.AI, telefon geri aramaları için ayrı bir Geri Arama Widget'ı ile birlikte dört tarayıcı içi widget türü sunar:
| Widget | Etiket Adı | Açıklama | En İyi Kullanım |
|---|---|---|---|
| Floating Widget | hanc-ai-floating-call | Sayfanızın üzerinde yüzen orb düğmesi | Her zaman görünür çağrı-eylem |
| Pill Widget | hanc-ai-pill-call | İçeriğinizde satır içi yerleştirilen kompakt pill şeklinde düğme | Mevcut bir düzen içinde minimal ayak izi |
| Pill Floating Widget | hanc-ai-pill-float-call | Pill ile aynı kompakt pill şekli, ancak Floating widget gibi sayfayla birlikte yüzer | Ziyaretçi kaydırırken takip eden bir pill estetiği istediğinizde |
| Inline Widget | hanc-ai-inline-call | Sayfa içeriğine gömülmüş tam boyutlu çağrı düğmesi | Özel "Bizimle Konuşun" bölümleri |
| Callback Widget | hanc-ai-callback | Telefon numarası formu; ajan ziyaretçiyi geri arar | Lead-gen sayfaları, yüksek niyetli açılış sayfaları — bkz. Geri Arama Widget'ı |
Ortak Öznitelikler
Tüm widget türleri bu temel öznitelikleri destekler:
| Öznitelik | Gerekli | Açıklama | Varsayılan |
|---|---|---|---|
agent-id | Evet | Ajanınızın benzersiz tanımlayıcısı | — |
voice-service-url | Hayır | Ses servis URL'sini geçersiz kıl | Otomatik algılanır |
api-base-url | Hayır | API temel URL'sini geçersiz kıl | Otomatik algılanır |
Görüntüleme Öznitelikleri
| Öznitelik | Açıklama | Değerler | Varsayılan |
|---|---|---|---|
position | Sayfadaki widget konumu | bottom-right, bottom-left, top-right, top-left, static | bottom-right |
size | Piksel cinsinden widget boyutu | Sayı | 120 |
theme | Renk teması adı | Bkz. Renk Temaları | default |
Düğme Metni Öznitelikleri
| Öznitelik | Açıklama | Varsayılan |
|---|---|---|
button-start-text | Boşta düğmede gösterilen metin | "Call" |
button-connecting-text | Bağlanırken gösterilen metin | "Connecting..." |
button-end-text | Aktif çağrı sırasında gösterilen metin | — |
Şart Öznitelikleri
| Öznitelik | Açıklama | Varsayılan |
|---|---|---|
terms-enabled | Çağrıdan önce onay iletişim kutusunu etkinleştir | false |
terms-content | Markdown formatlı onay metni | "" |
terms-url | Şartlar ve Koşullar sayfanıza bağlantı | "https://hanc.ai/terms" |
privacy-url | Gizlilik Politikası sayfanıza bağlantı | "https://hanc.ai/privacy" |
HTML öğesinde ayarlanan şart öznitelikleri, skip-fetch true olarak ayarlanmadıkça API'den alınan ajanın widget ayarlarıyla geçersiz kılınır.
Ses Öznitelikleri
| Öznitelik | Açıklama | Varsayılan |
|---|---|---|
sound-enabled | Çağrı başlangıç/bitiş seslerini etkinleştir | true |
sound-volume | Ses efekti seviyesi | 0.25 |
sound-preset | Ses ön ayar tanımlayıcısı | "1" |
Renk Temaları
Widget görünümünü 11 yerleşik renk temasıyla özelleştirin:
| Tema | Değer |
|---|---|
| Default | default |
| Purple | purple |
| Blue | blue |
| Cyan | cyan |
| Emerald | emerald |
| Amber | amber |
| Tangerine | tangerine |
| Rose | rose |
| Ember | ember |
| Black | black |
| White | white |
Her temanın hem koyu hem de açık varyantları vardır. Temayı gömme kodundaki theme özniteliği ile ayarlayın veya ajanın widget ayarlarında yapılandırın.
Gömme Örnekleri
Floating Widget
<hanc-ai-floating-call agent-id="YOUR_AGENT_ID"></hanc-ai-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Tema ve Konum ile Floating Widget
<hanc-ai-floating-call
agent-id="YOUR_AGENT_ID"
theme="emerald"
position="bottom-left"
size="140"
></hanc-ai-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Pill Widget
<hanc-ai-pill-call agent-id="YOUR_AGENT_ID"></hanc-ai-pill-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Inline Widget
<hanc-ai-inline-call agent-id="YOUR_AGENT_ID"></hanc-ai-inline-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Yukarıdaki betik URL'si her zaman yayınlanan en son widget'ı yükler — siteniz iyileştirmeleri otomatik olarak alır. Bilinen iyi bir sürüme kilitlemeniz gerekirse, https://unpkg.com/hanc-webrtc-widgets@1.4.0 ile açıkça sabitleyin (istediğiniz sürümü yerine koyun). Sürüm belirtilmediğinde @latest etiketi varsayılandır.
Widget Olayları
Widget'lar, JavaScript'te dinleyebileceğiniz olaylar yayınlar:
| Olay | Açıklama |
|---|---|
status-changed | Çağrı durumu değiştiğinde tetiklenir |
connecting | Çağrı kuruluyor |
connected | Çağrı aktif |
idle | Aktif çağrı yok |
error | Bir hata oluştu |
audio-track | Uzak ses parçası alındı (görselleştirme için) |
local-audio-track | Yerel mikrofon ses parçası (görselleştirme için) |
microphone-enabled | Mikrofon etkinleştirildi |
microphone-disabled | Mikrofon devre dışı bırakıldı |
call-start | Bir çağrı başarıyla başladığında tetiklenir |
call-end | Çağrı bittiğinde tetiklenir |
Örnek: Olayları Dinleme
const widget = document.querySelector('hanc-ai-floating-call');
widget.addEventListener('call-start', () => {
console.log('Call started');
});
widget.addEventListener('call-end', () => {
console.log('Call ended');
});
Teknik Gereksinimler
Widget'lar, ziyaretçinin tarayıcısının şunları desteklemesini gerektirir:
- WebGL 2.0 — oluşturma için
- Web Audio API — ses işleme için
- WebRTC — gerçek zamanlı sesli iletişim için
Tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) bu teknolojileri destekler.
Alan Kısıtlamaları
Hangi web sitelerinin ajan widget'ınızı gömebileceğini kontrol edin.
Her Zaman İzin Verilen Alanlar
Aşağıdaki alanlara yapılandırmadan bağımsız olarak her zaman izin verilir:
hanc.ai(ve alt alanlar)hanc.me(ve alt alanlar)localhost
Tüm Alanlara İzin Ver
Varsayılan olarak, widget'ınız herhangi bir web sitesine gömülebilir. Bunu kısıtlamak için widget ayarlarında "Tüm alanlara izin ver" geçişini değiştirin.
Belirli Alanlara Kısıtla
Kısıtlandığında, izin verilmesi gereken her alanı ekleyin:
- Alan adlarını
https://olmadan girin (örn.example.com) - Alt alanlar ayrı girişler gerektirir (örn.
www.example.com,shop.example.com) - Portlar belirtilebilir (örn.
localhost:3000) - En fazla 50 alan beyaz listeye eklenebilir
Üretim ajanları için, yetkisiz gömmeyi önlemek için widget'ları kendi alanlarınızla kısıtlayın.
Şartlar ve Koşullar
Arayanlar bir konuşma başlatabilmeden önce bir onay iletişim kutusunu etkinleştirin.
Yapılandırma
| Ayar | Açıklama |
|---|---|
| Şartları Etkinleştir | Şartlar iletişim kutusunu aç/kapat |
| Şart İçeriği | Kullanıcılara gösterilen Markdown formatlı onay metni (maks 5.000 karakter) |
| Şart URL'si | Tam Şartlar ve Koşullar sayfanıza bağlantı |
| Gizlilik URL'si | Gizlilik Politikası sayfanıza bağlantı |
Etkinleştirildiğinde:
- Kullanıcılar bir çağrı başlatmadan önce bir onay iletişim kutusu görür
- Devam etmek için "Kabul Et" düğmesine tıklamaları gerekir
- Onay tarayıcıda yerel olarak saklanır
- Onayı Sıfırla düğmesi, test için saklanan onayı temizler
İçerik Biçimlendirme
Şart içeriği Markdown biçimlendirmesini destekler:
- Başlıklar için
####kullanın - Vurgu için
**bold**kullanın - Okunabilirlik için satır sonları kullanın
İlgili
- Geri Arama Widget'ı — Tarayıcıda konuşmayı tercih etmeyen ziyaretçiler için telefon geri aramaları
- Sesli Ajanlara Genel Bakış
- Ayarlar — Widget yapılandırması dahil ajan ayarları
- Entegrasyonlar — API anahtarları ve telefon numarası kurulumu