Açılır pencere butonu

Neredeyse her sitede bir sohbet balonu var, ama sohbet edecek kimse gerçekten çevrimiçi değil. Açılır pencere butonu size işin güzel kısmını verir: bir sohbet ekibi tutmadan, iletişime geçmek için her zaman görünen dostça bir yol. Tek bir script etiketi, sitenize yüzen bir buton ekler; ona tıklandığında Formstork formunuz bir açılır pencerede açılır.

<script
  src="https://app.formstork.com/js/widget-v1.js"
  defer
  data-form="YOUR_FORM_ID"
></script>

YOUR_FORM_ID yerine formunuzun access key’ini yazın. Formun kendisi, form oluşturucuda tasarladığınız barındırılan formdur; önce orada yayımlayın, ardından bu parçacığı Builder → Share bölümünden kopyalayın.

Seçenekler

Her şey, script etiketindeki data- öznitelikleriyle yapılandırılır:

<script
  src="https://app.formstork.com/js/widget-v1.js"
  defer
  data-form="YOUR_FORM_ID"
  data-color="#0d9488"
  data-position="left"
  data-label="Send feedback"
></script>

Formun kendi tasarımı (alanları, başlığı, vurgu rengi, logosu, çok adımlı yapısı) form oluşturucudan gelir; bu yüzden her zaman orada yayımladığınızla eşleşir.

Tarifler

Kopyalayıp yapıştırabileceğin birkaç varyasyon. Kendi access key’ini yerleştir.

Destek butonu, sol altta, teal

<script
  src="https://app.formstork.com/js/widget-v1.js"
  defer
  data-form="YOUR_FORM_ID"
  data-color="#0d9488"
  data-position="left"
  data-label="Yardım al"
></script>

Markana uyan geri bildirim butonu

<script
  src="https://app.formstork.com/js/widget-v1.js"
  defer
  data-form="YOUR_FORM_ID"
  data-color="#f97316"
  data-label="Geri bildirim gönder"
></script>

Kendi linkinden veya CTA’ndan aç

Script’i bir kez ekle, sonra aşağıdaki JavaScript API ile herhangi bir öğeden popup’ı aç:

<button onclick="Formstork.open()">Satışla iletişime geç</button>

Belirli bir gecikmeden sonra otomatik aç

<script>
  setTimeout(function () {
    if (window.Formstork) Formstork.open();
  }, 8000); // yüklemeden 8 saniye sonra
</script>

JavaScript API

Script, programatik denetim için ufak bir global sunar:

Formstork.open();
Formstork.close();
Formstork.toggle();

Formu kendi bağlantılarınızdan veya butonlarınızdan açmak için kullanışlıdır:

<a href="#" onclick="Formstork.open(); return false;">Contact us</a>

Davranış

• Otomatik boyutlandırma: açılır pencere, formunuzun içeriğine sığacak şekilde büyür ve küçülür.
• Mobil: küçük ekranlarda açılır pencere tam ekran açılır; yüzen buton, onu kapatmak için üstte kalır.
• Klavye: buton odaklanılabilir, Escape açılır pencereyi kapatır ve tüm form alanları klavyeyle erişilebilirdir.
• Niyetle tembel yükleme: form sayfa açılışında yüklenmez, ilk render’a ağırlık katmaz. Biri butonun üzerine gelince, odaklanınca ya da dokununca sessizce ön-yüklenir; böylece tıkladığında anında açılır, spinner yok, zıplama yok.
• Spam ve CAPTCHA: formunuzda yapılandırılmış her şey (honeypot, spam filtreleme, CAPTCHA) açılır pencere içinde de çalışır.

Sürümleme

URL’deki v1, ana sürümdür. Yamalar ve iyileştirmeler, kırıcı değişiklikler olmadan aynı URL’ye gelir; kırıcı bir değişiklik widget-v2.js olarak yayımlanır.