Used in moderation, popups can make a great feature in modern websites and are already commonly found on services like YouTube, Facebook and Twitter, to name but a few examples. These alert bars can be used to welcome a visitor to a website, advertise special offers, display important information or present other forms of content like a newsletter signup box. Popups should engage visitors landing on a website, and should not be an ugly or obtrusive annoyance.

The Gateway stack is unlike other popup scripts, in that is was written almost from scratch specifically for RapidWeaver (that means there is less chance of it tripping over existing scripts or plugins already running in a page). You can nest many different types of content within the popup placeholder. This stack features a decent selection of customisable options, to place emphasis on making non-obtrusive popups. We also make use of the opensource jQuery Cookie plugin by Klaus Hartl, so that once a popup is dismissed, it will not get shown again for a set period of time (or until the cookie is deleted).

Important New laws in the EU mean that whenever you use tracking cookies on a website, you must provide a privacy policy. This privacy policy explains in simple terms to site visitors the reasons why you use cookies on your website (e.g. to enhance user experience) and make clear that it is possible for users to browse your website without cookies enabled or to delete cookies from their web browser software. Every website should already provide a link to a basic privacy policy. If you want a free copy-and-paste privacy policy to use on your website, then you can obtain one here: http://www.generateprivacypolicy.com/

Examples

A Gateway stack is displayed at the top of this page. Refreshing the page (press F5 or CMD + R) will display it again (if you dismissed it). In this example, the cookie expiry was set to 0 minutes.

Setup

1. Once installed, drag and drop a Gateway stack into your page. It is best placed on the landing page of a website, but it is also possible to @import it into a non-stacks page using PlusKit.
2. Drag and drop content into the placeholder shown. You can use text, images or HTML code.
3. In the stack settings on the right, you can customise the animation settings and specify a cookie expiration time.
4. Optionally, you can also change any of the style settings and add support for a close button
5. If you want the entire Gateway stack to act as a link to a page, resource or URL, tick the link option and provide details of the link.

We specify the cookie expiration time in minutes. If the expiration time is set to 0, the Gateway stack will appear every time the page is loaded (as this page demonstrates). Using the converter widget in Mac OS X, you can calculate a custom expiration date. For example, if you were to enter 20,160, the Gateway stack would only appear again after 2 weeks. If you were to enter 129,600, the Gateway stack would not appear for another 90 days. Using expiration cookies means that a user won't get nagged with the same message, every time they land on the website.

Reseting Gateway cookies

Once a Gateway stack has been dismissed using the close button, it will not be shown again until the cookie expiration takes effect or until you reset the tracking cookie (whichever occurs first). This is great, because it means regular visitors to your website will not be continually nagged to read the same message, over and over again. However if you are testing the Gateway stack or you want to preview what it looks like, this can become a bit of a chore. So instead, what you can do is to copy and paste this code somewhere onto the page:

<a href="#" id="resetGateway">Click here to reset the Gateway tracking cookie.</a>

Whenever this link is clicked, the cookie is modified with yesterdays date as the expiry, so the Gateway tracking cookie expires and gets reset. You can use this link in your testing, or present the link to end users on your website, so that they can easily reset the tracking cookie themselves. This link will not delete the tracking cookie completely - it merely modifies the expiry date. Any page element with a class selector name of resetGateway.

Multiple Gateway stacks on the same website

Although slightly discouraged, it is possible to have multiple Gateway stacks in use on the same website. Traditionally this would present a problem, in that the tracking cookie generated by one Gateway stack could be read by another Gateway stack - the end result being that expiry dates get ignored or the Gateway stack on another page fails to display and many other problems. Fortunately it is possible to overcome this problem, simply through giving each Gateway stack a unique ID. To do this, simply change the number you see in the Cookie ID box, within the Gateway settings. Multiple Gateway stacks can be set to share the same ID (so user interaction on one effects the others) or each can be set with a unique ID to prevent conflicts between each Gateway stack.

Making a link or button close the Gateway stack

There may be some instances when you want a button or link to close the Gateway stack and create a tracking cookie, rather than using the conventional close button. For example, you may decide to put a newsletter signup form in your Gateway stack. Providing the code you are using enables you to add class selectors onto buttons, you can sometimes use an existing form submit button to close the Gateway stack and start the cookie tracking. All that is required is to add a class attribute to the button or link, with a value of gatewayClose. So in the example of a normal link, this is the HTML code you would use:

<a href="#" class="gatewayClose">Click here to close the Gateway stack.</a>

If you wanted a form button to also act as a close mechanism for the Gateway stack, typically you would use code similar to this:

<button type="button" class="gatewayClose">Close Gateway</button>

The are no limits on how many times you can create close buttons, although typically you would probably only need a single close button defined somewhere. When a element (such as a link or button) is clicked (and providing this element has a class of gatewayClose applied), this will result in the Gateway panel being closed and a new cookie being created.