Kategoriler
active arrowPazarlama Ortaklığı Programı
active arrowHesap
active arrowBaşlangıç
active arrowKampanya Oluşturucu
active arrowGelişmiş Tasarım Özelleştirme
active arrowE-posta Kampanyası Özelleştirme
active arrowSegmentasyon ve Hedefleme
active arrowAnaliz
active arrowShopify
active arrowE-posta Pazarlama ve CRM Entegrasyonları
active arrowWeb Sitesi Platformları ve CMS Entegrasyonları
active arrowPopup Formunuzu ve Gönderiminizi Link ile Nasıl Paylaşabilirsiniz?
active arrowPopupsmart HTML Element Nedir?
active arrowBoş Popup Şablonuyla Özelleştirilmiş Popup Nasıl Oluşturulur?
active arrowTam Ekran, Lightbox ve Floating Bar Popup Nasıl Oluşturulur?
active arrowFarklı Temalar ile İyi Tasarlanmış Kampanyalar Nasıl Oluşturulur?
active arrowPopup'ta Sütun ve Satır Yapıları Nasıl Verimli Kullanılır?
active arrowPopupsmart'ın Özelleştirme Adımını Keşfedin
active arrowPopup Stili Nasıl Ayarlanır?
active arrowÇok Adımlı Popup Nasıl Oluşturulur?
active arrowBaşarı Popup'ı Nedir? Nasıl Çalışır?
active arrowPopup'ıma Hangi Elementleri Ekleyebilirim?
active arrowPopup'a Farklı Yazı Tipleri Nasıl Eklenir?
active arrowForm Alanları Nasıl Önceden Doldurulur?
active arrowPopup Kampanyalarınıza Gizli Girdiler Nasıl Eklenir?
active arrowPopup'ınıza Yeni Öğeler Nasıl Eklenir ve Sürükle&Bırak Editörü Nasıl Kullanılır?
active arrowPopup'ıma Yeni Form Alanları Nasıl Eklenir?
active arrowPopup'ınıza Gizlilik Politikası Nasıl Eklenir?
active arrowPopup'ınıza Kupon Kodu Nasıl Eklenir?
active arrowPopup'ınıza Geri Sayım Aracı Nasıl Eklenir?
active arrowPopup'ınıza Animasyon Nasıl Eklenir?
active arrowPopupsmart ile Video Popup Nasıl Oluşturulur?
active arrowPopup'a Loto Oyunlaştırma Ögesi Nasıl Eklenir?
active arrowHata Ayıklama Modu Nasıl Çalışır?
active arrowÖnizleme Modu Nasıl Çalışır?
active arrowMasaüstü ve Mobil Görünümlerin Çalışma Yöntemi
active arrowAkıllı Etiketler Nasıl Kullanılır - Dinamik Metin Değiştirme
active arrowTeaser Popup Nedir? Teaser Nasıl Çalışır?
active arrowOtomatik Yanıtlayıcı E-posta Bildirimleri Nasıl Kurulur?
active arrowKişisel E-posta Bildirimleri Nasıl Kurulur?
active arrowKampanya Klasörleme Özelliği Nasıl Kullanılır?
active arrowPopup Kampanyası için A/B Testi Nasıl Oluşturulur?
active arrowPopupsmart'ta Buton ile JavaScript Fonksiyonları Nasıl Çalıştırılır?

Popupsmart HTML Element Nedir?

HTML Element, popup’ınızın içine doğrudan özel HTML, CSS ve JavaScript eklemenizi sağlar. Üçüncü parti bir widget (takvim, form vb.) embed etmek ya da Popupsmart’in mevcut elementleriyle oluşturulamayan özel bir yerleşim tasarlamak istediğiniz durumlar için tasarlanmıştır.

⚠️ Güvenlik notu: Buraya eklediğiniz herhangi bir JavaScript, web sitenizde çalışır. Yalnızca güvendiğiniz kaynaklardan aldığınız kodları yapıştırın.

HTML Element Ne Zaman Kullanılır?

Aşağıdaki ihtiyaçlarınız olduğunda HTML Element’i kullanabilirsiniz:

  • Üçüncü parti embed (takvim, form, canlı sohbet, yorum widget’ı vb.)
  • HTML/CSS ile oluşturulmuş özel bir modül
  • Script tag gerektiren başka bir platformdan alınan kod parçası
  • Cihaza özel embed’ler (masaüstü ve mobil için farklı markup)

Adım Adım: Popup’ınıza HTML Ekleme

1. Popup’ınıza HTML Element ekleyin

  • Popup’ınızı Customize (Özelleştir) görünümünde açın.
  • Content Elements (İçerik Elementleri) listesini bulun.
  • Popup'a eklemek için HTML Element’i seçin.

‍

Popup’ınıza HTML Element ekleyin

Eklendikten sonra, HTML element popup’ınızda düzenlemek için tıklayabileceğiniz bir blok olarak görünür.

2. HTML Editörü açın

  • Popup üzerindeki HTML Element’e tıklayın.
  • HTML Editor’a tıklayın.
HTML Düzenleyiciyi açın

Bu işlem, kodlarınızı yapıştırıp yönetebileceğiniz editör penceresini açar.

3. HTML’inizi (isteğe bağlı CSS/JS ile) yapıştırın

  • Kodunuzu editör alanına yapıştırın.
HTML Düzenleyici ile HTML’inizi (isteğe bağlı CSS/JS ile birlikte) yapıştırın

Genellikle şunları ekleyebilirsiniz:

  • HTML işaretleme kodları (div’ler, başlıklar, butonlar vb.)
  • Satır içi CSS (style özellikleri veya <style> blokları)
  • Üçüncü parti widget’lar tarafından gerekli olduğunda script etiketleri

İçeriği popup’ınıza uygulamak için Save & Close (Kaydet & Kapat) butonuna tıklayın.

İpucu: Üçüncü parti araçları embed ederken, sağlayıcının resmi “embed code”unu kullanın ve olduğu gibi yapıştırın.

4. Temiz bir uyum için Genişlik ve Yükseklik ayarlayın

Kodunuzu ekledikten sonra, elementin boyutlandırma kontrollerini ayarlayın:

Popupsmart builder ile temiz bir görünüm için HTML Element’in genişlik ve yüksekliğini ayarlayın
  • Genişlik (genellikle yüzde): Embed’in popup sütununu doldurmasını istiyorsanız %100 kullanın.
  • Yükseklik (genellikle piksel): İçerik kesiliyorsa yüksekliği artırın; özellikle formlar, takvimler ve çok adımlı widget’lar için önemlidir.

Yaygın boyutlandırma önerileri:

  • Kısa embed’ler (ikonlar, küçük widget’lar): 200–400px yükseklik
  • Formlar veya çok adımlı widget’lar: 500–900px yükseklik
  • Takvim / randevu widget’ları: Genellikle 600–800px yükseklik (sağlayıcıya göre değişebilir)

5. Önizleme ve test

Yayınlamadan önce:

  1. Popup’ı masaüstü ve mobilde gözden geçirin.
Popupsmart Builder’da masaüstü cihazlar için HTML’i önizleyin
Popupsmart Builder’da mobil cihazlar için HTML’i önizleyin
  1. Embed’in doğru şekilde yüklendiğini doğrulayın.
  2. Aşağıdakileri kontrol edin:
  • İçeriğin kesilmesi: Yüksekliği artırın.
  • Yatay kaydırma: Genişliği azaltın veya HTML’in responsive olduğundan emin olun.
  • Yavaş yükleme: Gereksiz script’leri kaldırın veya embed’i optimize edin.

6. Yayınlayın

Her şey doğru görünüyorsa, popup’ınızı her zamanki gibi yayınlayın.

Popüler Kullanım Senaryoları

Randevu / takvim aracı embed etme

  • Demo ve randevular için Calendly / booking widget’ları
  • En iyi uygulama: Takvimin kırpılmaması için yeterince yüksek bir yükseklik ayarlayın.

Dışarıdan form veya anket ekleme

  • Typeform, Tally, Google Forms, HubSpot embed kodları
  • Yerleşik elementlerin ötesinde form mantığına ihtiyaç duyduğunuzda idealdir.

Iframe ve özel widget’lar ekleme

  • Video embed’leri, interaktif hesaplayıcılar, yorum widget’ları
  • Genişliği %100 yapın ve yüksekliği widget’ın gereksinimlerine göre ayarlayın.

HTML/CSS ile özel yerleşimler oluşturma

  • İki sütunlu bölümler, ikon + metin blokları, özel rozetler
  • Popup içinde birebir marka stilinizi yansıtmak istediğinizde kullanışlıdır.

Özel script’ler ekleme (ileri seviye)

  • Script tag gerektiren üçüncü parti entegrasyonlar
  • Yalnızca kaynağa tamamen güvendiğiniz ve performansı test ettiğiniz durumlarda kullanın.

Sorun Giderme

İçerik kesiliyor

  • HTML Element’in Height (Yükseklik) değerini artırın.

Widget yüklenmiyor

  • Bazı sağlayıcılar embed etmeyi engelleyebilir veya belirli domain/ayarlar gerektirebilir.
  • Önce embed’in popup dışında, sitenizde doğru çalıştığını doğrulayın.

Popup yavaş hissettiriyor

  • Ağır script’leri azaltın, kullanılmayan embed’leri kaldırın veya mobilde daha basit bir versiyonla değiştirin.

En İyi Uygulamalar

  • Yalnızca güvenilir kodları yapıştırın (özellikle <script> içerenler).
  • HTML embed’lerini responsive tutun (mümkün olduğunca sabit piksel genişliklerinden kaçının).
  • Embed’in masaüstü ve mobil için farklı boyut veya yerleşim gerektirdiği durumlarda Desktop/Mobile versiyonlarını kullanın.
  • Kaydırma, dokunma davranışı ve yüklenme süresini doğrulamak için gerçek cihazlarda test edin.