Siteye canlı destek ekleme: HTML kodu, Google Tag Manager, Wix ve Squarespace

Siteye canlı destek eklemek için canlı destek aracınızın verdiği kodu kopyalar ve sitenin her sayfasında yüklenmesini sağlarsınız. Bunun dört yolu var: kodu sitenin ortak şablonunda kapanış </body> etiketinden hemen önceye yapıştırmak, Google Tag Manager'da Tüm Sayfalar tetikleyicili bir Özel HTML etiketi olarak eklemek ya da site oluşturucunuzun kod alanını kullanmak (Wix'te Custom Code ve Body - end, Squarespace'te Code Injection ve Footer). Ardından siteyi gizli pencerede açıp kendinize bir test mesajı gönderin. Yüklenen ama kimseye bildirim düşürmeyen bir sohbet kutusu, hiç olmamasından kötüdür.

ikas, WordPress ve Shopify'da daha kolay yollar var; onları yazının sonunda bulacaksınız. Örneklerde Shopxare Messenger kullanılıyor ama yöntem, kod parçası veren hemen her canlı destek aracı için aynı.

Siteniz için hangi yol uygun?

Önerim şu: şablonu düzenleyebiliyorsanız kodu doğrudan şablona ekleyin. Tag Manager, kod eklemenize izin verilen tek yer orasıysa iyi bir yedek yoldur ama araya bir bağımlılık sokar. Container'ı yöneten kişi farkında olmadan sohbeti kapatabilir, çerez izni kurgusu da çerezleri reddeden ziyaretçilerden sohbeti gizleyebilir.

Başlamadan önce: kodu kopyalayın

1. Shopxare hesabınızı açın ve Ayarlar → Messenger → Kurulum bölümüne gidin.
2. Herhangi bir web sitesi için verilen kodu kopyalayın. Kendi App ID'niz yazılı hâliyle şuna benzer:

<script>
  window.Shopxare = window.Shopxare || function () { (Shopxare.q = Shopxare.q || []).push(arguments) };
  Shopxare('boot', { app_id: 'YOUR_APP_ID' });
</script>
<script async src="https://app.shopxare.com/widget/v1/loader.js"></script>

3. Sohbet çalışmaya başlayınca Ayarlar → Messenger → Güvenlik → İzinli web siteleri bölümüne alan adlarınızı yazın. Liste boşsa Messenger her sitede yüklenir; listeyi doldurduğunuzda kodunuz yalnızca sizin sitelerinizde çalışır.

Ayrıntılar Messenger'ı kurun sayfasında.

1. yol: kodu sitenin HTML'ine yapıştırın

1. Tüm sayfaların kullandığı dosyayı bulun. Çoğu sitede bu bir layout ya da footer şablonudur: footer.php, layout.html veya bir footer parçası gibi. Her sayfası ayrı HTML dosyası olan basit bir sitede ortak dosya yoktur; kodu her dosyaya ayrı ayrı eklersiniz.
2. Kodu kapanış </body> etiketinden hemen önceye yapıştırın.
3. Değişikliği sunucuya yükleyin ve siteyi önbelleği temizleyerek yenileyin.

Kullandığınız altyapıda "footer kodları", "özel kod" ya da benzer adlı bir alan varsa aynı işi görür. Dosya düzenlemek yerine o alanı kullanın.

React, Vue gibi tek sayfalık uygulamalarda ek bir şey gerekmez. Kodu index.html dosyasına bir kez ekleyin; Messenger sayfa değişikliklerini kendisi algılar, ekibiniz müşterinin hangi sayfada olduğunu yine görür.

2. yol: Google Tag Manager ile canlı destek ekleme

1. tagmanager.google.com adresinde container'ınızı açın ve Etiketler > Yeni (Tags > New) adımına gidin.
2. Etiket Yapılandırması bölümünde Özel HTML (Custom HTML) türünü seçin. Kodun tamamını, iki <script> bloğuyla birlikte yapıştırın. Google'ın kuralı da bu: JavaScript her zaman <script> etiketleri içinde olmalı (Tag Manager Yardım).
3. Tetikleme bölümünde Tüm Sayfalar (All Pages) seçeneğini seçin.
4. Gelişmiş Ayarlar > İzin Ayarları (Advanced Settings > Consent Settings) bölümünü açın. Varsayılan olarak ek izin kontrolü ayarlanmamıştır (Not set). Çerez bannerınız etiketleri izin türlerine göre yönetiyorsa, etiketin yalnızca izin verildiğinde çalışması için Require additional consent for tag to fire seçeneğini seçip bannerınızın işlevsel çerezler için kullandığı türü ekleyebilirsiniz (Tag Manager Yardım). Hangi türün uygun olduğunu çerez bannerınızı ve KVKK metinlerinizi yöneten kişiye sorun. Bedelini de bilin: izin şartı koyarsanız çerezleri reddeden ziyaretçiler sohbeti görmez.
5. Önizle (Preview) düğmesine tıklayın, sitenizin adresini yazın ve Bağlan (Connect) deyin (Tag Manager Yardım). Hata ayıklama ekranında sohbet etiketinin çalıştığını, sitede de sohbet düğmesinin göründüğünü kontrol edin.
6. Gönder (Submit) ve ardından Yayınla (Publish) deyin.

Tag Manager, Özel HTML kodunu küçültür ve tek tırnakları çift tırnağa çevirebilir. Bu kodu etkilemez; kaydedilen sürüm biraz farklı görünürse endişelenmeyin.

Tag Manager'ı ne zaman kullanmamalısınız?

• Giriş yapmış müşterileri tanımak istiyorsanız. Kimlik doğrulama, sunucunuzun gizli bir anahtarla hesapladığı bir user_hash ister ve bu anahtar sunucuda kalmalıdır. Tag Manager bu değeri hesaplayamaz, yani şablonunuz onu zaten üretmek zorunda. Bu durumda boot kodunu şablona koyun ve user_id, user_hash, email ve name değerlerini orada gönderin (JavaScript API).
• Siteniz Wix'teyse. Wix, Google Tag Manager gibi takip araçlarının özel kod özelliğiyle çalışmadığını söylüyor (Wix Yardım Merkezi). Sohbet kodunu doğrudan Custom Code'a ekleyin (3. yol).
• Kod zaten temanızda varsa. Kodu tek bir yerden yükleyin. İki kopya, sorun çıktığında hangisine bakacağınızı bilmemenize yol açar.

3. yol: Wix sitesine canlı destek ekleme

Wix önce iki şart koyar: site yayında olmalı ve bağlı bir alan adı bulunmalı (Wix Yardım Merkezi).

1. Sitenizin panelinde Settings (Ayarlar) bölümüne gidin.
2. Development & integrations altında Custom Code seçeneğine tıklayın.
3. + Add Custom Code deyin, kodu yapıştırın ve "Canlı destek" gibi bir ad verin.
4. Add Code to Pages altında All pages seçin.
5. Place Code in altında Body - end seçin.
6. Apply deyin ve canlı sitenizi açın.

Wix'te sık atlanan iki ayrıntı var. Özel kod alan adınıza bağlıdır: başka bir birincil alan adı atarsanız Wix kodlarınızı siler, yeniden eklemeniz gerekir. Ayrıca Wix, Aralık 2025'ten beri ön yüz güvenlik önlemlerinin bazı üçüncü taraf kodlarını, sağlayıcı güncelleyene kadar engelleyebileceğini belirtiyor. Sohbet düğmesi görünmezse canlı destek sağlayıcınıza yazın; Wix üçüncü taraf kodlarına destek vermiyor.

4. yol: Squarespace sitesine canlı destek ekleme

Code Injection özelliği Core, Plus ve Advanced paketlerinde ve bazı eski paketlerde var (Squarespace Yardım Merkezi).

1. Code Injection panelini açın. Yukarıdaki yardım makalesi doğrudan bu panele bağlantı veriyor.
2. Kodu Footer alanına yapıştırın. Squarespace bu alandaki kodu her sayfada kapanış </body> etiketinden hemen önce yükler.
3. Save deyin ve sitenizi yenileyin.

Squarespace'in ödeme sayfaları özel kodu desteklemez, yani sohbet orada görünmez. Ödeme ve kargo sorularını sohbetin yüklendiği sepet ve ürün sayfalarında yanıtlamaya hazır olun.

ikas, WordPress, WooCommerce ve Shopify

Bu altyapılarda ham koddan daha iyi bir yol var, çünkü entegrasyon müşteri ve sepet bilgisini de gelen kutunuza taşıyabilir. WooCommerce eklentisi ve Shopify kodu sipariş sayısı ve sepet tutarı gibi mağaza bilgilerini otomatik gönderir; bunlar konuşmanın yanında bir Mağaza kartı olarak görünür.

• ikas: uygulamayı tek adımda, kod yazmadan kurun (ikas rehberi).
• WordPress ve WooCommerce: eklentiyi kurun. Adım adım anlatım WordPress canlı destek eklentisi yazımızda ve WordPress dokümanında.
• Shopify: tema kodunu theme.liquid dosyasına ekleyin. Shopify canlı destek ekleme yazısına bakın.

Beş dakikada test edin

1. Siteyi gizli pencerede, hem bilgisayarda hem telefonda açın. Sohbet düğmesi köşede görünmeli. Mobilde "Sepete ekle" düğmesini veya çerez bannerını kapatmadığını kontrol edin. Konumunu Messenger'ı özelleştirin sayfasındaki ayarlarla değiştirebilirsiniz.
2. Kendinize bir test mesajı gönderin ve telefonunuzdan yanıtlayın. Shopxare Mobile her pakette ücretsiz (mobil ve masaüstü uygulamalar). Bildirim gelmiyorsa, müşterilere canlı desteği duyurmadan önce bunu çözün.
3. Konuşmanın ortasında başka bir sayfaya geçin. Konuşma yerinde durmalı.
4. Çerez bannerında çerezleri reddedin ve sayfayı yenileyin. Sohbeti hâlâ görüyor musunuz? İki cevap da doğru olabilir; önemli olan bunun bilinçli bir karar olması.
5. Kodun bir kez yüklendiğini kontrol edin. Sayfa kaynağına ya da Tag Assistant'a bakın. Şablonda bir kopya, Tag Manager'da bir kopya daha olması kolayca yapılan bir hatadır.

Örnek: küçük bir online kahve dükkânı

Kurgusal bir kahve kavurucusu, yazılımcısına yaptırdığı ve Google Tag Manager'ın zaten kurulu olduğu sitesinde çekirdek kahve satıyor. Sahibi bir salı sabahı Messenger'ı Özel HTML etiketi olarak ekliyor ve telefonundan test ediyor. Saat 14.10'da bir ürün sayfasındaki ziyaretçi yazıyor:

"Bu kahve çekirdek mi geliyor, öğütülmüş mü?"

Sahibi mobil uygulamadan yanıtlıyor:

"Varsayılan olarak çekirdek gönderiyoruz. Öğütülmüş isterseniz Sepete ekle düğmesinin üstündeki öğütme menüsünden 'Filtre kahve için öğütülmüş' seçeneğini seçin, kargoya vereceğimiz gün öğütelim."

İki ay sonra siteye üyelik sistemi ekliyor. Kodu Tag Manager'dan sayfa şablonuna taşıdığı an da bu oluyor: böylece sunucu user_id ve user_hash gönderebiliyor ve tekrar gelen müşteriler gelen kutusunda tanınıyor.

Canlı destek yayına girdikten sonra

• Akşam yazan ziyaretçiler ne zaman yanıt alacağını bilsin diye çalışma saatlerini ve bir mesai dışı mesajı ayarlayın. Mesai dışı mesajı örneklerimizden birini kopyalayabilirsiniz.
• En sık gelen beş sorunun yanıtını kaydedin ve "/" ile ekleyin (hazır yanıtlar). Müşteri hizmetleri hazır cevapları yazımız iyi bir başlangıç seti veriyor.
• Gece yanıt verecek kimse yoksa Are AI, kendi yardım makalelerinizden ve sayfalarınızdan yanıt verir, gerektiğinde konuşmayı ekibinize devreder.

Shopxare'in bugün tek bir paketi var ve ücretsiz; kredi kartı istenmiyor. Hesap açıp Messenger'ı, footer dosyanızı bulmanız kadar kısa bir sürede sitenize ekleyebilirsiniz.

Sık sorulan sorular

Siteye ücretsiz canlı destek nasıl eklenir?

Ücretsiz bir canlı destek aracına kaydolun, verdiği kodu kopyalayın ve sitenizin ortak şablonunda </body> etiketinden hemen önceye yapıştırın. Alternatif olarak Google Tag Manager'ı ya da site oluşturucunuzun özel kod alanını kullanın. Ardından kendinize bir test mesajı gönderin.

Google Tag Manager ile canlı destek eklenir mi?

Evet. Özel HTML türünde bir etiket oluşturun, kodun tamamını yapıştırın, tetikleyiciyi Tüm Sayfalar yapın, Önizle ile kontrol edin, sonra gönderip yayınlayın. Giriş yapmış müşterileri tanımanız gerekiyorsa veya siteniz Wix'teyse Tag Manager'ı kullanmayın.

Canlı destek kodu nereye eklenir?

Kapanış </body> etiketinden hemen önceye, tüm sayfaların kullandığı bir dosya veya alana: footer şablonu, "footer kodları" alanı, Wix'te Custom Code (Body - end) ya da Squarespace'te Code Injection (Footer).

Canlı destek sitede neden görünmüyor?

Sık görülen nedenler: yayınlanmamış bir değişiklik (Tag Manager container'ı veya site oluşturucu), ziyaretçi çerezleri kabul edene kadar etiketi durduran bir izin ayarı, izinli web siteleri listesinde eksik bir alan adı veya önbellekteki eski sayfa. Önbelleği temizleyip gizli pencerede kontrol edin.

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

Her ek kod sayfaya biraz iş yükler. Messenger'ın yükleyicisi async ile yüklenir; tarayıcı sayfayı göstermek için onu beklemez. Hız sizin için önemliyse kurulumdan önce ve sonra bir ürün sayfasını test edin.