Kako Vam možemo pomoći?

Ukratko nam opišite o čemu se radi – javit ćemo Vam se e-poštom.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Na početnu stranicu

Renkler, yazı tipi ve tema

Marka rengi, vurgu, özel yüzey renkleri, köşe yarıçapı, yazı tipi, açık ve koyu görünüm, şablonlar ve özel CSS; widget’ın her metni nasıl okunabilir tuttuğu.

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

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:

İş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.

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:

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:

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.

.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>

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

Zadnje ažurirano: