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/

Example

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,so Gateway is displayed at all times.

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.

Print support

Gateway stack is automatically removed and blocked from displaying on printouts and PDF's. This stops it conflicting and damaging other page content.

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.

Hello World!

This is a real working example of the Gateway stack, from Stacks4Stacks. Use built-in settings to customise the animation effects, cookie expiration and styles. The Gateway stack can either be placed at the top or bottom of the page. The close button can be replaced with your own graphic. Set this message container to float either left, right or centre within the Gateway block. The width of this message container can also be customised, to match the container width of your RapidWeaver theme.

Stacks4Stacks

Stacks4Stacks provides quality stack elements for RapidWeaver, backed by fast and friendly expert support direct from the developer. All stacks are intended for use with the Stacks plugin and can be used in both fixed-width and responsive page layouts. These stacks can help you achieve new things in your web development projects, meet client objectives and basically get jobs done a whole lot faster! We provide a wide variety of both free and paid stack elements, suitable for various different tasks. Over the past few years, the Stacks4Stacks project has been responsible for bringing some of the most influential stack elements to RapidWeaver.

The entire Stacks4Stacks website was built using RapidWeaver and the Stacks plugin. The theme being used in this website is Heatwave by ThemeFlood. Should you have any questions or comments about this website or any of the stack elements featured, please feel free to get in contact. Stacks4Stacks is hosted by the rather excellent Chillidog Hosting.

RapidWeaver is a registered trademark of Realmac Software LTD, Brighton, UK.



Top 10 Stacks4Stacks