Önizleme ve Yayınlama

Formunuzu ve mantık kurallarınızı tamamladıktan sonra iki ana adım kalır: Önizleme ekranında deneyimi test etmek ve embed kodunu sitenize eklemek.

Önizleme ekranına erişim

  • Her chart sayfasının üst kısmındaki Preview butonu yeni bir sekmede önizlemeyi açar.
  • Pano aksiyon menüsünde de Preview seçeneği bulunur.
  • Önizleme, seçtiğiniz dil segmentine bağlıdır (/tr/... veya /en/...). Sayfanın sağ üstündeki LanguageSwitcher ile iki dil arasında geçiş yapabilirsiniz.

Soru akışını test etme

Önizleme formu, müşterinizin göreceği embed deneyimini birebir simüle eder:

  • Üstte kaçıncı soruda olduğunuzu gösteren bir ilerleme çubuğu vardır.
  • Back ve Next butonları ile ileri-geri gezinebilir, zorunlu sorular boş bırakılırsa sistem uyarı verir.
  • Dropdown seçenekleri tek tıklamada seçilir; metin ve sayı soruları için placeholder ipuçları gösterilir.
  • Mantık kurallarınız tetiklenirse sorular atlanır veya sonuç ekranına doğrudan geçilir.
  • Süreci sıfırlamak isterseniz sonuç ekranındaki Start over butonuna tıklayın.

Sonuç ve mesajlar

Mantık kurallarınız veya tablo eşleşmesi bir sonuç döndürdüğünde:

  • Önerilen beden büyük bir kart olarak vurgulanır.
  • Show user answers ayarı açık bırakıldıysa müşteri cevaplarının özetini görebilirsiniz.
  • Tablo veriniz mevcutsa View full size chart bağlantısıyla satırların tamamını kontrol edebilirsiniz.
  • Custom Response aksiyonu tetiklenirse HTML destekli bir bilgilendirme mesajı gösterilir.
  • Hiçbir kural eşleşmezse No Match mesajı görünür; Chart Settings altında tanımladığınız özel metin burada kullanılır.

Bu ekran, embed görünümünüzün tema ayarlarını da uygular. Renk veya font değişiklikleri yaptıysanız burada test edin.

Embed kodlarını kopyalama

Önizleme ekranının sağ üstündeki Get Embed Code butonu sizi embed sayfasına götürür. Burada iki hazır şablon bulunur:

Modal (Popup)

<script src="https://sizin-uygulamaniz.com/embed.js" data-api-url="https://sizin-uygulamaniz.com"></script>
<link rel="stylesheet" href="https://sizin-uygulamaniz.com/embed.css">
<button data-sizechart-id="CHART_ID">Find My Size</button>
  • <script> ve <link> etiketlerini sitenizin <head> bölümüne veya embed kullandığınız sayfaya ekleyin.
  • data-sizechart-id değerini SizeChart Builder'daki chart kimliğinizle otomatik olarak doldurulmuş şekilde kopyalayın.
  • Buton etiketi Find My Size olarak gelir; dilinize uygun metinle değiştirebilirsiniz.
  • Kullanıcı butona tıkladığında modal açılır ve form çalışmaya başlar.

Inline Widget

<script src="https://sizin-uygulamaniz.com/embed.js" data-api-url="https://sizin-uygulamaniz.com"></script>
<link rel="stylesheet" href="https://sizin-uygulamaniz.com/embed.css">
<div data-sizechart-id="CHART_ID" data-mode="inline"></div>
  • Bu sürümde buton yerine boş bir <div> kullanılır; widget doğrudan sayfanın içinde görünür.
  • data-mode="inline" parametresi inline render için zorunludur.
  • Widget'ın görünümü Chart Settings > Embed Theme bölümünde yaptığınız renk ve font ayarlarıyla eşleşir.

Önemli: Kod bloklarında https://sizin-uygulamaniz.com örnek alan adıdır. Embed sayfası sizin için doğru NEXT_PUBLIC_APP_URL değerini zaten yerleştirir; kodu olduğu gibi kopyalamanız yeterlidir.

Yayınlama ipuçları

  • Embed dosyalarını yalnızca bir kez eklemeniz gerekir; aynı sayfada birden fazla chart ID'si kullanabilirsiniz.
  • Modal sürümünü ürün sayfalarınızda Find My Size butonuna bağlayın, inline sürümü ise “Beden Tablosu” gibi bilgilendirme alanlarında tercih edin.
  • Eğer müşterileriniz için farklı diller sunuyorsanız, aynı chart'ın kopyasını alıp soruları hedef dile çevirin ve embed kodunu ilgili dil versiyonuna ekleyin.
  • Gömme kodu ekledikten sonra gerçek sitede Preview yaparak pop-up'ın açıldığından emin olun. Tarayıcı konsolundaki hatalar bağlantı problemlerini yakalamanıza yardımcı olur.

Chart'ınızı yayınladıktan sonra performans verilerini takip etmek için /analitik-ve-yanitlar rehberine göz atın.

Mantık ve SonuçlarÖzelleştirme ve Ayarlar