“Always be closing” certainly ranks among the most recognized of all sales-related quotes, an adage so old that its origin has apparently been lost to time. For those engaged in online commerce, the closing process should begin with a potential customer’s very first visit to your website. The specific approach can take many forms, however one of the most popular involves inviting the visitor to subscribe to the website newsletter. After all, if the visitor is interested enough to proactively provide his e-mail address, then perhaps he can be later swayed into making a purchase thanks to some tantalizing special offer communicated in some future newsletter.
The traditional approach involved simply embedding a newsletter subscription form into the website, often ubiquitously visible within the website layout’s sidebar. More recently, websites have taken a more aggressive approach in terms of inviting visitors to subscribe to a newsletter or consider some other special offer. The approach involves displaying a popup window the very first time a visitor navigates to the website. The visitor has the option of either responding to the offer or providing his e-mail address by interacting with the popup, or can choose to close the popup at which point it won’t reappear for a (hopefully) significant period of time.
In this article I’ll show you how to implement the client-side component of this feature using jQuery and two jQuery plugins, namely SimpleModal and jquery-cookie. With this component in place, integrating the server-side PHP and MySQL is a trivial matter.
Before we begin, please note that while this feature can be quite effective while not risking the visitor’s ire, like any popup-oriented feature it can be abused and quickly begin to annoy potential customers. Therefore be sure to exercise prudence in terms of gauging the amount of time which should pass before again prompting a visitor in this manner.
Creating the Popup Window with SimpleModal
The strategy is to place the newsletter subscription prompt squarely in front of the visitor the first time he visits the website, inviting him to either take action or disregard the offer by closing the window. If the visitor acts upon the offer, then the popup window should not appear again unless you decide to provide a different offer at a later point in time. If the visitor disregards the offer by closing the window, then the prompt should not again appear for (in my opinion) some significant period of time.
This behavior is easily implemented using jQuery and the SimpleModal jQuery plugin. Although perhaps dozens of jQuery plugins capable of rendering popup windows exist, I’m partial to SimpleModal because of its intuitive interface. For the purposes of this article we’ll create the newsletter subscription popup presented in Figure 1.
Creating a modal popup using SimpleModal is accomplished in four steps. First you’ll integrate jQuery and the SimpleModal jQuery plugin into your website. In order to save bandwidth I recommend linking to Google’s hosted jQuery library, and hosting the latest SimpleModal library locally, as demonstrated here:
<script src="http://www.google.com/jsapi" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
<script src="jquery.simplemodal.1.4.1.min.js" type="text/javascript"><!--mce:2--></script>Next, you’ll create the DIV which hosts the popup contents. Notice how this DIV contains no JavaScript! In a moment we’ll bind the DIV ID basic-modal-content to SimpleModal’s modal method, allowing for clean separation of the HTML and JavaScript.
<div id="basic-modal-content">
<h3>Subscribe to our newsletter!</h3><p> </p>
<p>Subscribe to our newsletter and receive occasional updates about product specials and new offerings.</p><p> </p>
<form enctype="application/x-www-form-urlencoded" method="get"><p> </p><p>
<label for="email">Your e-mail address:</label><br />
<input name="email" size="35" type="text" />
</p><p>
<input class="button" name="submit" type="submit" value="Subscribe" /></p></form><p> </p><p><a class="simplemodal-close">No thank you</a></p>
</div>The CSS styling is accomplished by overriding several styles which SimpleModal uses when creating the popup, including notably
#simplemodal-overlay and #simplemodal-container. For the purposes of this article I’ve borrowed heavily from the SimpleModal Basic Modal Dialog demo, so be sure to refer to the demo’s corresponding source code for more information about styling. Additionally, because the modal window’s contents shouldn’t be displayed within the page (we want it to appear only when it is presented in modal form), the following CSS is used to hide the DIV:#basic-modal-content {display:none;}All that remains in terms of displaying the window is to bind the modal window DIV to SimpleModal’s
modal() method:<script type="text/javascript"><!--mce:3--></script>Note how an anonymous function is passed to the onClose option. When the window is closed (done when the visitor clicks on any dialog window element associated with the simplemodal-close class), the anonymous function will execute. While not necessary now, this anonymous function will play an important role when ensuring the window does not reappear following closure by the visitor.
