Widget'ınızın görünümünü, davranışını ve işlevselliğini yapılandırma sistemi aracılığıyla özelleştirin.
Tüm widget ayarları, kontrol panelinizdeki widget yapılandırması aracılığıyla yönetilir. Yapılandırma, görünüm ayarlarını, davranış seçeneklerini ve içerik özelleştirmelerini içerir.
Yapılandırmayı widget'ınızın DNA'sı olarak düşünün — bu, renkler ve yazı tiplerinden konuşma akışları ve başlangıç mesajlarına kadar her şeyi tanımlar. En iyi kısım? Yapılandırmanızdaki değişiklikler, web sitenizde herhangi bir kod değişikliği gerektirmeden hemen etkili olur.
🎨 Canlı Özelleştirme
Değişikliklerinizi gerçek zamanlı olarak görmek için kontrol panelindeki görsel yapılandırma editörünü kullanın. Renklerin nasıl görüneceğini veya düğmelerin nasıl davranacağını tahmin etmeye gerek yok — yayınlamadan önce her şeyi önizleyin.
Görsel görünüm, widget'ın web sitenizin doğal bir parçası gibi hissettirmesi için kritik öneme sahiptir. Görünüm ayarlarımız, her görsel yön üzerinde tam kontrol sağlar.
Marka kimliğinize uyan renkleri seçin. Tüm renk değerleri hex formatında olmalıdır (örneğin, #FF5733).
Pro ipucu: Metinlerinizin seçtiğiniz arka planlarla okunabilir kalmasını sağlamak için bir renk kontrast kontrol aracı kullanın. Bu, erişilebilirlik uyumu için özellikle önemlidir.
Görünüm altında, ayrı bir Açık ve Koyu renk paleti ayarlayabilirsiniz — her modun kendi ön ayarları ve renkleri vardır. Bir ziyaretçinin gördüğü hangi mod, gömme işlemi sırasında data-theme="light|dark|system" ile seçilir (sistem, ziyaretçinin cihazını takip eder) veya çalışma zamanında CompaninWidget.setTheme() ile ayarlanır. Koyu paleti boş bırakın, böylece Açık renklerinizden otomatik olarak türetilir.
Widget'ınızı kullanım durumunuza ve hedef kitlenize uygun şekilde boyutlandırın. Daha büyük boyutlar daha fazla konuşma bağlamı sağlar, daha küçük boyutlar ise daha az müdahaleci hisseder.
Mobil dikkate alma: Widget, mobil cihazlarda otomatik olarak ölçeklenir, ancak tüm kullanıcılar için iyi bir deneyim sağlamak için yapılandırmanızı çeşitli ekran boyutlarında test edin.
Davranışsal ayarlar, widget'ın kullanıcılarla nasıl etkileşimde bulunduğunu ve farklı bağlamlara nasıl yanıt verdiğini kontrol eder.
⚠️ Tavsiye
Çoğu site, müdahaleci olmaktan kaçınmak için widget'ı daraltılmış olarak başlatmalıdır (<code>start_open: false</code>). Yardıma ihtiyacı olan kullanıcılar doğal olarak düğmeye tıklayacaktır. Özel yardım/destek sayfaları için açık başlatmak faydalı olabilir.
Karşılama mesajı, kullanıcıların widget'ı açtıklarında gördükleri ilk şeydir. Bunu samimi, net ve eyleme geçirilebilir hale getirin. Kullanıcıları yaygın görevlere yönlendirmek için etkileşimli düğmeler ekleyebilirsiniz.
İyi bir karşılama mesajı şunları yapmalıdır:
Örnek: "Merhaba! 👋 Ürünlerimiz, fiyatlandırmamız veya hesabınızla ilgili sorularınız için buradayım. Bugün size nasıl yardımcı olabilirim?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Konuşma akışları, kullanıcıları yaygın senaryolar aracılığıyla yönlendiren önceden tanımlanmış yollardır. SSS'ler, sorun giderme veya iade veya rezervasyon gibi çok adımlı süreçler için mükemmeldir.
Akışlar belirli anahtar kelimeler veya düğme tıklamalarıyla tetiklenir. Tetiklendiğinde, isteğe bağlı eylem düğmeleriyle bir dizi yanıt gösterir ve AI işleme gerektirmeden rehberli bir konuşma deneyimi oluşturur.
Akışlar için en iyi uygulamalar:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Birden fazla dil için metni yapılandırın:
Gelişmiş stil için özel CSS ekleyin:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Geliştirilmiş işlevsellik için harici API uç noktalarını yapılandırın: