Sohbet widget'ını web sitenize ekleme

Sohbet widget'ı, web sitenizdeki ziyaretçilerin çalışma alanınızla bir konuşma başlatmasını sağlar — AI asistanınız, ajanlarınız veya her ikisi tarafından yanıtlanır.

Widget'ı açın

1. Yönetim panelinde Ayarlar → Widget'ı açın.
2. Widget'ı etkinleştir anahtarını açın.
3. (İsteğe bağlı) Başlık adını, bir karşılama mesajını, vurgu rengini ve varsayılan dili ayarlayın.
4. Kaydedin.

Widget varsayılan olarak kapalıdır, bu nedenle siz etkinleştirene kadar sitenizde hiçbir şey görünmez.

Kurulum kod parçanızı kopyalayın

Ayarlar → Widget → Kurulum sayfasında, widget anahtarınızı ve yapıştırmaya hazır bir kod parçası bulursunuz, örneğin:

<script async
  src="https://app.example.com/widget.js"
  data-widget-key="WIDGET_ANAHTARINIZ"
></script>

Kod parçasını panelde gösterildiği gibi birebir kopyalayın — çalışma alanınızın widget anahtarını zaten içerir. Google Tag Manager kullanıyorsanız bunun yerine Google Tag Manager biçimini seçin (aşağıya bakın).

Widget anahtarı, genel bir tanımlayıcıdır (bir site kimliği gibi) — onu sayfanıza koymak güvenlidir. Yalnızca widget'a hangi çalışma alanıyla konuşacağını söyler; tek başına verinize erişim sağlamaz.

Sitenize yapıştırın

Kod parçasını, widget'ın görünmesini istediğiniz her sayfanın kapanış </body> etiketinden hemen önce ekleyin. HTML / bir script etiketi eklemenize izin veren herhangi bir sitede veya platformda çalışır (CMS'iniz, açılış sayfası oluşturucunuz vb.).

Widget, izole bir Shadow DOM içinde render edilir; bu yüzden sitenizin CSS'i onu asla bozamaz ve widget'ın stilleri de sayfanıza sızmaz.

Hepsi bu — sohbet balonu görünecek ve yeni konuşmalar gerçek zamanlı olarak gelen kutunuza düşecektir.

Google Tag Manager ile kurulum

Google Tag Manager, içine yapıştırdığınız script etiketlerini yeniden oluşturur ve tüm data-* özniteliklerini siler — data-widget-key dahil. Standart kod parçasıyla widget'ın anahtarı kaybolur ve widget hiçbir uyarı vermeden hiç görünmez. Anahtarı ve seçenekleri script adresinin içinde taşıyan Tag Manager biçimini kullanın:

<script async src="https://app.example.com/widget.js?key=WIDGET_ANAHTARINIZ"></script>

1. Ayarlar → Widget → Kurulum sayfasında kod biçimini Google Tag Manager olarak değiştirin ve Kopyala'ya tıklayın. Siteye özel dil, başlık veya karşılama metni belirlediyseniz adrese eklenir.
2. Google Tag Manager'da container'ınızı açın ve Etiketler → Yeni (Tags → New) adımına gidin.
3. Etiket türü olarak Özel HTML (Custom HTML) seçin ve kodu yapıştırın.
4. Tetikleme (Triggering) bölümünde Tüm Sayfalar (All Pages) seçin ve etiketi kaydedin.
5. Gönder (Submit) ve ardından Yayınla (Publish) ile container'ı yayınlayın. Container yayınlanana kadar widget sitenizde görünmez — etiketi yalnızca kaydetmek yetmez.

Widget hâlâ görünmüyorsa sitenizi Tag Manager'ın Önizleme (Preview) moduyla açıp etiketin tetiklendiğini doğrulayın, ardından sayfa kaynağında widget.js?key= içeren bir script arayın.

Ziyaretçiler ne yapabilir, ne yapamaz

• Ziyaretçiler anonim olarak sohbet eder — hesap veya giriş gerekmez. Sohbet öncesi formda isteğe bağlı olarak bir ad ve e-posta paylaşabilirler.
• Her ziyaretçi yalnızca kendi konuşmasını görür. Diğer ziyaretçilerin sohbetlerini, ajanlarınızın kimliklerini veya başka bir çalışma alanından hiçbir şeyi asla göremezler.
• Widget, sahip olduğunuz herhangi bir siteye gömülür ve her ziyaretçinin oturumunu özel, kurcalamaya dayanıklı bir oturum token'ıyla güvende tutar.

Widget'ta zengin mesajlaşma

Ziyaretçiler düz metinden fazlasını gönderebilir. Widget yazma alanı, ajan gelen kutunuzdaki zengin denetimlerin aynısını taşır; yalnızca kompakt boyutuna uyarlanmıştır. Mesaj kutusu sohbet penceresinin tüm genişliğini kaplar, sonunda yuvarlak bir gönder düğmesi vardır; ziyaretçi yazdıkça büyür (yaklaşık beş satıra kadar, sonra kayar). Enter gönderir, Shift+Enter yeni satır açar. Eylem düğmeleri kutunun hemen üstündeki ince bir sırada durur:

• Emoji — gülen yüz düğmesi, kategori sekmeli, aranabilir ve hafif bir emoji seçici açar. Seçilen emoji imlecin bulunduğu yere eklenir.
• Dosyalar ve görseller — ataç düğmesi bir veya daha fazla dosya ekler. Görseller gönderilmeden önce satır içi önizleme gösterir; diğer dosyalar kaldırabileceğiniz bir etiket olarak görünür. (Widget, ajan gelen kutusundan daha sıkı boyut ve adet sınırları kullanır.)
• Sesli mesajlar — mikrofon düğmesi, yazma alanından doğrudan sesli not kaydeder; geçen süre sayacı ve tut / sil denetimleriyle. (Mikrofon erişimini engelleyen tarayıcılar düğmeyi gizler.)

Gelen ekler her iki yönde de satır içinde gösterilir: bir görsel resim olarak, bir ses veya sesli mesaj ses oynatıcı, bir video video oynatıcı, diğer her dosya ise indirme bağlantısı olarak — böylece ziyaretçinin fotoğrafı da ajanın dosyalı yanıtı da sohbette canlı görünür.

Yüklenen her dosya gizli biçimde saklanır, yalnızca kısa ömürlü imzalı bağlantılarla sunulur ve ziyaretçinin kendi konuşmasıyla sınırlıdır.

Widget başlığında ne yazar

Widget başlığının altındaki satır ziyaretçiye kimin yanıt verdiğini söyler:

• Bir ekip arkadaşı sohbeti devraldıysa o kişinin adı.
• AI asistanınızın adı (Ayarlar → Widget) — yalnızca AI widget sohbetlerini gerçekten yanıtlarken: AI planınızda var, Ayarlar → AI altında çalışan bir anahtarla açık ve widget'ın kendi AI anahtarı açık. Bunlardan biri kapalıysa widget hiçbir zaman "AI Asistan" demez.
• Ayarladıysanız başlık mesajınız.
• AI yoksa ekibinizin durumu — en az bir ajan müsaitken Çevrimiçiyiz, değilse En kısa sürede size dönüyoruz.

Mesaj kutusunun üstündeki Bir temsilciye bağlan düğmesi de aynı kurala uyar: yalnızca AI yanıt verirken görünür. AI yoksa ziyaretçi zaten ekibinizle konuşuyordur; devredilecek bir şey yoktur.

Mağaza düğmesi

Widget üzerinden satış yapıyorsanız yazma alanındaki alışveriş çantası düğmesi küçük bir tezgâh açar: ne sattığınız, sepet, Sipariş ver ve Siparişlerim.

Sohbette satış yapmak sizin kararınızdır ve varsayılan olarak kapalıdır. Ayarlar → Widget → Genel altında Mağazayı widget'ta göster anahtarını açın. Katalogda fiyatlı ürünlerinizin olması — örneğin CRM'inizden aktarılan ürünler — tek başına mağaza açmaz. Anahtar yalnızca Katalog ve Satış özellikleri planınızda varsa görünür.

Düğme (ve onunla birlikte Siparişlerim) yalnızca şu üçü birden doğruysa görünür:

• Mağazayı widget'ta göster açık,
• Katalog ve Satış özellikleri planınızda var, ve
• en az bir katalog ürünü aktif, fiyatı ve para birimi girilmiş ve widget'tan gizlenmemiş (Katalog sayfasındaki kalemin Görünürlük anahtarları).

Hizmetler ve paketler, fiyatları olsa bile widget mağazasında satılmaz: sepete atılmaz, randevuyla alınır.

Sipariş edilebilir bir şey yoksa widget hiç mağaza göstermez — ziyaretçi boş bir "Şu an satışta bir şey yok" paneliyle karşılaşmaz.

Anahtarı kapatmak mağazayı widget'tan hemen kaldırır. Hiçbir şey silinmez: daha önce verilmiş siparişler korunur.

Widget'ta AI araçları

Bir AI aracı profili — örneğin bir Görsel Stüdyosu portresi — mesaj kutusunun üstündeki sırada kendi düğmesine sahip olabilir: ziyaretçiler onay metninizi okuyup kabul eder, telefonlarının kamerasıyla fotoğraf çeker ya da bir fotoğraf seçer, bir stil seçer ve sonucu indirir. Varsayılan olarak kapalıdır, profil profil: Ayarlar → AI → AI araçları'nda profilin içinde Web widget'ında göster'i açın (bkz. AI araçları). Sitelerinizin bir kısmıyla sınırlayabilirsiniz.

Tek profil varsa düğme o profilin simgesini ve etiketini gösterir; birden çoksa pırıltı simgeli bir düğme liste açar. Ziyaretçi onaylamadan hiçbir şey yüklenmez. Varsayılan olarak sohbete hiçbir şey yazılmaz; sonucun ziyaretçinin konuşmasında da görünmesini (ekibiniz gelen kutusunda görür) istiyorsanız profilde Sonucu ziyaretçinin sohbetine de ekle'yi açın.

Görünümü

Ayarlar → Widget → Görünüm → Görünümü değiştir görünüm stüdyosunu açar: hazır şablonlar ya da sizinkiler — başlatıcı, pencere, başlık, balonlar, renkler, açık ve koyu. Bir site kendi şablonunu giyebilir. Gizli başlatıcıda sohbeti sayfanızdan window.cwz.chat.open() ya da data-cwz-chat-open düğmesiyle açın.

İpuçları

• Beklentileri belirlemek için karşılama mesajını özelleştirin (örn. "Bana her şeyi sorun — genellikle birkaç dakika içinde yanıt veririm").
• Vurgu rengini markanıza uydurun.
• Widget'ı AI ile eşleştirin (Ayarlar → AI) ki ziyaretçiler çevrimiçi bir ajan olmadığında bile anında yanıt alsın.