Siteniz için bir lightbox popup oluşturmanın bir yolunu mu arıyorsunuz?
Bir lightbox popup, potansiyel müşteri kazanmak için inanılmaz derecede etkili olabilir. İkna etmek ve dönüştürmek için tasarlanmışlardır.
Ancak sıfırdan bir tane kodlamak gerçek bir baş belasıdır. Birincisi, açılır pencereyi oluşturmak için yeterli HTML, CSS ve Javascript bilgisine sahip olmanız gerekir, ayrıca ne zaman göstereceğinize dair tetikleyici kuralları da bilmeniz gerekir. Ardından, e-posta hizmeti sağlayıcınızla manuel bir entegrasyon oluşturmanız gerekir. Ve son olarak, gizlilik ve güvenlik sorunlarıyla uğraşmanız gerekir.
İyi haber: çok daha basit bir yol var.
Bu makalede, 10 dakikadan kısa sürede ve hiç kodlama yapmadan bir lightbox popup'ı nasıl başlatacağınızı göstereceğiz.
Hadi başlayalım.
Lightbox Popup Nedir?
Bir lightbox popup, sinematik bir efektle açılan bir kayıt formudur. Bir lightbox açıldığında, arka plandaki sitenin geri kalanını bulanıklaştırır. Bu şekilde, tüm odağınız popup'ın üzerinde olur.

Kökeninde, lightbox konsepti dış mekan reklamcılığından gelmektedir:

Ve sonra, bazı geliştiriciler bunun gerçekten harika bir efekt olduğunu düşündüler ve web varlıklarında aynı efekti yeniden oluşturmak için bir Javascript kütüphanesi oluşturdular. Daha sonra, lightbox popup'larını kullanma fikri ortaya çıktı.
Lightbox Popup'ları Neden İşe Yarar
Lightbox popup'ları, geleneksel bir e-posta kayıt formundan daha fazla e-posta toplar.
Peki neden işe yarıyorlar?
Lightbox popup'larının neden bu kadar iyi çalıştığının ana nedenlerine hızlıca bir göz atalım.
#1. Lightbox Popup'ları Açık Bir Eylem Çağrısı Sunar
Çoğu insan, müşterilerine çok fazla seçenek vermenin harika bir şey olduğuna inanır.
Ancak bu pek doğru değil.
Doğrudan dönüşümler arıyorsanız, hedef kitlenizin odaklanabileceği tek, net bir eylem çağrısı istersiniz. Bu şekilde, kullanıcının zihninden tüm dikkat dağıtıcı unsurları kaldırırsınız. Ve lightbox popup'ları, temel teklifinizi vurgulamak ve insanların eylem çağrınıza odaklanmasını sağlamak için harika bir iş çıkarır.
Yani, doğal olarak, dönüşüm oranları oldukça harika.
#2. Lightbox Popup'ları Göz Ardı Edilemez
Lightbox popup'ları tüm ekranı kaplar ve diğer her şeyi bulanıklaştırır. Bu yüzden onları görmezden gelmek pratikte imkansızdır.
Bu, özellikle animasyonlu olduklarında geçerlidir:

Elbette, popup'larınızın müdahaleci olmadığından emin olmalısınız. Ve bunu, sitenizde farklı popup'ları ne zaman tetikleyeceğinizi özelleştirerek yapabilirsiniz. Hedef kitleniz kesintiden rahatsız olmadığı sürece, onları çok kolay bir şekilde ikna edip dönüştürebilirsiniz.
#3. Lightbox Popup'ları Kişiselleştirilmiş Tetikleyicilere Sahiptir
Tüm web ziyaretçilerinize aynı teklifi göstermemelisiniz. Bir e-ticaret mağazası işletiyorsanız, yeni ve geri dönen müşteriler için çok farklı tekliflere ihtiyacınız olacaktır.
Yeni bir müşteri için bir hoş geldiniz kampanyası tetikleyebilirsiniz:

Ancak geri dönen bir müşteri için onlara farklı bir teklif göndermek isteyebilirsiniz:

Her iki teklifin de indirim miktarlarının tam olarak aynı olduğuna dikkat edin. Ancak teklifin sunulma şekli büyük ölçüde farklı. Ve bu çok önemli çünkü lightbox popup'ları tiyatro efektleri için tasarlanmıştır. Bu nedenle, daha kişiselleştirilmiş bir yaklaşım kesinlikle çok daha iyi sonuçlar almanızı sağlayacaktır.
Kullanıcının içerik tercihlerine göre teklifi kişiselleştirebilirsiniz bile. Akşam yemeği tarifleri hakkında bir makale okuyorlarsa, arabalar için bir teklif göstermek yerine akşam yemeği tarifleriyle ilgili bir teklif göstermek daha mantıklıdır.

#4. Lightbox Popup'ları Ayrılan Ziyaretçileri Yakalayabilir
Light boxlar, açılır pencerenizi görüntülemenin yalnızca bir yöntemidir. Bu nedenle, tetikleyiciyi istediğiniz ölçüde özelleştirmenizi engelleyen hiçbir şey yoktur. Çıkış niyeti ışık kutusu açılır pencereleri oluşturmanızı öneririz.

Ziyaretçileriniz web sitenizden çıkmaya çalıştığında çıkış niyeti açılır pencereleri tetiklenir. Sonuç olarak, aksi takdirde sitenizi terk etmiş olacak çok sayıda ziyaretçiyi tutarsınız. Bu nedenle, site terk etme sorunundan muzdaripseniz, kesinlikle bir çıkış niyeti ışık kutusu açılır penceresi oluşturmalısınız.
Işık Kutusu Açılır Penceresi Nasıl Oluşturulur
Artık ışık kutusu açılır penceresinin ne olduğunu ve neden bir tane oluşturmak isteyeceğinizi anladığınıza göre, ışık kutusu açılır penceresini nasıl oluşturursunuz? Açılır pencerelerinizi oluşturmak için OptinMonster kullanmanızı öneririz.
OptinMonster, dünyanın 1 numaralı dönüşüm araç setidir ve biz de kendimiz kullandık. OptinMonster, güçlü ve dönüşüm sağlayan pop-up'lar oluşturmayı çok basit hale getirir. Ve hiç kodlama kullanmanız gerekmez.
Hatta tam bir OptinMonster incelemesi yazdık.
Buna göz atabilir veya kampanyanıza hemen başlayabilirsiniz. Tek yapmanız gereken OptinMonster'a kaydolmak ve bu makalenin geri kalanını takip etmek.
Adım #1: Bir Kampanya Oluşturun
OptinMonster kontrol panelinize gidin ve Oluştur düğmesine basın:

Işık Kutusu Açılır Penceresi kampanya türünü seçin:

Ardından, bir kampanya şablonu seçin. İstediğiniz şablonu seçebilirsiniz, ancak bu eğitim için Basit kampanya türüyle devam edeceğiz.

Şimdi kampanyanıza bir ad verin. Unutmayın, bu kampanya adı sizin içindir ve muhtemelen farklı hedefleme seçenekleriyle bir sürü bu tür açılır pencere oluşturacaksınız. Bu nedenle, kampanyaya anlamlı bir ad verin, yoksa daha sonra gerçekten kafanız karışır.
Ayrıca, planınıza bağlı olarak OptinMonster'ı birden fazla sitede de kullanabilirsiniz. Bu nedenle, kampanyanızın nerede gösterilmesini istediğinizi de seçin.

İşiniz bittiğinde Oluşturmaya Başla düğmesine basın.
Adım #2: Işık Kutusu Açılır Pencerenizi Düzenleyin
OptinMonster ile sürükle ve bırak görsel açılır pencere oluşturucuya sahip olursunuz. Kampanyanızın oluşturulmasını tamamladığınızda, açılır pencerenizin en küçük ayrıntılarını bile düzenleyebileceksiniz. Açılır pencere başlığınızı düzenleyerek başlayın:

Buradaki en inanılmaz şey, düzenlemek istediğiniz herhangi bir metne tıklayıp satır içi değiştirebilmenizdir. Açılır pencerede bir formu doldurmaya veya herhangi bir HTML kodu düzenlemeye gerek yoktur.
Ardından, net bir harekete geçirici mesaj oluşturmak için düğme metninizi ve görünümünü ayarlayın:

Açılır pencerenizin görünümünden memnun kaldığınızda, daha gelişmiş ayarlara geçebilirsiniz.
Adım #3: Görüntüleme Kurallarını Ayarlayın
Görüntüleme kuralları, kampanyanızın sitenizde ne zaman görüneceğini ve kimin göreceğini tanımlamak için kullanılır.

Önerimiz, tetikleyici koşulu çıkış amacına değiştirmektir:

Eylem'i seçmek için Sonraki Adım'a tıklayın. Burada, Kampanya görünümünü göster seçeneğini Optin Görünümü olarak ayarlamanızı, MonsterEffect ile göster seçeneğini istediğiniz herhangi bir giriş animasyonuna ayarlamanızı ve açılır pencereniz için ses efekti çal seçeneğini istediğiniz herhangi bir ses efektine ayarlamanızı öneririz.

Ardından, Sonraki Adım düğmesine tıklayın. Ayarlarınızın tam kapsamını Özet sekmesinde görebilirsiniz.
Adım #4: E-posta Entegrasyonunuzu Kurun
Bir sonraki adım e-posta entegrasyonunuzu kurmaktır. Entegrasyonlar sekmesinden Yeni Entegrasyon Ekle'ye tıklayın ve e-posta hizmeti sağlayıcınızı seçin:

Eğer henüz bir e-posta hizmeti sağlayıcınız yoksa, e-posta pazarlamanız için Drip kullanmanızı öneririz.
Adım #5: Işık Kutusu Açılır Pencerenizi Yayınlayın
Yeni bir kampanya oluşturduğunuzda, varsayılan olarak Duraklatılmış durumdadır.
Yayın Seçenekleri'ni görmek için üst menüden Yayınla sekmesine gidin. Ardından durumu Yayınla olarak ayarlayın ve web sitesi platformunu seçin:

Bir WordPress siteniz varsa, OptinMonster eklentisi geri kalan kurulumu otomatik olarak halleder. Shopify ve BigCommerce için de aynıdır. Diğer herhangi bir site için Herhangi Bir Site'ye tıklayın ve ekleme kodunu web sitenizin başlığına yapıştırın:

Ve işte bu kadar!
BONUS: Açılır Pencerenizden Anlık Bildirim Aboneleri Toplayın
Anlık bildirimler, web sitesi trafiğinizi ve etkileşiminizi otomatik olarak artırmanıza yardımcı olur. Web anlık bildirimleri, oturumunu terk etmiş veya web sitesinden ayrılmış kullanıcıları geri getirmenin etkili bir yoludur. Yeni içerik, teklifler veya etkinliklerden onları haberdar ederek kullanıcıları yeniden etkileşim kurmaya yardımcı olur.
Anlık bildirimler ayrıca, kullanıcıları bir makale okumak, bir satın alma işlemini tamamlamak veya bir etkinliğe katılmak gibi belirli eylemleri gerçekleştirmeye teşvik eden net ve eyleme geçirilebilir mesajlar ve harekete geçirici mesaj düğmeleri içerir.
Mesajların her kullanıcı için alakalı ve değerli olmasını sağlamak amacıyla anlık bildirimleri kullanıcıların tercihlerine, davranışlarına ve ilgi alanlarına göre uyarlayabilirsiniz. Kullanıcıların web anlık bildirimlerini almayı kabul etmesi gerekir. Bu, mesajların spam olarak görülmemesini ve kullanıcıların izniyle gönderilmesini sağlar.
En havalı yanı, e-posta açılır pencerenizden anlık bildirim aboneleri toplayabilmenizdir. Yani, sitenizi ziyaret edenler e-posta kimliklerini vermekten kaçınsalar bile, onları yine de web anlık bildirimlerini kullanarak abone olmaya ikna edebilirsiniz.
Ve üzerinde çalışacağımız şey bu.
Adım #1: Bir Anlık Bildirim Hizmeti Seçin
Web anlık bildirimleri göndermek için PushEngage kullanmanızı öneririz.
İşte PushEngage ile elde ettiklerinizin hızlı bir özeti:
- Yüksek dönüşüm sağlayan otomatik kampanyalar
- Birden çok hedefleme ve kampanya zamanlama seçenekleri
- Hedef izleme ve gelişmiş analizler
- Akıllı A/B testi
- Özel Bir Başarı Yöneticisi
Ücretsiz başlayabilirsiniz, ancak işletmenizi büyütme konusunda ciddiyseniz, ücretli bir plan satın almalısınız. Ayrıca, herhangi bir anlık bildirim hizmeti satın almadan önce, anlık bildirim maliyetleri hakkındaki bu kılavuza göz atmalısınız.
Ve bir çevrimiçi mağaza işletiyorsanız, PushEngage ayrıca otomatik e-ticaret push bildirimleri oluşturmanıza yardımcı olarak satışlarınızı artırmanıza yardımcı olur.
İşletmeniz için trafik, etkileşim ve satış oluşturmak istiyorsanız, PushEngage'in tartışmasız en iyi seçenek olduğunu göreceksiniz. Ve bütçeniz kısıtlıysa, anlık bildirimlerinizle biraz yaratıcı olabilirsiniz.
Adım #2: Açılır Pencerenize Bir HTML Bloğu Ekleyin
Öncelikle, OptinMonster'daki kenar çubuğundan açılır pencerenize bir HTML bloğu ekleyin.

Burada anlık bildirim abonelerini toplamak için kodu ekleyeceğiz. Öncelikle, tıklanabilir bir düğme oluşturmak için aşağıdaki kodu yapıştırın:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications Instead</button>
Kodu, HTML ekleyebileceğinizi söylediği yere yapıştırın:

Bu noktada, açılır pencerenizde e-posta abonelik düğmesinin hemen altında, "Anlık Bildirimler Yoluyla Güncellemeleri Alın" yazan yeni bir düğme görmelisiniz:

Elbette, daha çekici görünmesini sağlamak için stillerle oynayabilirsiniz. Ardından, düğmeye tıklandığında anlık bildirim abonelerini toplayacağız.
Adım #3: PushEngage'dan Abonelik Kodunu Alın
PushEngage ana sayfasına gidin ve Başlayın düğmesine tıklayın:

Ardından, PushEngage'i denemek için ücretsiz planı seçmek isteyeceksiniz veya işletmenizi büyütme konusunda ciddiyseniz ücretli bir planı seçin. Ücretli planlar daha fazla kampanya seçeneği ve daha büyük abone listeleri oluşturma olanağı sunar.
PushEngage kontrol panelinizde, Site Ayarları » Site Detayları bölümüne gidin ve Kurulum Talimatları İçin Buraya Tıklayın düğmesine tıklayın. Herhangi Bir Site altında, kurulum kodunuzu alacaksınız:

UYARI: Kontrol panelinizden aldığınız kodu kopyalamanız gerekir. Kod, her PushEngage kullanıcısı için benzersizdir. Görüntüdeki kodu kopyalayarak anlık bildirim aboneleri toplayamazsınız.
Kodunuzu PushEngage kontrol panelinizde aldıktan sonra, ikinci betiği alın ve ona ek kod ekleyin. Nihai kodunuz şuna benzer olmalıdır:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>
Adım #4: Abonelik Kodunuzu Açılır Pencerenizdeki HTML Bloğuna Ekleyin
Bu kodu OptinMonster'daki HTML bloğuna ekleyin ve hazırsınız!

İşiniz bittiğinde, Kaydet ve Yayımla düğmelerine dokunmanız yeterlidir.
Web sitenizi kontrol ederseniz, şimdi ışık kutusu açılır penceresinin hem e-posta hem de anlık bildirim abonelerini topladığını görmelisiniz:

Ve işte bu kadar, açılır pencerenizden anlık bildirim aboneleri topluyorsunuz. Anlık bildirimler kendi açılır pencere modalleriyle birlikte gelir. Ancak özelleştirmeleri biraz zordur. Bu nedenle, OptinMonster kullanarak güzel açılır pencereler oluşturabilir ve ardından bunları anlık bildirim açılır pencereleriniz olarak kullanabilirsiniz.
Bir Işık Kutusu Açılır Penceresi Oluşturduktan Sonra Ne Yapmalı
Bu kadar, millet!
Bu makalenin yardımcı olup olmadığını bize bildirin. Sitenizde açılır pencereler oluşturmak, trafiğinizi e-posta abonelerine ve gerçek işletme potansiyellerine dönüştürmenize yardımcı olabilir. Ve hemen ışık kutusu açılır pencereleri oluşturmaya başlamanızı şiddetle tavsiye ederiz.
Ve trafiğinizi artırmak için uygun fiyatlı bir yol arıyorsanız, anlık bildirimleri kullanmanızı öneririz. Anlık bildirimler, daha fazla tekrar eden trafik ve site etkileşimi getirmenize yardımcı olabilir. Ayrıca satış üreten otomatik anlık bildirim kampanyaları da oluşturabilirsiniz.
İkna olmadınız mı? Bu kaynaklara göz atın:
- Müşteri Etkileşimini Artırmak İçin 7 Akıllı Strateji
- Anlık Bildirimler Etkili mi? 7 İstatistik + 3 Uzman İpucu
- Terk Edilmiş Sepet Anlık Bildirimleri Nasıl Ayarlanır (Kolay Eğitim)
Anlık bildirim kampanyalarınızı oluşturmak için PushEngage kullanmanızı öneririz. PushEngage, dünyanın 1 numaralı anlık bildirim yazılımıdır. Bu nedenle, henüz yapmadıysanız, bugün PushEngage ile başlayın!

