Sohbet Balonu Entegrasyonu

Web sitenize sohbet balonu (web chat) ekleyin. Panelde Sohbet Balonu → Entegrasyon bölümünden script kodunu, altyapıya özel talimatları ve entegrasyon kontrolünü yönetirsiniz.

Menü: Sohbet Balonu → Entegrasyon (Entegrasyon Kodu · Entegrasyon Talimatları · Entegrasyon Kontrolü)

Altyapı: JavaScript (genel) · İkas · T-Soft · Ideasoft · WordPress · OpenCart · Ticimax · Shopify

1 - Takip kodunu (embed) yükleyin

Supsis canlı sohbeti etkinleştirmek için aşağıdaki kodu sitenize ekleyin. Varsayılan öneri: sohbeti açmak istediğiniz sayfalarda </head> kapanış etiketinden hemen önce yapıştırın. Altyapınıza göre </body> öncesi de kullanılabilir — platform talimatlarına bakın.

<!-- Start of SUPSIS Embed Code -->
<script>
    window.supsis = window.supsis || function () {
        (supsis.q = supsis.q || []).push(arguments);
    };
    supsis.l = +new Date();
</script>
<script src="https://visitor.supsis.live/static/js/loader.js" type="text/javascript" async defer></script>
<!-- End of SUPSIS Embed Code -->

Paneldeki Entegrasyon Kodu alanı aynı scripti gösterir; site kimliğinize göre özelleştirilmiş olabilir.

2 - Altyapı talimatları

Kullandığınız e-ticaret veya site altyapısını seçin; adım adım kurulumu uygulayın.

JavaScript (HTML / özel site)

Yukarıdaki entegrasyon kodunu sayfanızda </body> etiketinin kapanışından hemen önce yapıştırın. Statik HTML, özel framework veya panelde hazır “Script ekle” alanı olan siteler için uygundur.

İkas

1. İkas yönetim paneline giriş yapın.
2. Satış Kanalları → ilgili satış kanalınız → Eklentiler yolunu izleyin.
3. Yüklü Uygulamalar altından Scriptler'i açın.
4. Script Ekle'ye tıklayın.
5. Scripte bir ad verin; Script İçeriği alanına yukarıdaki entegrasyon kodunu yapıştırın.
6. Kaydet'e basın; script satırındaki aktif kutusunun işaretli olduğundan emin olun.

T-Soft

T-Soft mağazalarında script yapıştırmadan Uygulama Marketi kurulumu yeterlidir:

1. T-Soft Uygulama Marketi — Supsis sayfasını açın.
2. T-Soft yönetici hesabınızla giriş yapın.
3. Yükle'ye tıklayın; uygulama mağazanıza ücretsiz kurulur.
4. Kurulum bitince Supsis paneline yönlendirilirsiniz; sohbet balonu sitede otomatik görünür.
5. Ayrı entegrasyon kodu gerekmez. Paneldeki Entegrasyon Kontrolü alanından doğrulayın.

Ideasoft

1. Bayi paneline giriş yapın.
2. Ayarlar → SEO → Arama Motoru Servisleri adımlarını izleyin.
3. Takip Kodu bölümünde Meta Tag ile Site Doğrulama seçeneğini seçin.
4. Açılan alana yukarıdaki entegrasyon kodunu yapıştırın ve kaydedin.
5. Ayarlar → Optimizasyonlar → Ön Belleği Temizle'ye basın. Entegrasyon tamamlanır.

(Ideasoft OAuth / sipariş entegrasyonu için bkz. Ideasoft — bu sayfa yalnızca web chat balonu script yerleşimidir.)

WordPress

1. WordPress yönetici paneline giriş yapın.
2. Görünüm → Tema Düzenleyici'ye gidin.
3. Sağda Tema Dosyaları altında Tema Altbilgisi (footer.php) dosyasını seçin.
4. Entegrasyon kodunu alttaki </body> etiketinin hemen önüne yapıştırın.
5. Dosyayı Güncelle ile kaydedin.

OpenCart

1. OpenCart admin paneline giriş yapın.
2. Tasarım → Tema Düzenleyici'ye gidin.
3. common klasöründen header.twig dosyasını açın.
4. Entegrasyon kodunu </head> etiketinin hemen önüne yapıştırın.
5. Kaydet'e tıklayın.

Ticimax

1. Ticimax yönetim paneline giriş yapın.
2. Üst menüden Modüller → Script Yönetimi'ni açın.
3. Tüm Sayfalar kaydını düzenleyin. Kodun <head> içinde olması gerekiyorsa Tüm Sayfalar – Header kaydını kullanın.
4. Mevcut scriptlerin üzerine yazmadan entegrasyon kodunu yapıştırın.
5. Değişiklikleri kaydedin.

Shopify

1. Shopify paneline giriş yapın.
2. Online Store → Themes → Actions (açılır menü) → Edit code → theme.liquid dosyasını açın.
3. Entegrasyon kodunu theme.liquid içinde </body> etiketinin hemen önüne yerleştirin.
4. Kaydedin ve vitrinde balonu kontrol edin.

3 - Entegrasyon kontrolü

Kod eklendikten (veya T-Soft uygulama kurulumundan) sonra panelde Entegrasyon Kontrolü alanına web sitenizin adresini yazarak balonun yüklendiğini doğrulayın.

4 - Google Tag Manager (GTM) ve Etkinlik (Event) Takibi

Web sitenizdeki Supsis canlı destek sohbet balonunun ziyaretçi etkileşimlerini Google Tag Manager (GTM), Google Analytics 4 (GA4) veya Meta Pixel gibi analitik platformlarına ileterek dönüşüm (conversion) ölçümleri gerçekleştirebilirsiniz.

Bu entegrasyon iki kritik ziyaretçi hareketini anlık olarak yakalar: 1. Sohbet Balonuna Tıklanması: Ziyaretçinin sağ alttaki chat balonuna tıklayarak sohbet penceresini açması. 2. Canlı Desteğe Bağlanma: Ziyaretçinin bilgilerini ileterek canlı destek temsilcisine başarıyla bağlanması.

4.a – GTM Takip Kodu ve dataLayer Entegrasyonu

Aşağıdaki JavaScript kod bloğunu sitenizin <head> veya <body> bölümüne (tercihen GTM kodunuzdan sonra) ekleyebilir ya da doğrudan Google Tag Manager üzerinde bir Custom HTML (Özel HTML) etiketi olarak tanımlayabilirsiniz:

<script>
  // 1. Supsis SDK hazır olduğunda sohbet balonuna tıklama olayını dinle
  if (typeof supsis === "function") {
    supsis("ready", function(s) {
      if (s.i && s.i.openButton) {
        s.i.openButton.addEventListener("click", function() {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            event: "supsis_chat_opened",
            event_category: "Supsis Chat",
            event_action: "Chat Balonu Açıldı"
          });
        });
      }
    });
  }

  // 2. Ziyaretçi canlı desteğe bağlandığında gerçekleşen iframe mesajını dinle
  window.addEventListener("message", function(e) {
    if (e.data && e.data.command === "visitor-connected") {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: "supsis_visitor_connected",
        event_category: "Supsis Chat",
        event_action: "Canlı Desteğe Bağlandı",
        chat_id: e.data.id || null
      });
    }
  });
</script>

4.b – Olayların (Events) Açıklamaları

4.c – Canlı Test ve Doğrulama (Tarayıcı Konsolu)

Kodun doğru çalışıp çalışmadığını Google Tag Manager'ı yayına almadan önce tarayıcınızın konsolundan test edebilirsiniz:

1. Web sitenizde klavyeden F12 tuşuna basarak Geliştirici Araçları'nı açın ve Console (Konsol) sekmesine gelin.
2. Konsola test kodunu yapıştırıp çalıştırın.
3. Sohbet balonuna tıkladığınızda ve canlı desteğe bağlandığınızda aşağıdaki gibi başarı loglarını ve veri nesnelerini görüntüleyebilirsiniz: