Hot File

Make Creating an Opt-in Monster Clone with jQuery

View: 256    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

9 point/3 review File has been tested

Without a doubt, the most effective way to build an email list is to create a modal that appears when a visitor stumbles across your website.

Introduction

Without a doubt, the most effective way to build an email list is to create a modal that appears when a visitor stumbles across your website. This modal will then contain an opt-in form that they simply can’t ignore (usually with a compelling bribe to hand over their email, like a free download of some sort). This approach is not without its share of controversy, but:

  1. They remain incredibly effective.
  2. The complaints are from a vocal minority.

To create these modals, most people use third-party software like Opt-in Monster, LeadPages, or the List Builder plugin from SumoMe. But while these applications are convenient, they aren’t always the best choice, and as we’ll talk about in this tutorial, they’re easy to replace with jQuery.

Here’s how.

Step 1: Install jQuery

To begin, download and embed a copy of jQuery inside a web page. To save the slightest bit of time, feel free to embed an external copy of jQuery:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Next, we’ll need to add two different jQuery plugins to our page:

The first plugin is the jQuery Modal plugin. This is what we can use to create the modal box that appears after the user visits our page. When adding the plugin to your project, make sure to download all of the files:

  • jquery.modal.min.js
  • jquery.modal.css
  • close.png
  • spinner.gif

You can follow this tutorial using other modal plugins (or a custom modal), but I’ve found the jQuery Modal plugin to be the simplest option.

The second plugin is the jQuery Cookie plugin. This is what we’ll use to make it so that when a user clicks the “Close” button on the modal, they won’t see the modal again for the next thirty days. This means:

  1. Everyone should see the modal at least once.
  2. Return visitors won’t see the modal on every visit.

Relying on cookies is not a fool-proof approach but it’s good enough.

After setting up jQuery itself, along with these plugins, you should have a HTML file that looks something like this:

<html>
    <head>
        <title>jQuery Demo</title>
        <link rel="stylesheet" href="css/jquery.modal.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.modal.min.js"></script>
        <script src="js/jquery.cookie.min.js"></script>
    </head>
    <body>
    </body>
</html>

Step 2: Create a Modal

Between the body tags, write the following:

<div id="opt-in" style="display:none;">
    <form>
        <input type="email" placeholder="Your email goes here...">
        <input type="submit" value="Free Instant Access!">
    </form>
</div>

This is our modal. It’s the box that will appear when a user visits the page. It won’t look that marvelous in its current form, but that doesn’t matter. It is, however, worth mentioning a couple of things:

  1. Our modal needs a unique ID for us to reference. In this case, I’ve given the modal an ID of “opt-in”.
  2. We’ve set the display property to “none” so the modal won’t appear within the main interface. It’ll only appear when it’s called.

Beneath this code, right before the closing body tag, write a function that’ll execute once the page loads:

<script type="text/javascript">
$(window).load(function() {
    // code that'll run when the page loads
}
</script>

Then, to make the modal appear when the page loads, we can use a modal function that’s provided to us by the jQuery Modal plugin:

<script type="text/javascript">
$(window).load(function() {
    // make the modal appear
    $('#opt-in').modal();
});
</script>

After saving the file and refreshing the page inside the browser, the modal should appear:

Example Modal

But we don’t want the modal to appear immediately. It’s best if there’s a slight delay after the user visits the page. To achieve this, we can write a setTimeout function, like so:

setTimeout(function() {
    // this code will execute after 7 seconds
}, 7000);

The first argument is the function we want to execute, and the second argument is the delay (in milliseconds).

When combined with the modal, the code will resemble:

$(window).load(function() {
    // delay by 7 seconds
    setTimeout(function(){
        // make the modal appear
        $('#opt-in').modal();
    }, 7000);
});

Step 3: Manage Cookies

When a user clicks on the modal’s “Close” button, we don’t want them to see the modal again for thirty days. This makes the modal far less annoying.

To achieve this, make it so a function executes when a user clicks on the “Close” button. This button can be referenced with the .close-modal class and this function can be placed at the bottom of the loadfunction:

$('.close-modal').click(function(){
    console.log("Modal closed.");
});

So the code should resemble:

$(window).load(function() {
    // delay by 7 seconds
    setTimeout(function(){
        // make the modal appear
        $('#opt-in').modal();
    }, 7000);
    // when the "Close" button is clicked
    $('.close-modal').click(function(){
        console.log("Modal closed.");
    });
});

Then inside this new function, we’ll create a cookie:

$('.close-modal').click(function(){
    // create a cookie
    $.cookie('hideTheModal', 'true');
});

Here, the cookie is named hideTheModal and it contains a value of true. We can also pass through anexpires option to define how long the cookie should last:

$('.close-modal').click(function(){
    // create a cookie
    $.cookie('hideTheModal', 'true', { expires: 30 });
});

Something that is important to know though is that Google Chrome doesn’t support cookies for local files. This means you’ll need to test this cookie-based functionality through a browser like Safari or Firefox.

With this cookie in place, we can now write the following conditional:

var hideTheModal = $.cookie('hideTheModal');
if(hideTheModal == null){
    // modal appears
} else {
    // modal doesn't appear
}

So in context, the code should resemble:

$(window).load(function() {
    var hideTheModal = $.cookie('hideTheModal');
    // if the cookie hasn't been set...
    if(hideTheModal == null){
        // delay by 7 seconds
        setTimeout(function(){
            // make the modal appear
            $('#opt-in').modal();
        }, 7000);
        // when the "Close" button is clicked
        $('.close-modal').click(function(){
            // set the cookie
            $.cookie('hideTheModal', 'true', { expires: 30 });
        });
    }
});

Then it’s “just” a matter of designing a better looking modal, and also split-testing different designs to see how they affect the opt-in rate. But of course, those precise topics are beyond the scope of this tutorial.

Make Creating an Opt-in Monster Clone with jQuery

Make Creating an Opt-in Monster Clone with jQuery Posted on 21-03-2016  Without a doubt, the most effective way to build an email list is to create a modal that appears when a visitor stumbles across your website. 3/10 256

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 552    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    2.25/2 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 618    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    2.25/2 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 288    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 302    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 314    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    4.5/2 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 291    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 4903    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 752    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    0/0 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd