Download WP Snippets AI

MailerLite Subscribe Popup on Mouse Scroll

Check out our best AI script yet!

If you want a lean mean popup machine without the bloat of a popup plugin, then you need to check this script out. 

We used AI to create this amazing script that automatically shows a popup when you scroll 50% down the page.

With one click of the Add Features button in WP Snippets AI, we refined the script further by adding a full name field.  Why stop now, a second refinement and AI delivered a beautiful popup in a blue theme.

When you add your MailerLite API key and Group ID (for subscriber list) to the commented section in the script, you will now have a fully working MailerLite subscribe popup on mouse scroll.

Download WP Snippet AI free and have a play by customising the script further with your own code, with AI or a mix of both. 

Download WP Snippets AI for free

We are offering it free so you can see for yourself how WP Snippets AI is the fastest, easiest and most intuitive WordPress snippet and code injection plugin on the market.

  • Click the button below to start downloading the WordPress plugin zip file.  
  • Upload/activate the zip file via the Plugins section of your WordPress dashboard. 
  • Enjoy lifetime automatic updates for security and bug fixes.  No license key required!
Download WP Snippets AI

Add AI API keys to use AI free   •   Includes Elementor add-ons   •   No credit card required   •   Supports automatic updates

Screenshots of the MailerLite Subscribe Popups

This MailerLite Subscribe Popup script was generated using a combination of ChatGPT 5.4 and Claude Sonnet 4.6

MailerLite_Subscribe_Popup_1
MailerLite_Subscribe_Popup_2
MailerLite_Subscribe_Popup_3

Code snippets for MailerLite Subscribe Popups

Once you have created a new snippet in WP Snippets AI, copy and paste the code below and click Save. 

To add subscribers to your MailerLite list, you will need to add your MailerLite API key and Group ID as shown in this article here. 

Single field for Email only

				
					

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css" /><style>:root {
  --bg-popup: #F8FAF9;
  --bg-header: #f8faf9;
  --brand-green: #059471;
  --brand-green-light: rgba(5, 148, 113, 0.1);
  --brand-green-border: rgba(5, 148, 113, 0.25);
  --text-main: #000000;
  --text-muted: #000000;
  --text-dim: #8a97a6;
  --border: #d6e4de;
  --border-light: #e4eeea;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Overlay ── */
.wpsa-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 16, 0.65);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 99999;
}

.wpsa-overlay.visible { display: flex; animation: wpsaFadeIn 0.25s ease; }

@keyframes wpsaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wpsaSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wpsaSpin { to { transform: rotate(360deg); } }

/* ── Popup shell ── */
.wpsa-popup {
  background: var(--bg-popup);
  border-radius: 14px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(5, 148, 113, 0.08);
  animation: wpsaSlideUp 0.3s ease;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── Header ── */
.wpsa-header {
  background: var(--bg-header);
  padding: 1.6rem 1.75rem 0.2rem;
  position: relative;
  overflow: hidden;
}

.wpsa-header-accent {
  position: absolute;
  top: -50px; right: -30px;
  width: 200px; height: 180px;
  background: radial-gradient(ellipse, rgba(5, 148, 113, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.wpsa-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(5, 148, 113, 0.07);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}

.wpsa-close:hover { background: rgba(5, 148, 113, 0.14); color: var(--brand-green); }

.wpsa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--brand-green-light);
  border: 1px solid var(--brand-green-border);
  border-radius: 20px;
  padding: 3px 11px 3px 8px;
  font-size: 11px;
  color: var(--brand-green);
  font-weight: 500;
  margin-bottom: 0.875rem;
  position: relative;
}

.wpsa-header h2 {
  font-size: 26px;
  font-weight: 500;
  color: #059471;
  line-height: 1.35;
  margin-bottom: 0.4rem;
  position: relative;
}
.wpsa-header p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  position: relative;
  margin-bottom: 0px;
}

/* ── Body ── */
.wpsa-body { padding: 1.4rem 1.75rem 1.6rem; background: var(--bg-popup); }

.wpsa-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.wpsa-perk { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-main); }
.wpsa-perk-dot { width: 7px; height: 7px; border-radius: 50%; background: #059471; flex-shrink: 0; }
.wpsa-input-wrap { display: flex; gap: 8px; margin-bottom: 0.75rem; }

.wpsa-input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
  width: 100%;
}

.wpsa-input::placeholder { color: var(--text-dim); }
.wpsa-input:focus { border-color: #059471; box-shadow: 0 0 0 3px rgba(5, 148, 113, 0.1); }

.wpsa-submit {
  height: 42px;
  padding: 0 18px;
  background: #F8FAF9;
  color: #059471;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.1s;
  display: flex; align-items: center; gap: 6px;
}

.wpsa-submit:hover:not(:disabled) { background: #059471; color: #fff; border-color: #059471; }
.wpsa-submit:active:not(:disabled) { transform: scale(0.97); }
.wpsa-submit:disabled { opacity: 0.65; cursor: not-allowed; }

.wpsa-spin { display: inline-block; animation: wpsaSpin 0.7s linear infinite; }

.wpsa-error {
  font-size: 13px;
  color: #dc2626;
  margin-bottom: 6px;
  display: none;
  align-items: center;
  gap: 5px;
}

.wpsa-privacy {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.wpsa-privacy i { font-size: 12px; color: #059471; }

/* ── Success ── */
.wpsa-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.75rem 2rem;
  gap: 10px;
  background: var(--bg-popup);
}

.wpsa-success-ring {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1.5px solid #059471;
  background: rgba(5, 148, 113, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #059471;
  margin-bottom: 4px;
}

.wpsa-success h3 { font-size: 18px; font-weight: 500; color: #059471; }
.wpsa-success p { font-size: 13px; color: var(--text-main); line-height: 1.6; max-width: 260px; }
.wpsa-ai-tag { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.wpsa-ai-tag span { color: #059471; font-weight: 500; }</style>

<div class="wpsa-overlay" id="wpsaOverlay" role="dialog" aria-modal="true" aria-label="WP Snippets AI newsletter">

  <div class="wpsa-popup">

    <div class="wpsa-header">
      <div class="wpsa-header-accent" aria-hidden="true"></div>
      <button class="wpsa-close" aria-label="Close popup" id="wpsaClose">
        <i class="ti ti-x" aria-hidden="true"></i>
      </button>
      <div class="wpsa-badge">
        <i class="ti ti-sparkles" aria-hidden="true"></i>
        WordPress AI snippets
      </div>
      <h2>Code smarter.<br>Stay ahead.</h2>
      <p>Get fresh WordPress tips, AI coding tricks, plugin updates, tutorials, and powerful new features sent straight to your inbox.</p>
    </div>

    <div class="wpsa-body" id="wpsaFormArea">
      <div class="wpsa-perks">
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>AI snippet techniques &amp; WordPress dev tips</span></div>
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>New feature releases &amp; roadmap previews</span></div>
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>Free scripts, templates &amp; exclusive offers</span></div>
      </div>

      <div class="wpsa-input-wrap">
        <input class="wpsa-input" type="email" id="wpsaEmail" placeholder="your@email.com" aria-label="Email address" autocomplete="email" />
        <button class="wpsa-submit" id="wpsaSubmit" aria-label="Subscribe">
          <i class="ti ti-arrow-right" aria-hidden="true" id="wpsaBtnIcon"></i>
          <span id="wpsaBtnText">Subscribe</span>
        </button>
      </div>

      <div class="wpsa-error" id="wpsaError" role="alert">
        <i class="ti ti-alert-circle" aria-hidden="true"></i>
        <span id="wpsaErrorText"></span>
      </div>

      <div class="wpsa-privacy">
        <i class="ti ti-lock" aria-hidden="true"></i>
        No spam, ever. Unsubscribe in one click.
      </div>
    </div>

    <div class="wpsa-success" id="wpsaSuccess" aria-live="polite">
      <div class="wpsa-success-ring"><i class="ti ti-check" aria-hidden="true"></i></div>
      <h3>You're in!</h3>
      <p id="wpsaSuccessMsg">Watch your inbox for WordPress tips and the latest WP Snippets AI updates.</p>
      <div class="wpsa-ai-tag"><span>WP Snippets AI</span> — Easy. Smart. Fast.</div>
    </div>

  </div>
</div>




 <script type="litespeed/javascript">(function(){const MAILERLITE_API_KEY='';const MAILERLITE_GROUP_ID='';const TRIGGER_PERCENT=50;const STORAGE_KEY='wpsaPopupSeen';if(sessionStorage.getItem(STORAGE_KEY))return;const overlay=document.getElementById('wpsaOverlay');const formArea=document.getElementById('wpsaFormArea');const successEl=document.getElementById('wpsaSuccess');const emailInput=document.getElementById('wpsaEmail');const submitBtn=document.getElementById('wpsaSubmit');const btnIcon=document.getElementById('wpsaBtnIcon');const btnText=document.getElementById('wpsaBtnText');const errorEl=document.getElementById('wpsaError');const errorText=document.getElementById('wpsaErrorText');const closeBtn=document.getElementById('wpsaClose');let triggered=!1;function getScrollPercent(){const el=document.documentElement;const scrolled=el.scrollTop||document.body.scrollTop;const total=(el.scrollHeight||document.body.scrollHeight)-el.clientHeight;return total>0?Math.round((scrolled/total)*100):0}
function onScroll(){if(triggered)return;if(getScrollPercent()>=TRIGGER_PERCENT){triggered=!0;openPopup();window.removeEventListener('scroll',onScroll)}}
window.addEventListener('scroll',onScroll,{passive:!0});function openPopup(){overlay.classList.add('visible');emailInput.focus()}
function closePopup(){overlay.classList.remove('visible');sessionStorage.setItem(STORAGE_KEY,'1')}
closeBtn.addEventListener('click',closePopup);overlay.addEventListener('click',function(e){if(e.target===overlay)closePopup();});document.addEventListener('keydown',function(e){if(e.key==='Escape')closePopup();});function setLoading(on){submitBtn.disabled=on;if(on){btnIcon.className='ti ti-loader-2 wpsa-spin';btnText.textContent='Subscribing…'}else{btnIcon.className='ti ti-arrow-right';btnText.textContent='Subscribe'}}
function showError(msg){errorText.textContent=msg;errorEl.style.display='flex'}
function hideError(){errorEl.style.display='none'}
async function subscribeToMailerLite(email){const subRes=await fetch('https://connect.mailerlite.com/api/subscribers',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','Authorization':'Bearer '+MAILERLITE_API_KEY},body:JSON.stringify({email,resubscribe:!0})});if(!subRes.ok){const err=await subRes.json().catch(()=>({}));throw new Error(err.message||'MailerLite error ('+subRes.status+')')}
if(MAILERLITE_GROUP_ID){const sub=await subRes.json();const id=sub?.data?.id;if(id){await fetch('https://connect.mailerlite.com/api/groups/'+MAILERLITE_GROUP_ID+'/subscribers/'+id,{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','Authorization':'Bearer '+MAILERLITE_API_KEY}})}}}
async function handleSubscribe(){hideError();const email=emailInput.value.trim();if(!email){showError('Please enter your email address.');return}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){showError('Please enter a valid email address.');return}
setLoading(!0);try{await subscribeToMailerLite(email);formArea.style.display='none';successEl.style.display='flex';sessionStorage.setItem(STORAGE_KEY,'subscribed')}catch(err){showError(err.message||'Something went wrong. Please try again.');setLoading(!1)}}
submitBtn.addEventListener('click',handleSubscribe);emailInput.addEventListener('keydown',function(e){if(e.key==='Enter')handleSubscribe();})})()</script>

Multiple fields for Full Name and Email

				
					

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css" /><style>:root {
  --bg-popup: #F8FAF9;https://www.wipeoutmedia.com/cjt/300f0-web-agency-about/
  --bg-header: #f8faf9;
  --brand-green: #059471;
  --brand-green-light: rgba(5, 148, 113, 0.1);
  --brand-green-border: rgba(5, 148, 113, 0.25);
  --text-main: #000000;
  --text-muted: #000000;
  --text-dim: #8a97a6;
  --border: #d6e4de;
  --border-light: #e4eeea;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Overlay ── */
.wpsa-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 16, 0.65);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 99999;
}

.wpsa-overlay.visible { display: flex; animation: wpsaFadeIn 0.25s ease; }

@keyframes wpsaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wpsaSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wpsaSpin { to { transform: rotate(360deg); } }

/* ── Popup shell ── */
.wpsa-popup {
  background: var(--bg-popup);
  border-radius: 14px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(5, 148, 113, 0.08);
  animation: wpsaSlideUp 0.3s ease;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── Header ── */
.wpsa-header {
  background: var(--bg-header);
  padding: 1.6rem 1.75rem 0.2rem;
  position: relative;
  overflow: hidden;
}

.wpsa-header-accent {
  position: absolute;
  top: -50px; right: -30px;
  width: 200px; height: 180px;
  background: radial-gradient(ellipse, rgba(5, 148, 113, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.wpsa-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(5, 148, 113, 0.07);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}

.wpsa-close:hover { background: rgba(5, 148, 113, 0.14); color: var(--brand-green); }

.wpsa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--brand-green-light);
  border: 1px solid var(--brand-green-border);
  border-radius: 20px;
  padding: 3px 11px 3px 8px;
  font-size: 11px;
  color: var(--brand-green);
  font-weight: 500;
  margin-bottom: 0.875rem;
  position: relative;
}

.wpsa-header h2 {
  font-size: 26px;
  font-weight: 500;
  color: #059471;
  line-height: 1.35;
  margin-bottom: 0.4rem;
  position: relative;
}
.wpsa-header p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  position: relative;
  margin-bottom: 0px;
}

/* ── Body ── */
.wpsa-body { padding: 1.4rem 1.75rem 1.6rem; background: var(--bg-popup); }

.wpsa-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.wpsa-perk { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-main); }
.wpsa-perk-dot { width: 7px; height: 7px; border-radius: 50%; background: #059471; flex-shrink: 0; }
.wpsa-field-row { margin-bottom: 8px; }
.wpsa-input-wrap { display: flex; gap: 8px; margin-bottom: 0.75rem; }

.wpsa-input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
  width: 100%;
}

.wpsa-input::placeholder { color: var(--text-dim); }
.wpsa-input:focus { border-color: #059471; box-shadow: 0 0 0 3px rgba(5, 148, 113, 0.1); }

.wpsa-submit {
  height: 42px;
  padding: 0 18px;
  background: #F8FAF9;
  color: #059471;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.1s;
  display: flex; align-items: center; gap: 6px;
}

.wpsa-submit:hover:not(:disabled) { background: #059471; color: #fff; border-color: #059471; }
.wpsa-submit:active:not(:disabled) { transform: scale(0.97); }
.wpsa-submit:disabled { opacity: 0.65; cursor: not-allowed; }

.wpsa-spin { display: inline-block; animation: wpsaSpin 0.7s linear infinite; }

.wpsa-error {
  font-size: 13px;
  color: #dc2626;
  margin-bottom: 6px;
  display: none;
  align-items: center;
  gap: 5px;
}

.wpsa-privacy {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.wpsa-privacy i { font-size: 12px; color: #059471; }

/* ── Success ── */
.wpsa-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.75rem 2rem;
  gap: 10px;
  background: var(--bg-popup);
}

.wpsa-success-ring {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1.5px solid #059471;
  background: rgba(5, 148, 113, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #059471;
  margin-bottom: 4px;
}

.wpsa-success h3 { font-size: 18px; font-weight: 500; color: #059471; }
.wpsa-success p { font-size: 13px; color: var(--text-main); line-height: 1.6; max-width: 260px; }
.wpsa-success-name { font-weight: 500; color: #059471; }
.wpsa-ai-tag { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.wpsa-ai-tag span { color: #059471; font-weight: 500; }</style>

<div class="wpsa-overlay" id="wpsaOverlay" role="dialog" aria-modal="true" aria-label="WP Snippets AI newsletter">

  <div class="wpsa-popup">

    <div class="wpsa-header">
      <div class="wpsa-header-accent" aria-hidden="true"></div>
      <button class="wpsa-close" aria-label="Close popup" id="wpsaClose">
        <i class="ti ti-x" aria-hidden="true"></i>
      </button>
      <div class="wpsa-badge">
        <i class="ti ti-sparkles" aria-hidden="true"></i>
        WordPress AI snippets
      </div>
      <h2>Code smarter.<br>Stay ahead.</h2>
      <p>Get fresh WordPress tips, AI coding tricks, plugin updates, tutorials, and powerful new features sent straight to your inbox.</p>
    </div>

    <div class="wpsa-body" id="wpsaFormArea">
      <div class="wpsa-perks">
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>AI snippet techniques &amp; WordPress dev tips</span></div>
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>New feature releases &amp; roadmap previews</span></div>
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>Free scripts, templates &amp; exclusive offers</span></div>
      </div>

      <div class="wpsa-field-row">
        <input class="wpsa-input" type="text" id="wpsaName" placeholder="Your full name" aria-label="Full name" autocomplete="name" />
      </div>

      <div class="wpsa-input-wrap">
        <input class="wpsa-input" type="email" id="wpsaEmail" placeholder="your@email.com" aria-label="Email address" autocomplete="email" />
        <button class="wpsa-submit" id="wpsaSubmit" aria-label="Subscribe">
          <i class="ti ti-arrow-right" aria-hidden="true" id="wpsaBtnIcon"></i>
          <span id="wpsaBtnText">Subscribe</span>
        </button>
      </div>

      <div class="wpsa-error" id="wpsaError" role="alert">
        <i class="ti ti-alert-circle" aria-hidden="true"></i>
        <span id="wpsaErrorText"></span>
      </div>

      <div class="wpsa-privacy">
        <i class="ti ti-lock" aria-hidden="true"></i>
        No spam, ever. Unsubscribe in one click.
      </div>
    </div>

    <div class="wpsa-success" id="wpsaSuccess" aria-live="polite">
      <div class="wpsa-success-ring"><i class="ti ti-check" aria-hidden="true"></i></div>
      <h3>You're in!</h3>
      <p id="wpsaSuccessMsg">Watch your inbox for WordPress tips and the latest WP Snippets AI updates.</p>
      <div class="wpsa-ai-tag"><span>WP Snippets AI</span> — Easy. Smart. Fast.</div>
    </div>

  </div>
</div>




 <script type="litespeed/javascript">(function(){const MAILERLITE_API_KEY='';const MAILERLITE_GROUP_ID='';const TRIGGER_PERCENT=50;const STORAGE_KEY='wpsaPopupSeen';if(sessionStorage.getItem(STORAGE_KEY))return;const overlay=document.getElementById('wpsaOverlay');const formArea=document.getElementById('wpsaFormArea');const successEl=document.getElementById('wpsaSuccess');const nameInput=document.getElementById('wpsaName');const emailInput=document.getElementById('wpsaEmail');const submitBtn=document.getElementById('wpsaSubmit');const btnIcon=document.getElementById('wpsaBtnIcon');const btnText=document.getElementById('wpsaBtnText');const errorEl=document.getElementById('wpsaError');const errorText=document.getElementById('wpsaErrorText');const closeBtn=document.getElementById('wpsaClose');let triggered=!1;function getScrollPercent(){const el=document.documentElement;const scrolled=el.scrollTop||document.body.scrollTop;const total=(el.scrollHeight||document.body.scrollHeight)-el.clientHeight;return total>0?Math.round((scrolled/total)*100):0}
function onScroll(){if(triggered)return;if(getScrollPercent()>=TRIGGER_PERCENT){triggered=!0;openPopup();window.removeEventListener('scroll',onScroll)}}
window.addEventListener('scroll',onScroll,{passive:!0});function openPopup(){overlay.classList.add('visible');nameInput.focus()}
function closePopup(){overlay.classList.remove('visible');sessionStorage.setItem(STORAGE_KEY,'1')}
closeBtn.addEventListener('click',closePopup);overlay.addEventListener('click',function(e){if(e.target===overlay)closePopup();});document.addEventListener('keydown',function(e){if(e.key==='Escape')closePopup();});function setLoading(on){submitBtn.disabled=on;if(on){btnIcon.className='ti ti-loader-2 wpsa-spin';btnText.textContent='Subscribing…'}else{btnIcon.className='ti ti-arrow-right';btnText.textContent='Subscribe'}}
function showError(msg){errorText.textContent=msg;errorEl.style.display='flex'}
function hideError(){errorEl.style.display='none'}
async function subscribeToMailerLite(email,name){const fields={};if(name){const parts=name.trim().split(/\s+/);fields.name=parts[0];if(parts.length>1)fields.last_name=parts.slice(1).join(' ');}
const subRes=await fetch('https://connect.mailerlite.com/api/subscribers',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','Authorization':'Bearer '+MAILERLITE_API_KEY},body:JSON.stringify({email,fields,resubscribe:!0})});if(!subRes.ok){const err=await subRes.json().catch(()=>({}));throw new Error(err.message||'MailerLite error ('+subRes.status+')')}
if(MAILERLITE_GROUP_ID){const sub=await subRes.json();const id=sub?.data?.id;if(id){await fetch('https://connect.mailerlite.com/api/groups/'+MAILERLITE_GROUP_ID+'/subscribers/'+id,{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','Authorization':'Bearer '+MAILERLITE_API_KEY}})}}}
async function handleSubscribe(){hideError();const name=nameInput.value.trim();const email=emailInput.value.trim();if(!name){showError('Please enter your full name.');nameInput.focus();return}
if(!email){showError('Please enter your email address.');return}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){showError('Please enter a valid email address.');return}
setLoading(!0);try{await subscribeToMailerLite(email,name);const firstName=name.split(/\s+/)[0];document.getElementById('wpsaSuccessMsg').innerHTML='Watch your inbox for WordPress tips and the latest WP Snippets AI updates, <span class="wpsa-success-name">'+firstName+'</span>!';formArea.style.display='none';successEl.style.display='flex';sessionStorage.setItem(STORAGE_KEY,'subscribed')}catch(err){showError(err.message||'Something went wrong. Please try again.');setLoading(!1)}}
submitBtn.addEventListener('click',handleSubscribe);nameInput.addEventListener('keydown',function(e){if(e.key==='Enter')emailInput.focus();});emailInput.addEventListener('keydown',function(e){if(e.key==='Enter')handleSubscribe();})})()</script>

Multiple fields (as above) with Popup in Blue Theme

				
					 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css" /><style>/* ── Blue theme CSS variables ── */
:root {
  --bg-popup: #f0f6ff;
  --bg-header: #1a3a6b;
  --brand-blue: #1a56db;
  --brand-blue-dark: #1239a5;
  --brand-blue-light: rgba(26, 86, 219, 0.12);
  --brand-blue-border: rgba(26, 86, 219, 0.3);
  --text-main: #0d1f3c;
  --text-muted: #e8f0fe;
  --text-dim: #6b87b8;
  --border: #b8d0f5;
  --border-light: #d6e6ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Overlay ── */
.wpsa-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 15, 40, 0.72);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 99999;
}

.wpsa-overlay.visible { display: flex; animation: wpsaFadeIn 0.25s ease; }

@keyframes wpsaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wpsaSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wpsaSpin { to { transform: rotate(360deg); } }

/* ── Popup shell ── */
.wpsa-popup {
  background: var(--bg-popup);
  border-radius: 16px;
  border: 2px solid var(--brand-blue-border);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow:
    0 24px 56px rgba(10, 30, 80, 0.35),
    0 0 0 1px rgba(26, 86, 219, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: wpsaSlideUp 0.3s ease;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── Header — deep navy/blue background ── */
.wpsa-header {
  background: var(--bg-header);
  padding: 1.75rem 1.75rem 1.4rem;
  position: relative;
  overflow: hidden;
}

/* Decorative radial glow in the header */
.wpsa-header-accent {
  position: absolute;
  top: -60px; right: -40px;
  width: 240px; height: 220px;
  background: radial-gradient(ellipse, rgba(59, 130, 246, 0.28) 0%, transparent 65%);
  pointer-events: none;
}

/* Second accent for depth */
.wpsa-header-accent-2 {
  position: absolute;
  bottom: -30px; left: -20px;
  width: 160px; height: 140px;
  background: radial-gradient(ellipse, rgba(96, 165, 250, 0.15) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Close button ── */
.wpsa-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wpsa-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Badge ── */
.wpsa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(96, 165, 250, 0.18);
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 20px;
  padding: 3px 12px 3px 8px;
  font-size: 11px;
  color: #93c5fd;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  position: relative;
  text-transform: uppercase;
}

/* ── Header heading & subtext ── */
.wpsa-header h2 {
  font-size: 27px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  position: relative;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.18);
}

.wpsa-header p {
  font-size: 14px;
  color: rgba(219, 234, 254, 0.85);
  line-height: 1.65;
  position: relative;
  margin-bottom: 0;
  font-weight: 400;
}

/* ── Body ── */
.wpsa-body {
  padding: 1.5rem 1.75rem 1.75rem;
  background: var(--bg-popup);
}

/* ── Perks list ── */
.wpsa-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-light);
}

.wpsa-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-main);
  font-weight: 500;
}

/* Bold blue filled dot */
.wpsa-perk-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-blue);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.2);
}

/* ── Input wrap: stacked layout ── */
.wpsa-input-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 0.75rem;
}

.wpsa-input-wrap--fullwidth {
  display: flex;
  gap: 8px;
  margin-bottom: 0.75rem;
}

/* ── Inputs ── */
.wpsa-input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 2px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  background: #ffffff;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
  width: 100%;
  font-weight: 500;
}

.wpsa-input::placeholder { color: #a0b4d0; font-weight: 400; }

.wpsa-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}

/* ── Submit button — bold solid blue ── */
.wpsa-submit {
  height: 44px;
  padding: 0 18px;
  background: var(--brand-blue);
  color: #ffffff;
  border: 2px solid var(--brand-blue);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, transform 0.1s, box-shadow 0.18s;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(26, 86, 219, 0.35);
}

.wpsa-submit:hover:not(:disabled) {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  box-shadow: 0 6px 20px rgba(26, 86, 219, 0.45);
}

.wpsa-submit:active:not(:disabled) { transform: scale(0.97); }
.wpsa-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.wpsa-spin { display: inline-block; animation: wpsaSpin 0.7s linear infinite; }

/* ── Error ── */
.wpsa-error {
  font-size: 13px;
  color: #dc2626;
  margin-bottom: 8px;
  display: none;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

/* ── Privacy note ── */
.wpsa-privacy {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 500;
}

.wpsa-privacy i { font-size: 13px; color: var(--brand-blue); }

/* ── Success state ── */
.wpsa-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.75rem 2.25rem;
  gap: 12px;
  background: var(--bg-popup);
}

.wpsa-success-ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid var(--brand-blue);
  background: var(--brand-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--brand-blue);
  margin-bottom: 4px;
  box-shadow: 0 0 0 6px rgba(26, 86, 219, 0.08);
}

.wpsa-success h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-blue-dark);
  letter-spacing: -0.01em;
}

.wpsa-success p {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.65;
  max-width: 270px;
}

.wpsa-ai-tag { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-weight: 500; }
.wpsa-ai-tag span { color: var(--brand-blue); font-weight: 700; }</style>

<div class="wpsa-overlay" id="wpsaOverlay" role="dialog" aria-modal="true" aria-label="WP Snippets AI newsletter">

  <div class="wpsa-popup">

    
    <div class="wpsa-header">
      <div class="wpsa-header-accent" aria-hidden="true"></div>
      <div class="wpsa-header-accent-2" aria-hidden="true"></div>

      <button class="wpsa-close" aria-label="Close popup" id="wpsaClose">
        <i class="ti ti-x" aria-hidden="true"></i>
      </button>

      <div class="wpsa-badge">
        <i class="ti ti-sparkles" aria-hidden="true"></i>
        WordPress AI snippets
      </div>

      <h2>Code smarter.<br>Stay ahead.</h2>
      <p>Get fresh WordPress tips, AI coding tricks, plugin updates, tutorials, and powerful new features sent straight to your inbox.</p>
    </div>

    
    <div class="wpsa-body" id="wpsaFormArea">

      
      <div class="wpsa-perks">
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>AI snippet techniques &amp; WordPress dev tips</span></div>
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>New feature releases &amp; roadmap previews</span></div>
        <div class="wpsa-perk"><div class="wpsa-perk-dot"></div><span>Free scripts, templates &amp; exclusive offers</span></div>
      </div>

      
      <div class="wpsa-input-wrap--fullwidth">
        <input
          class="wpsa-input"
          type="text"
          id="wpsaFullName"
          placeholder="Your full name"
          aria-label="Full name"
          autocomplete="name"
        />
      </div>

      
      <div class="wpsa-input-wrap">
        <input
          class="wpsa-input"
          type="email"
          id="wpsaEmail"
          placeholder="your@email.com"
          aria-label="Email address"
          autocomplete="email"
        />
        <button class="wpsa-submit" id="wpsaSubmit" aria-label="Subscribe">
          <i class="ti ti-arrow-right" aria-hidden="true" id="wpsaBtnIcon"></i>
          <span id="wpsaBtnText">Subscribe</span>
        </button>
      </div>

      
      <div class="wpsa-error" id="wpsaError" role="alert">
        <i class="ti ti-alert-circle" aria-hidden="true"></i>
        <span id="wpsaErrorText"></span>
      </div>

      
      <div class="wpsa-privacy">
        <i class="ti ti-lock" aria-hidden="true"></i>
        No spam, ever. Unsubscribe in one click.
      </div>

    </div>

    
    <div class="wpsa-success" id="wpsaSuccess" aria-live="polite">
      <div class="wpsa-success-ring"><i class="ti ti-check" aria-hidden="true"></i></div>
      <h3>You're in!</h3>
      <p id="wpsaSuccessMsg">Watch your inbox for WordPress tips and the latest WP Snippets AI updates.</p>
      <div class="wpsa-ai-tag"><span>WP Snippets AI</span> — Easy. Smart. Fast.</div>
    </div>

  </div>
</div>




 <script type="litespeed/javascript">(function(){const MAILERLITE_API_KEY='';const MAILERLITE_GROUP_ID='';const TRIGGER_PERCENT=50;const STORAGE_KEY='wpsaPopupSeen';if(sessionStorage.getItem(STORAGE_KEY))return;const overlay=document.getElementById('wpsaOverlay');const formArea=document.getElementById('wpsaFormArea');const successEl=document.getElementById('wpsaSuccess');const fullNameInput=document.getElementById('wpsaFullName');const emailInput=document.getElementById('wpsaEmail');const submitBtn=document.getElementById('wpsaSubmit');const btnIcon=document.getElementById('wpsaBtnIcon');const btnText=document.getElementById('wpsaBtnText');const errorEl=document.getElementById('wpsaError');const errorText=document.getElementById('wpsaErrorText');const closeBtn=document.getElementById('wpsaClose');let triggered=!1;function getScrollPercent(){const el=document.documentElement;const scrolled=el.scrollTop||document.body.scrollTop;const total=(el.scrollHeight||document.body.scrollHeight)-el.clientHeight;return total>0?Math.round((scrolled/total)*100):0}
function onScroll(){if(triggered)return;if(getScrollPercent()>=TRIGGER_PERCENT){triggered=!0;openPopup();window.removeEventListener('scroll',onScroll)}}
window.addEventListener('scroll',onScroll,{passive:!0});function openPopup(){overlay.classList.add('visible');fullNameInput.focus()}
function closePopup(){overlay.classList.remove('visible');sessionStorage.setItem(STORAGE_KEY,'1')}
closeBtn.addEventListener('click',closePopup);overlay.addEventListener('click',function(e){if(e.target===overlay)closePopup();});document.addEventListener('keydown',function(e){if(e.key==='Escape')closePopup();});function setLoading(on){submitBtn.disabled=on;if(on){btnIcon.className='ti ti-loader-2 wpsa-spin';btnText.textContent='Subscribing\u2026'}else{btnIcon.className='ti ti-arrow-right';btnText.textContent='Subscribe'}}
function showError(msg){errorText.textContent=msg;errorEl.style.display='flex'}
function hideError(){errorEl.style.display='none'}
async function subscribeToMailerLite(email,name){const payload={email:email,resubscribe:!0};if(name){payload.fields={name:name}}
const subRes=await fetch('https://connect.mailerlite.com/api/subscribers',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','Authorization':'Bearer '+MAILERLITE_API_KEY},body:JSON.stringify(payload)});if(!subRes.ok){const err=await subRes.json().catch(function(){return{}});throw new Error(err.message||'MailerLite error ('+subRes.status+')')}
if(MAILERLITE_GROUP_ID){const sub=await subRes.json();const id=sub&&sub.data&&sub.data.id;if(id){await fetch('https://connect.mailerlite.com/api/groups/'+MAILERLITE_GROUP_ID+'/subscribers/'+id,{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','Authorization':'Bearer '+MAILERLITE_API_KEY}})}}}
async function handleSubscribe(){hideError();const name=fullNameInput.value.trim();const email=emailInput.value.trim();if(!name){showError('Please enter your full name.');fullNameInput.focus();return}
if(!email){showError('Please enter your email address.');emailInput.focus();return}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){showError('Please enter a valid email address.');emailInput.focus();return}
setLoading(!0);try{await subscribeToMailerLite(email,name);formArea.style.display='none';successEl.style.display='flex';sessionStorage.setItem(STORAGE_KEY,'subscribed')}catch(err){showError(err.message||'Something went wrong. Please try again.');setLoading(!1)}}
submitBtn.addEventListener('click',handleSubscribe);fullNameInput.addEventListener('keydown',function(e){if(e.key==='Enter')handleSubscribe();});emailInput.addEventListener('keydown',function(e){if(e.key==='Enter')handleSubscribe();})})()</script>

Unleash the Power of WP Snippets AI

Enhance your site’s functionality, boost performance, and elevate user experience with WP Snippets AI. Discover powerful tools and endless possibilities to take your WordPress site to the next level.
Click for WP Snippets AI Pricing