I’m back with another tutorial and an open source plugin to giveaway for free. Today, let me introduce to you a new plugin I created called Subscribe Better.
Subscribe Better is a jQuery plugin that lets you create a customizable subscription modal/newsletter signup window that annoy your users a little bit less than the traditional way. Although, I don’t condone this web design pattern of showing a subscription popup that blocks the content area, but if people are going to do it anyway, I think they should at least do it the right way.
The success and failure of a subscription popup is all about timing. Showing the modal window on page load is a sure way to drive your users away from your website never to return again. If you time it right though, it may help increase the subscription growth you seek. That is why I created this plugin and without further ado, let’s dive into what is possible with this plugin.
Note: This plugin has been tested on Chrome, Firefox, Safari, on both desktop and mobile. It has not been tested on IE.
How does this work?
As mentioned earlier, the key to a successful campaign using a subscription modal window is timing, so my main goal in creating this plugin is to allow developers to time their subscription window correctly while making the whole user experience less annoying.
First, I began thinking about a trigger that will be used to show the modal window at the right time. I came up with 3 triggers (“on load”, “at the end of the page”, and “on idle”) that I think could be useful. These triggers are easily tracked using the wheel delta value provided by binding an event on mouse scroll. “On load” simply checks if everything is loaded on the current page. “At the end of the page” will be triggered when the user scrolls down to the bottom of the page. “On idle” will be triggered when the user stops scrolling.
Once the triggers are in place, I decided to add a delay option to each trigger in order to make the popup feel more natural. Once the trigger meets its condition, the plugin will hold onto the popup for the amount of time specified in the delay option. This will give viewers time to digest what is on that page before deciding to subscribe to your website.
Last but not least, I decided to let viewers get rid of the modal window without even moving their cursor with the “autoClose” option. When the autoClose option is toggled to true, viewers can scroll back up to remove the modal window instantly.
With these options, developers can add the subscription window without sacrificing much of the overall user experience. If you insist on using a modal window to collect email addresses from viewers, I encourage you to use this plugin to avoid driving your viewers away in the process.
Basic Usage
First and foremost, make sure that you have included the latest jQuery library (preferably 2.0.0 or higher) available here, and then include jquery.subscribe-better.js together with subscribe-better.css which can be found here, into your document’s <head>.
Now, create the HTML markup as follows:
HTML:
<body> .. <div class="subscribe-me"> <a href="#close" class="sb-close-btn">x</a> ... </div> ..
</body>
Anything inside the container “subscribe-me” will be displayed in the subscription window. The close button is optional. Once the markup is completed, call the function as shown below:
JS:
$(".subscribe-me").subscribeBetter( trigger: "atendpage", animation: "fade", delay: 0, showOnce: true, autoClose: false, scrollableModal: false
);
And that’s all you need. This setup above will display the subscription modal window only when the viewer reaches the bottom of the page.
More Options
In order to provide developers with full control over the timing of your subscription modal window, here are a few options you can experiment with to find the perfect balance for your audience.
trigger: As explained earlier, you can choose which kind of trigger you want for the subscription modal to appear. Available triggers are “atendpage” which will display when the user scrolls to the bottom of the page, “onload” which will display once the page is loaded, and “onidle” which will display after you’ve scrolled. The default value is “atendpage”.
animation: You can define the entrance modal animation here. Available options are “fade”, “flyInLeft”, “flyInRight”, “flyInUp” and “flyInDown”. The default value is “fade”.
delay: With the delay option, you can set the time between the trigger and the appearance of the modal window. This works on all triggers. The value should be in milliseconds for example, 3000 for 3 seconds. The default value is 0.
showOnce: You can either set the modal window to show once per page load by toggling this to true, or show the modal every time the condition is met by toggling this to false. I highly recommend you to leave this option to true all the time if you love your users. The default value is true.
autoClose: Toggle this to true to automatically close the modal window when the user continues to scroll to make it less intrusive. The default value is false.
scrollableModal: In case you have a long form that doesn’t fit in a window, toggle this to true to make the modal window scrollable. Keep in mind that once the modal is scrollable, autoClose will no longer function to prevent the plugin from closing the window when the viewers scroll. The default value is false.
Conclusion
There you have it. A better, less intrusive solution for the annoying subscription modal window people just love to add on their websites. Personally, I do not like where this is heading one bit but if it is heading this way anyway, at least I should provide a better solution for you to choose and If you are going to implement one,
I encourage you to do so with with this plugin for a better user experience. If you have any questions or suggestions, please do let me know in the comments below.
Create Customizable Subscription Modal/Newsletter Signup Window with jQuery.Subscribe-Better.js
Geen opmerkingen:
Een reactie posten