Renkler, yazı tipi ve tema

Widget marka renginizi, yazı tipinizi ve dilerseniz tamamen size ait bir renk kümesini kullanır. Bunu yaparken her metnin her yüzeyde okunabilir kalması için yeniden hesaplar. Siz renginizi seçersiniz, widget kontrastı ayarlar.

Bu sayfadaki tüm ayarları /app/projects/{id} altında Görünüm sekmesinin Marka bölümünde bulabilirsiniz. Renk teması (açık, koyu, otomatik) bunun dışındadır: Kurulum sekmesinde Temel bilgiler altında bulunur.

Tasarım sihirbazı

Marka bölümünün üst kısmındaki sihirbaz, tasarımı dört adımda yapmanızı sağlar:

1. Görünüş – Açık, Koyu, Profesyonel, Eğlenceli, Sıcak, Serin ve Minimal filtreleriyle 18 hazır şablon. Bunlar arasında örneğin Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit ve Espresso bulunur.
2. Renkler – ana renk ve vurgu, sekiz renk çiftinden hızlı seçim ve yüzey seçimi: varsayılan, açık, koyu veya özel.
3. Şekil – pencere stili, köşe yarıçapı, sohbet düğmesinin şekli ve boyutu.
4. Bitti – bir özet.

Sihirbaz kendisi hiçbir şey kaydetmez. Yalnızca altındaki alanları doldurur; Kaydet düğmesine basana kadar hiçbir şey kaydedilmez. Sihirbazdaki küçük resim bir taslaktır. Değerlerinizle gerçek widget’ı Widget ana ekranı bölümünün önizlemesinde görebilirsiniz.

İnce ayar için Tüm ayarlar tek tek bölümünü genişletin. Yazı tipi ve özel CSS yalnızca orada bulunur.

Alanlar

• Ana renk – #rrggbb biçiminde marka renginiz. Sohbet düğmesini, gönder düğmesini, bağlantıları, odağı ve ziyaretçilerinizin balonlarını (karıştırılarak) renklendirir. Özel değer yoksa: açık temada mor #6D28D9, koyu temada #9B7BFF.
• Vurgu – #rrggbb biçiminde ikinci bir renk; örneğin sayaçlar ve vurgulamalar için. Özel değer yoksa: açıkta #BE185D, koyuda #FF6B8A.
• Köşe yarıçapı (px) – 0 ile 28 arası. 0 kare köşelidir. Varsayılan 12.
• Yazı tipi ailesi (CSS) – Inter, system-ui, sans-serif gibi bir CSS değeri, en fazla 120 karakter. Widget yazı tipi dosyası yüklemez. Bu nedenle sayfanızın zaten yüklediği bir yazı tipini veya sistem yazı tipini kullanın. Boş bırakılırsa cihazın sistem yazı tipleri kullanılır.
• Şablonlar – tek tıklamayla renkler, yüzeyler, yarıçap, sohbet düğmesi ve stil birlikte doldurulur. Kaydet düğmesine basana kadar hiçbir şey kaydedilmez.

Yalnızca altı basamaklı #rrggbb biçimindeki renkler geçerlidir. #f00 veya rgb(…) gibi kısa biçimler yok sayılır ve yerine varsayılan değer uygulanır.

Yüzeyler ve metin

Yüzeyler ve metin altında gerekirse beş ek renk ayarlayabilirsiniz. Her birinde özel renk onay kutusu bulunur:

• Arka plan – pencerenin yüzeyi.
• Balon yüzeyi – ekibinizin ve asistanın balonları.
• Metin – metin rengi.
• İkincil metin – saatler, notlar, ikinci satırlar.
• Çizgiler – ayırıcı çizgiler ve kenarlıklar.

İşaretli değilse widget, web sitesine uyan açık veya koyu renk kümesini kullanır. Alandaki değer bu durumda yalnızca bir başlangıç noktasıdır, kullanılan rengin göstergesi değildir. İşaretliyse sizin renginiz uygulanır.

Yalnızca özel bir arka plan ayarlarsanız widget diğerlerini ondan türetir: balon yüzeyi, metin, ikincil metin ve çizgiler.

Okunabilirlik: widget neleri yeniden hesaplar?

Müşteriler okunabilir bir renk değil, marka renklerini seçer. Bu nedenle widget her metin ve yüzey birleşiminde en az 4,5:1 kontrast oranını kontrol eder. Bu, normal metin için WCAG 2.x eşiğidir.

• Marka renginiz üzerindeki metin (örneğin gönder düğmesinde) otomatik olarak beyaz veya siyaha yakın ayarlanır; hangisi daha okunaklıysa o kullanılır.
• Metin rengi olarak marka renginiz (bağlantılar, vurgular), 4,5:1 oranına ulaşılana kadar küçük adımlarla açılır veya koyulaştırılır. Yüzeyler, yani sohbet düğmesi ve gönder düğmesi, renginizi değiştirmeden korur.
• Ziyaretçilerinizin balonu, marka rengi ve arka planın karışımıdır. Kontrast yeterli değilse widget karışımdaki marka rengini azaltır.
• Özel metin ve ikincil metin renkleriniz, göründükleri her yüzeye karşı aynı kontrolden geçer.

Neyin yeniden hesaplandığı, hesabınızda formun hemen altında Metin okunabilir kalsın diye yeniden hesaplandı satırında gösterilir. Bu nedenle açık sarı bir metin rengi widget’ta girdiğinizden daha koyu görünür; nedenini orada görebilirsiniz.

Sayfanızda ölçülen değerleri kendiniz de sorgulayabilirsiniz:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Açık, koyu veya web sitesi gibi

Kurulum → Temel bilgiler → Widget renk teması altında şunlardan birini seçersiniz:

• web sitesine uysun (aksi halde ziyaretçinin sistemi) – varsayılan. Widget sayfanızın açık mı koyu mu olduğunu kontrol edip uyum sağlar.
• açık – her zaman açık.
• koyu – her zaman koyu.

Otomatik seçimde widget sırasıyla şunlara bakar:

1. ekranın ortasında sayfanızın arka plan rengi,
2. tam olarak dark veya light ise <html> üzerindeki color-scheme CSS değeri,
3. <html> veya <body> üzerindeki dark sınıfı ya da data-theme="dark" gibi yaygın anahtarlar,
4. son olarak ziyaretçinin sistem ayarı.

Sayfanız açık ve koyu görünüm arasında geçiş yaparsa widget da onu izler. Pencere açıldığında da yeniden kontrol eder.

Kodda temayı yerleştirme kodunda veya çalışma sırasında ayarlarsınız. Bu, hesap ayarından önceliklidir:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

setTheme ile widget seçimi ziyaretçinin tarayıcısında hatırlar. setTheme('auto') bunu yeniden kaldırır. Bu, sayfanızdaki kendi açık/koyu anahtarınız için uygundur.

Renkleri kodda ayarlama

Kampanya gibi tek tek sayfalar için markayı yerleştirme kodunda veya çalışma sırasında ayarlayabilirsiniz. Alan adları şöyledir:

• primary, accent – marka rengi ve vurgu,
• bg, surface, text, textDim, line – beş yüzey,
• onPrimary – marka rengi üzerindeki metin rengi (aksi halde otomatik),
• radius – 0 ile 28 arası,
• font – CSS yazı tipi değeri,
• launcher ve stil – Sohbet düğmesi ve Sohbet penceresi sayfalarına bakın.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand, widget’ı yeniden oluşturmadan kontrastı ve türetilen renkleri hemen yeniden hesaplar. null bir değeri kaldırır ve varsayılan uygulanır.

Yerleştirme kodunda öznitelik data-rc-brand olarak adlandırılır ve JSON alır:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Önemli – hangisi öncelikli, kod mu hesap mı? Hesabınızın oluşturduğu yerleştirme kodu zaten marka renginizi, yarıçapı ve sohbet düğmesinin şeklini ve boyutunu içerir. Bu yalnızca başlangıç durumudur; böylece sohbet düğmesi hemen doğru renkte görünür. Widget sunucudan ayarları aldığında hesabınızdaki ayarlar bütünüyle uygulanır.

Ancak data-rc-brand içine herhangi bir ek alan, örneğin accent, stil veya bir yazı eklerseniz koddaki marka bu sayfanın özel markası sayılır. Bu durumda hesabınızdaki ayarlardan önceliklidir. Hesabınızdan yalnızca “Yalnızca kendi bağlantılarınız üzerinden” görünümü bu sayfada geçerli kalır. Ayrıca sayfa hiçbir A/B testine katılmaz.

Hesabınızda marka rengini değiştirirseniz ardından Kurulum altında yerleştirme kodunu yeniden kopyalayın. Aksi halde sayfa yüklenirken eski renk kısa süreliğine görünür.

Kodun nasıl çalıştığı ve başka hangi yolların bulunduğu (window.ReactiveChatSettings, ReactiveChat('boot', …)), Teknik entegrasyon bölümünde açıklanır.

Özel CSS

Tüm ayarlar tek tek → Özel CSS altında diğer tüm kurallardan sonra en son uygulanacak CSS’yi yazarsınız.

• En fazla 20.000 karakter.
• @import hem kaydederken hem widget’ta kaldırılır.
• CSS yalnızca widget’ın içinde etkilidir. Yalıtılmış bir alanda (shadow DOM) çalışır ve sayfanızı değiştiremez. Tersine, sayfanızın CSS’si widget’a ulaşmaz. Bunun için doğru yer burasıdır.
• Widget daha sonra iki kuralı yeniden zorunlu kılar: klavye kullanıcıları için görünür odak halkası ve üst bilgideki kapatma düğmesi. Sohbetten çıkış yolunu stillerle gizlemek klavye kullanıcılarını tuzağa düşürür.
• Widget’ın iç sınıf adları garanti edilen bir arayüz değildir. Değişikliklerden sonra CSS’nizi önizlemede kontrol edin.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

Kodda aynısı customCss ile, örneğin ReactiveChat('boot', { customCss: '…' }) içinde veya data-rc-custom-css özniteliği olarak yapılabilir.

Pencere üst bilgisinde logo

En kolay yol, logoyu hesabınıza girmektir: Proje → Görünüm → Marka, Logo (adres) alanı. Kaydettikten en geç bir dakika sonra sohbet penceresinin üst bilgisinde görünür.

Kodda logo ile yükseklik, alternatif metin ve konumu da ayarlayabilirsiniz; örneğin logoyu sohbet düğmesine koyabilirsiniz. Kodda ayarlanan logo hesap alanından önceliklidir:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

• src – https:// içeren bir adres veya data:image/… olarak bir resim. data: adresi olarak küçük bir SVG bir isteği ortadan kaldırır.
• alt – alternatif metin.
• height – piksel cinsinden yükseklik, 12 ile 40 arası, varsayılan 20.
• placement – header (üst bilgi, varsayılan), launcher (sohbet düğmesinde) veya both.

Ana ekrandaki logo ise hesabınızda kolayca ayarlanır; Sohbetin ana ekranı sayfasına bakın.

Bir şey beklenenden farklı görünüyorsa

• Renk girilenden daha koyu veya daha açık: bu kontrast korumasıdır. Formun altındaki Yeniden hesaplandı satırı neyin ayarlandığını belirtir.
• Hesabınızdaki değişiklikler ulaşmıyor: yerleştirme kodunuz ek alanlar içeren bir data-rc-brand barındırıyor mu? Öyleyse kod önceliklidir. Ayrıca kaydettikten sonra bir dakikaya kadar sürebilir.
• Yüklenirken farklı bir renk kısa süreliğine görünüyor: renk değişikliğinden sonra kodu yeniden kopyalayın.
• Yazı tipi etkili değil: sayfanız yazı tipini yüklüyor mu? Widget yazı tipi dosyası yüklemez.