VVB Text Widget

Virtual Voice Bridge (VVB) için geliştirilmiş, herhangi bir web sitesine kolayca entegre edilebilen modern chat widget'ı. Widget, Shadow DOM kullanarak tamamen izole edilmiştir ve mevcut site stillerinden etkilenmez.

Özellikler

• Shadow DOM: Tamamen izole edilmiş stil ve işlevsellik
• WebSocket Bağlantısı: Gerçek zamanlı mesajlaşma
• Responsive Tasarım: Tüm cihazlarda mükemmel görünüm
• Çoklu Durum: Kapalı, yardım ve sohbet durumları
• Modern UI: Profesyonel avatarlar ve smooth animasyonlar
• Kolay Entegrasyon: Tek satır kod ile entegrasyon
• Özelleştirilebilir: flowname ve displayname parametreleri ile
• Oturum Yönetimi: 5 dakikalık oturum timeout özelliği

Kullanım

1. NPM ile Kurulum

npm install vvb-text-widget

2. CDN Üzerinden Kullanım

<script src="https://unpkg.com/vvb-text-widget@latest/vvb-chat-widget.js"></script>

3. Widget'ı Sayfanıza Ekleyin

<!-- flowname ve displayname parametreleri zorunludur -->
<vvb-chat-widget flowname="garanti" displayname="Garanti BBVA"></vvb-chat-widget>
<script src="https://unpkg.com/vvb-text-widget@latest/vvb-chat-widget.js"></script>

Parametre Açıklamaları

• flowname: VVB API'sindeki flow adı (küçük harfler, boşluksuz)
• displayname: Chat arayüzünde gösterilecek şirket/kurum adı

Kullanım Örnekleri

Temel Kullanım:

<vvb-chat-widget flowname="garanti" displayname="Garanti BBVA"></vvb-chat-widget>

Özelleştirilmiş Kullanım:

<vvb-chat-widget 
    flowname="akbank" 
    displayname="Akbank"
    help-text="Merhaba, size nasıl yardımcı olabilirim?"
    call-button-text="Sohbete Başla"
    chat-subtitle="Akbank Asistanı"
    primary-color="#e30a17"
    text-color="#1a1a1a"
    bg-color="#ffffff"
    button-radius="8px"
></vvb-chat-widget>

Özelleştirme Parametreleri

Zorunlu Parametreler:

• flowname - VVB API'sindeki flow adı
• displayname - Chat başlığında gösterilecek isim

Opsiyonel Parametreler:

Metin Özelleştirmeleri:

• help-text - Yardım popup'ındaki metin (varsayılan: "Size nasıl yardımcı olabilirim?")
• call-button-text - Başlat butonundaki metin (varsayılan: "Görüşme Başlat")
• chat-subtitle - Chat başlığının alt metni (varsayılan: "AI Asistan ile Sohbet")

Stil Özelleştirmeleri:

• primary-color - Ana renk (butonlar, avatarlar) (varsayılan: "rgb(85, 87, 199)")
• text-color - Metin rengi (varsayılan: "#111827")
• bg-color - Arka plan rengi (varsayılan: "white")
• button-radius - Buton köşe yuvarlaklığı (varsayılan: "16px")

Widget Durumları

1. Kapalı Durum: Sağ alt köşede floating buton
2. Yardım Durumu: "Size nasıl yardımcı olabilirim?" popup'ı
3. Sohbet Durumu: Tam sohbet arayüzü

Teknik Detaylar

• Web Components teknolojisi kullanılmıştır
• Shadow DOM ile stil izolasyonu sağlanmıştır
• WebSocket ile gerçek zamanlı iletişim
• CSS Animations ile smooth geçişler
• Event Handling ile interaktif deneyim
• Responsive Design ile mobil uyumluluk
• Session Management ile akıllı oturum yönetimi

Tarayıcı Desteği

• Chrome 54+
• Firefox 63+
• Safari 10.1+
• Edge 79+

Lisans

MIT License - detaylar için LICENSE dosyasına bakınız.

Destek

Sorularınız için: [email protected]

Katkıda Bulunma

Bitbucket repository: https://bitbucket.org/solidict/vvb-text-widget