Butona Tıklamayla Açılan Popup Nasıl Oluşturulur?

Kendiliğinden açılan popup'lar kolayca kapatılır: desteklediğimiz popup'larda, popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor (Popupsmart popup kıyaslaması 2026). Popup'ı ziyaretçi kendisi açtığında, etkileşim de onun zamanlamasıyla olur.

Bu rehberde, kullanıcı bir butona tıklayınca açılan popup oluşturmanın üç yolu var: kodsuz yol, elle kodlanmış HTML popup ve teaser.

Popupsmart'tan Kısa Özet

Etkileşim düşük ya da hemen çıkma oranı yüksek mi? Bu yazı, kullanıcıların bir butonla tetiklediği popup'ları oluşturmanın üç yolunu gösteriyor. Popup'ı kendiniz yazmadan Popupsmart'ın Tıklamaya Duyarlı Hedeflemesini kuracak, <dialog> öğesiyle erişilebilir bir HTML popup kodlayacak ya da bir teaser ekleyeceksiniz. Popupsmart'ın 2026 kıyaslamasının popup içindeki buton metni ve form alanları hakkında ne söylediğini de göreceksiniz.

Neden Buton Tıklamasıyla Açılan Popup Kullanılmalı?

Sorun: Rahatsız Eden Popup'lar Ziyaretçiyi Uzaklaştırır

Geleneksel popup'lar yanlış anda görünüp kullanıcı deneyimini bozar ve ziyaretçiyi uzaklaştırır. Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %40,5'i ziyaretçinin popup'ı kapatmasıyla bitiyor (tüm gösterimler birleştirilerek, Şubat 2025 - Eylül 2026, kapatma takibinin başladığı tarihten beri). Peki kitlenizi bıktırmadan dikkatini nasıl çekersiniz?

Çıkmaz: Kaçan Fırsatlar ve Zayıf Etkileşim

Popup'lar gezinmeyi böldüğünde kullanıcının akışı kesilir; hemen çıkma artar, dönüşüm kaybolur. Tamamlanmamış işlerin harekete geçirdiği Zeigarnik etkisi, kullanıcı zorlandığını hissederse işlemez.

Üstelik bu karar çok hızlı veriliyor: popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor.

Çözüm: Tıklamayla Açılan Popup'lar Kontrolü Kullanıcıya Verir

Tıklamayla açılan popup'ta, ne zaman etkileşime gireceğine ziyaretçi karar verir. Kontrol ondadır. Kıyaslamamızda tıklamayla açılan popup'lar için ayrı bir kırılım yok, bu yüzden onlar için bir dönüşüm oranı vermiyoruz; kıyaslamanın ölçtüğü şey, istenmeyen bir popup'ın ne kadar çabuk kapatıldığı.

• İki aşamalı bir kayıt akışıdır. Ziyaretçi önce net bir eylem çağrısı taşıyan butona tıklar, popup ancak ondan sonra açılır.
• Zeigarnik etkisi burada sizin lehinize çalışır. Butona tıklamak bir işi başlatır ve insanlar başladıkları işi bitirmek ister; yarım kalan iş merak uyandırır.
• Bu ilk etkileşim basit bir ilgiden fazlasını ifade eder: ziyaretçi popup'ı kendisi istedi, dolayısıyla içindeki form bir kesinti değil, bir yanıttır.
• Popup'ı kullanıcı başlattığı için deneyimini de kendisi şekillendirir ve daha az rahatsız olur.
• Butonu, niyetin zaten olduğu yere koyabilirsiniz. Böylece eylem çağrısı çevresindeki sayfayla uyumlu olur.
• Tıklamayla açılan popup'lar masaüstünde ve mobilde çalışır; kıyaslamamızda popup gösterimlerinin %63'ü mobilde gerçekleşiyor, bu yüzden butonu ve popup'ı önce telefonda test edin.

💡 İpucu: Butonları kullanıcıların en çok etkileşime girdiği yerlere, örneğin çok ziyaret edilen CTA'ların veya ürün sayfalarının yakınına yerleştirin.

Bir Butona Tıklamayla Açılan Popup Nasıl Oluşturulur (3 Yöntem)

Aşağıdaki her yöntem aynı üç adımı izler: popup gizli bekler, tıklama tek bir fonksiyonu çalıştırır ve popup açılır. Değişen, bu fonksiyonu kimin yazdığıdır: Popupsmart, siz ya da buton görevi gören bir teaser.

1. Tıklamaya Duyarlı Hedefleme ile Butonla Açılan Popup Nasıl Oluşturulur?

Tıklamayla açılan popup formumuzu oluşturmak için Popupsmart'ı kullanacağız. Bu kodsuz yoldur: popup'ı oluşturucuda tasarlarsınız, dokunduğunuz tek kod butonunuzdaki bir satırdır.

Herhangi bir web sitesinde, örneğin WordPress veya Shopify üzerinde bir butona tıklayarak tıklamayla açılan popup formları oluşturabilir veya herhangi bir popup gösterebilirsiniz. Popupsmart yardım merkezine göre tıklama özelliği, web sitenizin JavaScript ve HTML'i destekleyen her yerinde çalışır.

Popupsmart, satış ve müşteri kazandıran modern popup'lar oluşturmak için bir popup oluşturucudur.

Hazır popup tasarımları ve kitle hedefleme içinde gelir, yani boş bir sayfadan başlamazsınız.

Evet, bir buton oluşturup Popupsmart kampanyanızı o butona tek tıklamayla başlatabilirsiniz. Adımlar şöyle.

Adım 1: Popupsmart Hesabı Oluşturun.

Popupsmart Kayıt sayfasına gidin. Popupsmart'ın ücretsiz bir planı var.

Adınız, soyadınız ve e-posta adresinizle giriş yapabilirsiniz.

Popupsmart hesabınızı web sitenizle entegre etmek için sol kenar çubuğundaki Embed kodunu kullanabilirsiniz.

Embed kodunuzu kopyalayıp web sitenizin kaynak koduna yapıştırın.

Daha net bir süreç için, embed kodunu sitenize nasıl yerleştireceğinizi anlatan yardım makalesini inceleyebilirsiniz.

Ya da Popupsmart hesabınızı Google Tag Manager ile kurma seçeneğiniz de var.

Bu ilk popup kampanyanızsa, rehberin başındaki video, kurulumun tamamını adım adım gösteriyor.

Adım 2: Yeni Bir Kampanya Oluşturun.

Kontrol panelinizi görüntüledikten sonra, “+ Yeni Kampanya” gibi bir buton vardır. Tıklayın.

Ardından, kampanyanızı adlandırın ve değişiklikleri kaydedin.

Adım 3: Bir Popup Şablonu Seçin.

Kampanyanızla ilerlerken, seçebileceğiniz birçok farklı şablon bulunur.

Önceden şablonları görmek isterseniz, şimdi Popupsmart Playbook'a göz atabilirsiniz.

Aksi takdirde, kampanyanın içinde ilk iş bir şablon seçmek olur.

Sıfırdan başlamayı mı tercih edersiniz? Birkaç boş popup şablonu da var.

Boş bir şablon seçip tamamen kişiselleştirebilirsiniz.

Adım 4: Popup Kampanyanızı Kişiselleştirin.

1. ve 2. adımlarla, popup gövdenizi kişiselleştirip dilediğiniz şekilde stilize edebilirsiniz.

Popupsmart öğelerini eklemek için kontrol edebilirsiniz.

Kampanyayı, ulaşmak istediğiniz ziyaretçilere göre böyle şekillendirirsiniz.

Kişiselleştirme adımı ve stil adımı birlikte çalışır, ama her biri popup'ın farklı bir kısmıyla ilgilenir.

Adım 5: Segment Adımında ‘Tıklamaya Duyarlı Hedefleme’yi Ekleyin.

Segment adımına gittiğinizde “Segmenti Düzenle”ye, ardından “Kullanıcı Davranışı” altında “Kullanıcı davranışı hedeflemesi ekle”ye tıklayın ve “Tıklamaya Duyarlı Hedefleme”nin yanındaki “Ekle”ye basın. Açmak için “Etkinleştir” kutusunu işaretleyin.

“Tıklamaya Duyarlı Hedefleme” açıkken popup'ınızı bir buton tıklaması açar. Popup'ın yalnızca tıklamayla açılmasını istiyorsanız “Diğer tüm hedeflemeleri devre dışı bırak” kutusunu da işaretleyin: diğer tüm hedefleme kuralları durur ve buton tek giriş yolu olur.

Adım 6: Web Sitenize Özel Bir Kod Ekleyin.

Hedeflemeyi etkinleştirmek için bir adım kaldı. Şu kodu web sitenizin kaynak koduna ekleyin:

<button onclick="window.ps.show({ id: xxxxxx });">Open It</button>

ID yerine, Tıklamaya Duyarlı Hedefleme'de görünen kendi ID'nizi yazın.

“Open It” metnini kampanyanız neye ihtiyaç duyuyorsa ona göre değiştirin. İndirim popup'ı ile bülten popup'ı aynı buton metnini kullanmamalı.

Kod bir <button> ya da <div> öğesinin tıklamasına eklenir. href içeren bir <a> etiketine eklemeyin: bağlantı ziyaretçiyi başka bir sayfaya götürür ve popup hiç görünmez.

<!-- Çalışır -->
<button onclick="window.ps.show({ id: xxxxxx });">%10 indirim al</button>
<div onclick="window.ps.show({ id: xxxxxx });">%10 indirim al</div>

<!-- Çalışmaz: bağlantı önce sayfadan çıkar -->
<a onclick="window.ps.show({ id: xxxxxx });" href="/hakkimizda">Hakkımızda</a>

Temanız ya da sayfa oluşturucunuz butonun HTML'ini düzenlemenize izin vermiyorsa, butona bir sınıf verin (burada open-offer) ve aynı çağrıyı, butondan sonra yerleştirdiğiniz bir script ile CSS seçici üzerinden bağlayın. Bu, belgelenmiş çağrının etrafındaki düz JavaScript'tir; ayrı bir Popupsmart ayarı değildir:

<script>
  document.querySelectorAll(".open-offer").forEach(function (button) {
    button.addEventListener("click", function () {
      window.ps.show({ id: xxxxxx });
    });
  });
</script>

Tüm ayrıntılar için Popupsmart yardım merkezinde Tıklamaya Duyarlı Hedefleme sayfasına bakın.

Adım 7: Kampanyanızı Kaydedin ve Yayınlayın.

Segmentasyon hazır olunca kampanyayı kaydedip ilerleyin.

Yayınlama adımında, kampanya yayına çıkmadan önce detaylara son bir kez bakarsınız.

Hepsi bu kadar. Butonunuza tıklayın, popup açılsın.

2. HTML ile Butonla Açılan Popup Nasıl Yapılır?

İkinci yöntemimiz, bir HTML butonuyla açılan bir popup oluşturmaktır.

Aşağıda adımları ve ihtiyacınıza, stilinize göre uyarlayabileceğiniz buton aracılığıyla açılan popup HTML kodu örneklerini bulacaksınız. Örnek, bugün tüm güncel tarayıcıların desteklediği HTML <dialog> öğesini kullanıyor. showModal() ile çağrıldığında erişilebilirliğin zor kısmını sizin yerinize yapar: popup'ı sayfanın üstüne alır, sayfanın geri kalanını etkisiz hale getirir, klavye odağını içeri taşır ve Escape ile kapanır.

Adım 1: Popup için temel HTML yapısını kurarak başlayın.

HTML iki şeyi tutar: popup'ı tetikleyen butonu ve popup'ın kendisini (biz buna modal diyeceğiz).

Bu popup için bir kimlik belirterek bir <dialog> öğesi oluşturun. Bu öğenin içine, popup'ta göstermek istediğiniz içerikleri (metin, resim veya formlar gibi) ekleyin.

<!-- Popup'ı açan buton -->
<button type="button" id="open-popup" aria-haspopup="dialog">%10 indirim al</button>

<!-- Popup -->
<dialog id="signup-popup" aria-labelledby="signup-popup-title">
  <div class="popup-body">
    <form method="dialog">
      <button class="popup-close" aria-label="Kapat">&times;</button>
    </form>
    <h2 id="signup-popup-title">Kodunuz bir adım uzakta</h2>
    <p>E-postanızı girin, kodu hemen gönderelim.</p>
    <form action="/subscribe" method="post">
      <label for="popup-email">E-posta adresi</label>
      <input id="popup-email" name="email" type="email" autocomplete="email" required autofocus>
      <button type="submit">Kodumu gönder</button>
    </form>
  </div>
</dialog>

<form method="dialog"> içindeki bir buton popup'ı JavaScript olmadan kapatır. autofocus, popup açıldığında klavye odağını e-posta alanına gönderir; aria-labelledby ise ekran okuyuculara popup'ın adını verir.

Adım 2: Ardından, modal'a stil vermek için biraz CSS ekleyin. Bu CSS popup'ı ortalar, arkasındaki sayfayı karartır ve kısa bir giriş animasyonu ekler.

Popup'a, göze hoş gelecek ve sitenizin tasarımına uyacak bir stil verin.

CSS kullanarak popup'ın pozisyonunu, boyutunu, renklerini ve tipografi ayarlarını yapın. Animasyon ya da geçiş efekti isteğe bağlıdır. Tarayıcı kapalı bir <dialog> öğesini zaten gizler, bu yüzden display: none gerekmez.

CSS kodunuz şöyle görünebilir:

/* Popup kutusu (tarayıcı modal dialog'u ortalar) */
#signup-popup {
  width: min(90vw, 420px);
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
/* Arkadaki karartılmış sayfa */
#signup-popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.popup-body {
  position: relative;
  padding: 32px;
}
/* Kapat butonu */
.popup-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
/* Popup açıkken arkadaki sayfanın kaymasını durdur */
body:has(dialog[open]) {
  overflow: hidden;
}
/* Animasyon, yalnızca azaltılmış hareket istemeyen ziyaretçiler için */
@media (prefers-reduced-motion: no-preference) {
  #signup-popup[open] {
    animation: popup-in 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

Adım 3: Son olarak, buton tıklandığında popup'ın açılması için JavaScript kullanın.

Buton tıklama olayı için bir olay dinleyici oluşturun ve bu dinleyiciyle popup'ı showModal() ile açın.

JavaScript ile, buton tıklatıldığında popup'ı açan ve kullanıcı popup'ın dışına tıkladığında kapatan bir işlevsellik ekleyebilirsiniz. Escape ve × butonu bu kod olmadan da çalışır:

// Popup'ı ve onu açan butonu al
const popup = document.getElementById("signup-popup");
const openButton = document.getElementById("open-popup");

// Kullanıcı butona tıklayınca popup'ı aç
openButton.addEventListener("click", function () {
  popup.showModal(); // odak içeri geçer; Escape kapatır
});

// Kullanıcı popup'ın dışındaki karartılmış alana tıklayınca kapat
popup.addEventListener("click", function (event) {
  if (event.target === popup) {
    popup.close();
  }
});

// Popup kapanınca odağı onu açan butona geri ver
popup.addEventListener("close", function () {
  openButton.focus();
});

Dışarı tıklama kontrolü, .popup-body kutunun tamamını kapladığı için çalışır: popup'ın içine yapılan tıklama gövdeye ya da içeriğe düşer, yalnızca arka plana yapılan tıklama hedef olarak <dialog> öğesinin kendisini bildirir. Güncel tarayıcılar kapanışta odağı açan butona zaten geri verir; son dinleyici bunu eski tarayıcılar için açık hale getirir.

Sonuçta, istediğiniz gibi stil verip canlandırabileceğiniz bir popup elde edersiniz. Yapıyı HTML kurar, görünüşü ve hareketi CSS üstlenir, açıp kapatma işini JavaScript yapar.

Buradan sonra popup'ınıza gereken içeriği ve stili ekleyin.

Hepsi bir araya gelince, buton ile açılan popup HTML kodunuz şöyle görünür:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Butona Tıklayınca Açılan Popup Örneği</title>
  <style>
    #signup-popup {
      width: min(90vw, 420px);
      padding: 0;
      border: none;
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }
    #signup-popup::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }
    .popup-body {
      position: relative;
      padding: 32px;
    }
    .popup-close {
      position: absolute;
      top: 8px;
      right: 12px;
      border: none;
      background: none;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }
    body:has(dialog[open]) {
      overflow: hidden;
    }
    @media (prefers-reduced-motion: no-preference) {
      #signup-popup[open] {
        animation: popup-in 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      }
    }
    @keyframes popup-in {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }
  </style>
</head>
<body>
  <!-- Popup'ı açan buton -->
  <button type="button" id="open-popup" aria-haspopup="dialog">%10 indirim al</button>

  <!-- Popup -->
  <dialog id="signup-popup" aria-labelledby="signup-popup-title">
    <div class="popup-body">
      <form method="dialog">
        <button class="popup-close" aria-label="Kapat">&times;</button>
      </form>
      <h2 id="signup-popup-title">Kodunuz bir adım uzakta</h2>
      <p>E-postanızı girin, kodu hemen gönderelim.</p>
      <form action="/subscribe" method="post">
        <label for="popup-email">E-posta adresi</label>
        <input id="popup-email" name="email" type="email" autocomplete="email" required autofocus>
        <button type="submit">Kodumu gönder</button>
      </form>
    </div>
  </dialog>

  <script>
    const popup = document.getElementById("signup-popup");
    const openButton = document.getElementById("open-popup");

    openButton.addEventListener("click", function () {
      popup.showModal();
    });

    popup.addEventListener("click", function (event) {
      if (event.target === popup) {
        popup.close();
      }
    });

    popup.addEventListener("close", function () {
      openButton.focus();
    });
  </script>
</body>
</html>

/subscribe adresini formunuzun gönderildiği adresle değiştirin ya da formu e-posta aracınıza bağlayın. WordPress kullanıyorsanız bu kodu bir Özel HTML bloğuna yapıştırabilirsiniz; WordPress'te eklenti kullanmadan popup oluşturma rehberimiz her parçanın nereye gittiğini anlatıyor.

<style>
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    /* Modal Content */
    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        animation-name: animatetop;
        animation-duration: 0.4s;
    }
    /* Add Animation */
    @keyframes animatetop {
        from {top: -300px; opacity: 0}
        to {top: 0; opacity: 1}
    }
    /* The Close Button */
    .close {
        color: #333;
        float: right;
        font-size: 28px;
        font-weight: bold;
        background: none;
        border: none;
    }
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

<!-- Trigger/Open The Modal -->
<button type="button" id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content" role="dialog" aria-modal="true" aria-label="Örnek popup">
    <button type="button" class="close" aria-label="Kapat">×</button>
    <p>Some text in the Modal..</p>
  </div>
</div>
<script>
    // Get the modal
    var modal = document.getElementById("myModal");
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    // Get the button that closes the modal
    var closeBtn = document.getElementsByClassName("close")[0];
    // When the user clicks the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
        closeBtn.focus();
    }
    function closeModal() {
        modal.style.display = "none";
        btn.focus();
    }
    // When the user clicks on (x), close the modal
    closeBtn.onclick = closeModal;
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            closeModal();
        }
    }
    // When the user presses Escape, close it
    document.addEventListener("keydown", function(event) {
        if (event.key === "Escape" && modal.style.display === "block") {
            closeModal();
        }
    });
</script>

3. Butona Tıklamayla Açılan Bir Teaser Popup Nasıl Oluşturulur

Teaser, ana popup'tan önce veya sonra gelen mini bir popup'tır.

Ziyaretçiyi nazikçe dürter ve ana popup açık olsun olmasın, genellikle sayfada kalır.

Yeni bir etkinliği duyururken, ziyaretçinin dikkatini çekmek istediğinizde ya da yardıma ihtiyacı olanı yardım merkezine yönlendirirken teaser işe yarar.

Teaser küçük olduğu için popup'ı açan buton görevini görebilir. Böylece sayfanıza hiç kod eklemeden, butona tıklayınca açılan bir popup elde edersiniz.

Teaser oluşturmak için ilk yöntemdeki Popupsmart kampanya adımlarını izleyin.

Ardından, popup oluşturucuda “Teaser” adımına gidin ve göstermek için “Göz” simgesine tıklayın. “Edit teaser” alanı açılır; burada teaser'ın konumunu, düzenini ve ne zaman görüneceğini seçersiniz.

Teaser görünür olunca onu da popup gibi özelleştirin. Yardım merkezindeki teaser popup rehberi, bir teaser'a hangi öğeleri ekleyebileceğinizi listeliyor. Popupsmart teaser'ı bir popup görüntülemesi olarak sayar ve kampanyanın hedefleme ayarları teaser'a da uygulanır.

Butona Tıklama ile Açılan Popup Kullanım Alanları

• Potansiyel müşteri yaratma en bilinen kullanım. Basit bir form, ziyaretçileri bültenlere, güncellemelere veya özel tekliflere abone olmaya çağırır. Butona ücretsiz bir kaynak ya da indirim koyarak kayıtları artırın ve gelecekteki pazarlama çalışmaları için e-posta listenizi büyütün.
• Promosyon teklifleri hemen harekete geçirir. Buton sınırlı süreli kampanyayı duyurur; açılan popup da satın almayı getirecek görselleri ve metni taşır.
• İçerik etkileşimi de aynı mantıkla çalışır: buton, kullanıcıları ilgi alanlarına veya gezinme davranışlarına göre uygun blog yazılarına, makalelere ya da indirilebilir kaynaklara yönlendirir. Hedeflenmiş mesajlar ve kişiselleştirilmiş öneriler, sitenizin içeriğinde daha uzun gezinmelerini sağlar.
• Etkinlik duyurularında butona tıklamayla açılan popup, web seminerlerine, atölye çalışmalarına veya canlı etkinliklere katılımı artırabilir. Etkinlik detaylarını, kayıt bağlantısını ve öne çıkan bilgileri verin ki ziyaretçi kayıt olsun ya da etkinlik hakkında daha fazlasını öğrensin.
• Anketler ya da geri bildirim formlarıyla kitlenizden geri bildirim toplayın; daveti popup yapsın. Ürünler, hizmetler veya sitenin kullanılabilirliği hakkında soru sorun ve daha fazla yanıt için indirim ya da çekilişe katılım gibi bir teşvik sunun.

Promosyon teklifi bir ürün sayfasında şöyle görünür: ziyaretçi "%10 indirim al" butonuna tıklar ve sayfanın üstünde kısa bir form açılır.

Butonla açılan popup, pek çok formattan biridir; popup türleri rehberimiz onu tam ekran, kayan ve yüzen çubuk formatlarıyla karşılaştırıyor.

Tıklamayla Açılan Popup'ları Optimize Etmek İçin En İyi Uygulamalar

Netlik ve Çekicilik İçin Tasarlayın

• Güçlü CTA'lar Kullanın: Metin tarafını eylem çağrısı (CTA) örneklerimiz gösteriyor; rakamlar Popupsmart'ın 2026 kıyaslamasından: birinci şahıs butonlar ("Send my code", yani "Kodumu gönder") nötr ifadelere karşı %1,18'e %0,80 dönüştürüyor (İngilizce popup'lar, medyan kampanya). Değer vaat eden butonlar ("Get", "Claim", "Unlock") "Subscribe" / "Join" butonlarından güçlü görünüyor (%1,06'ya karşı %0,77, İngilizce popup'lar, medyan kampanya), ancak fark istatistiksel olarak güvenilir değil.
• Sade Tutun: Kalabalık tasarımlardan kaçının. Tek ve net bir hedefi (ör. e-posta toplama) ve kısa bir formu olan sade bir popup en iyi sonucu verir: bir veya iki alan isteyen popup'lar %0,88 ve %0,94 dönüştürüyor, üç alanda bu oran %0,56 (medyan kampanya; çarkıfelek ve diğer oyunlaştırılmış popup'lar ayrı sayıldı).

Mobil İçin Optimize Edin

• Duyarlı Tasarım: Popup'ınızın mobilde düzgün ölçeklendiğinden emin olun: popup gösterimlerinin %63'ü mobilde gerçekleşiyor ve mobil ziyaretçiler popup'larda %1,02 dönüşüyor, masaüstünde bu oran %0,57 (medyan kampanya). Yukarıdaki koddaki width: min(90vw, 420px) satırı kutuyu telefon ekranının içinde tutar.
• Hızlı Yükleme: Yükleme süresini kısaltmak için görselleri sıkıştırın ve kodu küçültün. Tıklamayla açılan bir popup'ın tıklamadan önce var olması gerekmez; ağır görselleri ondan uzak tutun.

Performansı Test Edin ve Analiz Edin

• A/B Testi: Buton metnini, teklifleri ve popup tasarımlarını her seferinde tek bir değişiklikle test edin. Kıyaslamamızda buton rengi, koyu veya açık popup arka planı, aciliyet kelimeleri ve soru başlıkları dönüşümde ölçülebilir bir etki göstermiyor; veri, küçük etkileri dışlayamayacak kadar gürültülü. Popup'lar için A/B testi rehberimiz bir testin ne kadar sürmesi gerektiğini anlatıyor.
• Metrikleri Takip Edin: Tıklama ve dönüşüm oranlarını izlemek için Popupsmart'ın analiz sayfalarını kullanın. Takip hakkında daha fazlası için Popupsmart analiz yardım makalelerine bakın.

Kaçınılması Gereken Yaygın Hatalar

Popup'ı Aşırı Yüklemek

• Fazla İçerik: Formları, görselleri ve metni tek bir popup'a doldurmayın. Kullanıcıyı bunaltmamak için tek bir eyleme odaklanın. Popup UX tasarımı rehberimiz odaklı bir popup'ın nasıl göründüğünü gösteriyor.
• Kötü Zamanlama: Tıklamayla açılan popup'lar bile buton gereğinden fazla kullanılırsa rahatsız edebilir. Tetikleyicileri ödeme sayfası gibi niyetin yüksek olduğu alanlarla sınırlayın.
• Tetikleyici Olarak Bağlantı Kullanmak: href içeren bir bağlantı, popup açılmadan sayfadan çıkar. <button> kullanın.

Erişilebilirliği Göz Ardı Etmek

• Klavye ile Gezinme: Engelli kullanıcılar için popup'ların klavyeyle kullanılabildiğinden emin olun. Popup açıldığında odağı almalı, Escape ile kapanmalı ve kapandığında odağı butona geri vermelidir; yukarıdaki <dialog> örneği üçünü de yapar.
• Renk Kontrastı: Okunabilirlik için WCAG yönergelerine uygun, yüksek kontrastlı renkler kullanın.
• Adı Olmayan Kapat Butonu: Tek başına bir "×", bazı ekran okuyucularda "çarpı" diye okunur. Ona aria-label="Kapat" verin.

Sonuç

Bir butona tıklayınca popup açmanın üç yolu bunlar.

Sitenize uyanı seçin: Popupsmart'ın Tıklamaya Duyarlı Hedeflemesi ve butonunuzdaki tek bir satır, kendi erişilebilir <dialog> öğeniz ya da bir teaser.

Hangisini seçerseniz seçin, butona insanların tıklamak isteyeceği kelimeler yazın ve formu bir veya iki alanda tutun.

Sıkça Sorulan Sorular

HTML ile butona tıklayınca açılan popup nasıl yapılır?

Popup'ı bir <dialog> öğesine koyun ve butonun tıklama olayında showModal() yöntemini çağırın. showModal() popup'ı sayfanın üstüne alır, klavye odağını içine taşır ve ziyaretçi Escape'e bastığında kapatır. Kapat butonunu bir <form method="dialog"> içine koyarsanız ek JavaScript olmadan kapanır.

Bir Popupsmart popup'ını bağlantıdan açabilir miyim?

Başka bir sayfaya giden bir bağlantıdan açamazsınız. Popupsmart yardım merkezi, window.ps.show({ id: xxxxxx }); kodunun bir butonun ya da div'in tıklamasına eklenmesini, href içeren bir <a> etiketine eklenmemesini söyler; sayfa değiştiği için popup gösterilmez.

Popupsmart CMS ile Uyumlu Popup Kampanyaları mı Gösteriyor?

Evet, uyumlu olarak gösterir. Popup oluşturup yayınlamaya karar verdiğinizde, tek yapmanız gereken kampanyanızı özelleştirmek ve embed kodunuzun web sitenizde düzgün çalıştığından emin olmaktır.

Popup'ların Ziyaretçiyi Bölmesini Nasıl Önlerim?

Popup'ların zamanlamasına ve içeriğinin uygunluğuna odaklanmak çok önemlidir. Kullanıcıların etkileşim başlatmasını sağlamak için özellikleri kullanın, böylece onların gezinme deneyimini bölme olasılığını azaltırsınız. Butona tıklamayla açılan bir popup, ancak ziyaretçi isteyince görünür.

Popup'larımın Performansını Takip Edebilir miyim?

Evet, Popupsmart, popup'larınızın etkinliğini değerlendirmenizi ve veri odaklı iyileştirmeler yapmanızı sağlayan dönüşüm oranları, tıklama oranları ve etkileşim verileri gibi metrikleri izleyebileceğiniz Leads ve Analytics sayfalarını sunar.

Önerilen Blog Yazıları

Popup'larınızın daha iyi dönüştürmesini mi istiyorsunuz? Sırada okumaya değer yazılar var:

• Dönüştüren Mobil Popup’lar Nasıl Oluşturulur (SEO'nuza Zarar Vermeden)
• E-posta Popup: 15 Harika Örnek ile Detaylı Rehber
• Popup Video: Web Sitenize Nasıl Eklenir (Kodlama Yok)
• MailChimp Popup’ını WordPress’e Pratik Adımlarla Nasıl Ekleriz