How to Build a Custom Slide-In CTA in WordPress (No Plugins)

We’ve all been to a site like this: you open an article, and before you can even read the first sentence, a large pop-up blocks your view. Lots of readers don’t look for the “X” button; they look for the “Back” button.

If you want to grow your email list or promote a product without making your audience annoyed, you need a Slide-In Call to Action (CTA).

Unlike aggressive pop-ups, a slide-in is the “polite” way to market. It stays hidden until your reader has reached a specific point in your article, then gracefully slides into the corner. It basically says to the reader: “I see you’re enjoying this content; here is something else you might like.”

Table of Contents

    Why “Polite” Marketing Wins

    In web design, timing is everything. A slide-in CTA is effective because it implements earned attention.

    1. High Conversion, Low Annoyance: By waiting until a user has scrolled (for example, 40% of the page), you are only showing your offer to people who are actually reading.
    2. SEO & Core Web Vitals: Google dosen’t like sites with “intrusive interstitials” on mobile. Because this slide-in doesn’t block the main content, it is 100% SEO-friendly.
    3. Zero Bloat: Most lead-gen plugins load large libraries and tracking scripts. Our solution is pure HTML, CSS, and a tiny bit of JavaScript.

    The Smart Slide-In Generator

    Use our tool below to choose a style that fits your brand. Each style has been optimized for contrast and readability.

    SMART SLIDE-IN CTA 
    <!-- START SLIDE-IN CTA -->
<div id="slideInCTA" class="cta-hidden">
    <button id="closeCTA" aria-label="Close">&times;</button>
    <h2 id="ctaTitle">YOUR TITLE HERE</h2>
    <p id="ctaPara">YOUR SUBTITLE OR BODY TEXT GOES HERE. MAKE IT PERSUASIVE!</p>
    <a href="YOUR_LINK_URL_HERE" class="cta-button">BUTTON TEXT</a>
</div>

<script>
(function() {
    /* --- CONFIGURATION SETTINGS --- */
    const CONFIG = {
        scrollTrigger: 40,   // % of page scrolled before showing
        position: "right",   // "left" or "right" side of screen
        delay: 1000          // Delay in ms after trigger
    };

    const cta = document.getElementById("slideInCTA");
    const close = document.getElementById("closeCTA");

    window.onscroll = function() {
        let scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
        
        if (scrollPercent > CONFIG.scrollTrigger) {
            setTimeout(() => {
                cta.classList.add("cta-visible");
            }, CONFIG.delay);
        }
    };

    close.onclick = function() {
        cta.style.display = "none";
    };
})();
</script>

<style>
    #slideInCTA {
        position: fixed;
        bottom: 30px;
        right: -450px;
        width: 350px;
        padding: 30px;
        z-index: 10000;
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        font-family: sans-serif;
        background: #ffffff; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-radius: 15px;
    }
    #slideInCTA.cta-visible { right: 30px; }
    #closeCTA {
        position: absolute; top: 10px; right: 15px;
        background: none; border: none; font-size: 24px;
        cursor: pointer; color: #94a3b8;
    }
    #slideInCTA h2 { margin: 0 0 10px; font-size: 22px; transition: color 0.3s; color: #1e293b; }
    #slideInCTA p { margin: 0 0 20px; font-size: 14px; transition: color 0.3s; color: #64748b; line-height: 1.5; }
    .cta-button {
        display: inline-block; padding: 12px 24px;
        background: #2563eb; color: #fff; text-decoration: none;
        border-radius: 8px; font-weight: 600; font-size: 14px;
        transition: opacity 0.2s;
    }
    .cta-button:hover { opacity: 0.9; }
</style>
<!-- END SLIDE-IN CTA -->

    How to Set It Up (Step-by-Step)

    1. Choose Your Placement

    You can place this code at the very bottom of any specific post using a Custom HTML block. If you want it to appear on every post, paste it into your footer.php file or use a “Header and Footer” script plugin.

    2. Customize the Trigger

    In the code, you will see a section called CONFIG. This is where the magic happens:

    • scrollTrigger: 40: This means the box appears after 40% scroll. Set it to 80 for a “bottom-of-the-page” offer.
    • delay: 1000: This adds a 1-second pause after the trigger is hit, making the entrance feel more natural.

    3. Change Your Content

    Look for the following lines in the code and swap out the text:

    • <h2>YOUR TITLE HERE</h2> → Your headline.
    • <p>YOUR SUBTITLE...</p> → Your pitch.
    • href="YOUR_LINK_URL_HERE" → Your destination link.

    Style Breakdown: Which One Should You Use?

    • Modern: Best for corporate blogs or professional portfolios.
    • Neo-Brutalist: Perfect for “Gen-Z” brands, creative agencies, or bold tech blogs.
    • Glassmorphism: Great for high-end SaaS products or modern UI/UX websites.
    • Floating: Use this if you want a minimal, “app-like” feel that stays out of the way.
    • Double Border: Best for technical documentation or sites with a “blueprint” aesthetic.

    Final Thoughts

    Adding a slide-in CTA is one of the fastest ways to turn “passive readers” into “active subscribers.” By coding it yourself, you ensure your site stays lightning-fast while giving your readers a premium experience they won’t find on a standard WordPress site.