Newsletter Popup

Newsletter Popup

The first time the user visits the website, open a newsletter subscription pop-up.


Coding Instructions

Step 1. Add the JS

Open footers/template.html, and paste the below Javascript directly underneath [%SITE_VALUE id:'footer_javascript' type:'load'/%]:

$(document).ready(function() {
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
        return "";
    var cookie = getCookie("visited");
    if(cookie == "") {
        document.cookie = "visited=true";

Notes On The Above Code

In order to only show the popup once person user, we have to create a cookie. When a user visits the page for the first time, the script tests to see whether the cookie exists. If it doesn't, it'll show the newsletter popup, and then set the cookie. If it does find the cookie, nothing will happen because the user has already seen the newsletter popup.

Step 2. Add the popup code

In footers/template.html,paste the below lines directly above [%cdn_asset html:'1' type:'js' library:'jquery' version:'1.11.3'%]jquery.min.js[%/cdn_asset%]

<div id="popup-newsletter" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content subscribe-modal">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <div class="row">
                    <div class="modal-center">
                        [%content_zone id:'newsletter_popup' /%]
                        <div class="form-group">
                            <form method="post" action="[%URL type:'page' id:'subscribe' https:'1'%][%END URL%]">
                                <input type="hidden" name="list_id" value="1">
                                <input type="hidden" name="opt_in" value="y">
                                <span class="input-group modal-input-margin">
                                    <input name="inp-email" class="form-control" type="email" value="[%nohtml%][@inp-email@][%/nohtml%]" placeholder="Email Address" required/>
                                    <input name="inp-submit" type="hidden" value="y" />
                                    <input name="inp-opt_in" type="hidden" value="y" />
                                <span class="input-group-btn modal-btn">
                                    <input class="btn btn-primary btn-modal" type="submit" value="Subscribe"/>

We're using a content zone to display the text, so you'll also need to create the content zone in the cpanel, and paste the below into it:

<p>Get the latest deals!</p>
<p>Sign up to our newsletter to receive our latest news and offers</p>

Step 3. Add the CSS

You'll want to add CSS (cascading style sheet) styling to suit.

Final Result

Multi-Item Add

Download Files

Download Files

Was this article useful?

Be notified when this page is updated. Optional.