WordPress Sitesine Canlı Destek Ekleme: Üç Yöntem ve Sonrası

WordPress sitesine canlı destek eklemenin üç yolu: kod eklentisi, child theme ve Google Tag Manager. Kod örnekleri, hız etkisi, WooCommerce...

WordPress sitesine canlı destek eklemek dakikalar süren bir iş, ama üç ayrı yolu var ve yanlış olanı seçerseniz ya tema güncellemesinde kodunuz siliniyor ya da sayfa hızınız gözle görülür şekilde düşüyor. Bu yazıda üç yöntemi de adım adım anlattım, hangisinin hangi durumda doğru olduğunu yazdım, kurulumdan sonra bakmanız gereken şeyleri listeledim. Örnek kod parçaları Lunachat widget’ı üzerinden ama mantık hepsinde aynı: sayfanın altına bir script koyuyorsunuz, gerisini widget hallediyor.

Hangi Yöntemi Seçmelisiniz

Kısa cevap: sitenizi siz yönetiyorsanız ve teknik bir şey kurcalamak istemiyorsanız eklenti, başkası da siteye dokunuyorsa ve kodun kalıcı olmasını istiyorsanız child theme, pazarlama etiketlerini zaten tek yerden yönetiyorsanız Google Tag Manager.

YöntemSüreGerekli bilgiRiski
Kod ekleme eklentisi (WPCode, Header Footer Code Manager)3 dakikaYokBir eklenti daha yüklüyorsunuz
Child theme functions.php10 dakikaTemel PHP ve FTPYanlış yazarsanız site beyaz ekran verir
Google Tag Manager5 dakikaGTM hesabıWidget GTM yüklenene kadar gecikir

Yapmamanız gereken tek şey var: ana temanın functions.php dosyasını doğrudan düzenlemek. Tema güncellendiği anda o dosya sıfırlanıyor ve canlı desteğiniz sessizce kayboluyor. Sitenizde canlı destek olduğunu unutup aylar sonra “kimse yazmıyor” diye düşünme riski buradan geliyor.

Önce Kodunuzu Alın

Hangi canlı destek aracını kullanırsanız kullanın, panelinden size şuna benzeyen bir kod veriyor. Lunachat’te bu kod Ayarlar > Web sitesi altında duruyor:

<script>
  window.lunachat = window.lunachat || function () {
    (lunachat.q = lunachat.q || []).push(arguments);
  };
  lunachat('init', 'pk_live_7f3a9c2e8b1d4a6f');
</script>
<script async src="https://cdn.lunachat.co/w.js"></script>

Buradaki pk_live_ ile başlayan değer sitenizin kimliği, herkese açık bir anahtar. Sayfanın kaynağında görünmesi normal, gizli tutmaya çalışmanıza gerek yok. İkinci satırdaki async önemli: script’in sayfanın geri kalanını bekletmemesini sağlıyor, hız bölümünde buna döneceğim.

Yol 1: Kod Ekleme Eklentisiyle

En güvenli yol bu. Tema değişse de güncellense de kodunuz yerinde kalıyor, kaldırmak istediğinizde tek tuşla kapatıyorsunuz.

  1. Eklentiler > Yeni Ekle menüsünden WPCode aratın ve kurup etkinleştirin.
  2. Sol menüde açılan Code Snippets > Header & Footer sayfasına girin.
  3. Kodunuzu Footer kutusuna yapıştırın. Header kutusuna koymayın; canlı destek widget’ının sayfanın ilk çizilmesini beklemesi doğru davranış.
  4. Değişiklikleri Kaydet deyin.
  5. Sitenizi gizli sekmede açın, sağ altta balon görünmeli.

Bazı canlı destek araçlarının kendi resmî WordPress eklentisi de var. Onlar da çalışır, ama bir eklenti yalnızca bir script eklemek için tema kancalarına, yönetici menüsüne ve bazen veritabanına giriyor. Tek script için genel amaçlı bir kod eklentisi daha hafif kalıyor.

Yol 2: Child Theme ile

Eklenti sayısını artırmak istemiyorsanız ve zaten bir child theme kullanıyorsanız, kodu wp_footer kancasına bağlamak en temiz çözüm.

Child theme’in functions.php dosyasının sonuna şunu ekleyin:

add_action( 'wp_footer', function () {
	if ( is_admin() ) {
		return;
	}
	?>
	<script>
	  window.lunachat = window.lunachat || function () {
	    (lunachat.q = lunachat.q || []).push(arguments);
	  };
	  lunachat('init', 'pk_live_7f3a9c2e8b1d4a6f');
	</script>
	<script async src="https://cdn.lunachat.co/w.js"></script>
	<?php
} );

Dosyayı FTP veya barındırma panelinizin dosya yöneticisiyle düzenleyin. WordPress’in kendi tema düzenleyicisini kullanırsanız bir noktalı virgül hatası siteyi tamamen kapatabilir ve o ekrandan geri dönemezsiniz. Düzenlemeden önce dosyanın bir kopyasını alın.

Child theme’iniz yoksa önce onu oluşturun. Ana temaya yazdığınız her satır bir sonraki güncellemede gidiyor.

Yol 3: Google Tag Manager ile

Sitenizde GTM zaten varsa yeni bir etiket açmak birkaç dakika sürüyor.

  1. GTM’de Etiketler > Yeni deyin, tür olarak Özel HTML seçin.
  2. Kodu olduğu gibi yapıştırın.
  3. Tetikleyici olarak All Pages seçin.
  4. Önizleme modunda test edip yayınlayın.

Bir uyarı: GTM’in kendisi yüklenene kadar widget başlamıyor. Sayfa ağır bir siteyse balonun görünmesi iki üç saniye gecikebiliyor ve mobilde bu fark ediliyor. Canlı destek sizin için dönüşüm üreten bir kanalsa doğrudan footer’a koymak daha iyi sonuç veriyor.

Sadece Belirli Sayfalarda Göstermek

Blog yazılarında canlı destek istemiyor, yalnızca ürün ve fiyat sayfalarında istiyor olabilirsiniz. WordPress’in koşul etiketleri bunu kolaylaştırıyor:

add_action( 'wp_footer', function () {
	// Yalnızca ürün sayfaları, sepet ve ödeme adımı
	if ( ! ( is_product() || is_cart() || is_checkout() ) ) {
		return;
	}
	// ... widget kodu ...
} );

Bunu yapmadan önce bir kere daha düşünün. Ziyaretçinin sorusu çoğu zaman ürün sayfasında değil, kargo veya iade yazısını okurken çıkıyor. Widget’ı kısıtlamak yerine, sayfaya göre farklı karşılama mesajı göstermek genelde daha iyi çalışıyor.

Sayfa Hızını Bozmamak

Canlı destek widget’ları kötü bir üne sahip ve haksız da değil: bazıları 200 KB üzerinde JavaScript indiriyor, üstüne yazı tipi ve ikon seti çekiyor. Bunun Core Web Vitals’a üç türlü zararı var.

  • LCP: Script async değilse tarayıcı HTML’i işlemeyi durdurup onu indiriyor. En büyük içeriğin çizilmesi gecikiyor.
  • CLS: Widget sayfanın akışına yerleşirse geldiği anda içeriği kaydırıyor. Doğru yapılmış widget position: fixed ile duruyor ve hiçbir şeyi itmiyor.
  • INP: Ağır widget ana iş parçacığını meşgul ediyor, ziyaretçinin ilk tıklaması geç cevap veriyor.

Yapabilecekleriniz sırasıyla: script’i mutlaka async ile yükleyin, kodu footer’a koyun, aracınızın boyutuna bakın. Bir widget’ın gzip sonrası boyutunu tarayıcının Ağ sekmesinde görebilirsiniz; 50 KB üzerindeyse mobil kullanıcınız bunu hissediyor demektir. Lunachat’in widget’ı bu yüzden 40 KB’lık sabit bir bütçeyle geliştiriliyor ve bütçe aşılırsa derleme kırılıyor.

Önbellek eklentinizin “JavaScript’i geciktir” veya “kullanılmayan JS’i ertele” ayarı varsa dikkatli olun. Widget’ı geciktirmek PageSpeed puanını yükseltiyor ama ziyaretçi sohbet balonunu görene kadar geçen süre uzuyor. Satışa dönük bir sitede bu takas genelde zarar yazıyor.

WooCommerce Kullanıyorsanız

Mağazada canlı desteğin asıl değeri, sohbetin siparişe dönüp dönmediğini görebilmekte. Çoğu araç bunun için bir JavaScript komutu sunuyor ve teşekkür sayfasında çağrılıyor.

add_action( 'woocommerce_thankyou', function ( $order_id ) {
	$order = wc_get_order( $order_id );
	if ( ! $order ) {
		return;
	}
	?>
	<script>
	  lunachat('track', 'purchase', {
	    value: <?php echo (float) $order->get_total(); ?>,
	    orderId: '<?php echo esc_js( $order->get_order_number() ); ?>'
	  });
	</script>
	<?php
} );

orderId alanı aynı siparişin iki kez sayılmasını engelliyor. Müşteri teşekkür sayfasını yenilerse tutar ikinci kez eklenmiyor. Bu ölçümün nasıl kurulacağını ve rakamı nasıl okuyacağınızı ayrı bir yazıda anlattım: canlı destekle satış ve sepet terk müdahalesi.

Giriş yapmış müşteriyi tanıtmak da işe yarıyor. Temsilci sohbeti açtığında kimin yazdığını, hangi siparişin sahibi olduğunu görüyor ve “sipariş numaranız neydi” sorusu ortadan kalkıyor. Bunun için araçların identify benzeri bir komutu oluyor ve sunucu tarafında imzalanmış bir jeton istiyor; imzasız kimlik bildirimi herkesin herkes gibi görünmesine izin verdiği için güvenli araçlar bunu kabul etmiyor.

Kurulumdan Sonra Kontrol Listesi

  • Gizli sekmede siteyi açın, balon çıkıyor mu bakın. Giriş yapmış tarayıcınızda test etmeyin.
  • Telefondan açın. Widget klavyeyi kapatıyor mu, kapatma tuşuna ulaşılıyor mu.
  • Kendinize bir mesaj yazın ve panelden cevaplayın. Bildirim geliyor mu.
  • Çalışma saatlerini ve mesai dışı mesajını ayarlayın. Cevapsız kalan sohbet, hiç olmayan sohbetten kötü.
  • Karşılama mesajını sitenize göre yazın. Varsayılan metinler her sitede aynı ve ziyaretçi bunu anlıyor.

Daha ayrıntılı bir devreye alma planı için canlı destek kurulumu ve operasyon checklisti yazısına bakabilirsiniz.

Widget Görünmüyorsa

Sırayla şunlara bakın:

  1. Önbellek. LiteSpeed Cache, WP Rocket veya Cloudflare kullanıyorsanız önbelleği temizleyin. Ziyaretçiye hâlâ eski HTML gidiyor olabilir.
  2. Kod gerçekten sayfada mı. Sayfada sağ tık, Sayfa kaynağını görüntüle, Ctrl+F ile araç adını aratın. Kod yoksa sorun WordPress tarafında, varsa tarayıcı tarafında.
  3. Konsol hatası. F12 ile geliştirici araçlarını açın, Console sekmesine bakın. Kırmızı bir Content Security Policy hatası varsa güvenlik eklentinizin CSP ayarına widget adresini eklemeniz gerekiyor.
  4. Reklam engelleyici. Bazı engelleyiciler sohbet script’lerini izleyici sanıp kesiyor. Eklentileri kapatıp deneyin.
  5. JavaScript birleştirme. Önbellek eklentisinin “JS dosyalarını birleştir” ayarı widget kodunu bozabiliyor. Bu ayarı kapatıp test edin.

KVKK Tarafını Atlamayın

Canlı destek kutusuna ad, e-posta veya telefon soruyorsanız kişisel veri işliyorsunuz demektir. Üç şeyi halletmeniz gerekiyor: aydınlatma metninizde canlı destek kanalının adı geçmeli, sohbet kayıtlarının ne kadar saklandığı yazılı olmalı, aracınızın verileri nerede tuttuğunu bilmelisiniz. Yurt dışında barındırılan bir araç kullanıyorsanız yurt dışına veri aktarımı başlığı devreye giriyor ve bu başlık açık rıza istiyor.

Pratikte en sık atlanan madde saklama süresi. Sohbet geçmişini süresiz tutan bir araç, ileride silme talebi geldiğinde sizi zor durumda bırakıyor.

Sık Sorulan Sorular

Canlı destek eklentisi siteyi yavaşlatır mı?

Doğru kurulduğunda ölçülebilir bir fark yaratmıyor. Script async ile ve footer’da yükleniyorsa sayfanın çizilmesini bekletmiyor. Fark yaratan şey aracın kendi boyutu: 30 KB’lık bir widget’la 300 KB’lık bir widget arasında mobilde saniyelik fark oluşuyor.

Eklenti kullanmadan canlı destek eklenebilir mi?

Evet. Child theme’in functions.php dosyasında wp_footer kancasına bağlamak yeterli. Yukarıdaki ikinci yolda kodu paylaştım.

Elementor ile yapılmış sitede çalışır mı?

Çalışır. Elementor sayfanın gövdesini üretiyor, widget ise wp_footer üzerinden gövdenin dışına yerleşiyor. Elementor’un kendi Özel Kod özelliğini de kullanabilirsiniz; Pro sürümde Elementor > Custom Code altında duruyor ve konum olarak Body – End seçmeniz gerekiyor.

Birden fazla canlı destek aracı aynı anda kullanılabilir mi?

Teknik olarak engel yok ama yapmayın. İki balon üst üste biniyor, ziyaretçi hangisine yazacağını bilmiyor ve gelen mesajların yarısı kimsenin bakmadığı panele düşüyor. Araç değiştiriyorsanız eskisini kaldırdıktan sonra yenisini ekleyin.

Ücretsiz bir canlı destek aracı yeterli olur mu?

Günde birkaç mesaj alan bir site için çoğu zaman yeterli. Sınırların nerede başladığını ve ücretsiz planların pratikte neyi kestiğini ücretsiz canlı destek yazılımları yazısında tek tek yazdım.

Özet

Kurulum kısmı gerçekten beş dakikalık bir iş. Zor olan sonrası: gelen mesaja kaç dakikada dönüyorsunuz, mesai dışında ne oluyor, sohbet siparişe dönüyor mu. Widget’ı siteye koyduktan sonra bir hafta boyunca gelen her sohbeti okuyun. Ziyaretçilerin hangi soruyu tekrar tekrar sorduğunu görünce, o sorunun cevabını sayfaya yazmak canlı destekten daha fazla iş görüyor.

  • About
    admin

    1 Yorum

Yorum Ekle

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You May Also Like