Used in moderation, with careful planning and setup, popups can become a useful function in modern websites. Popups can be used for a variety of different tasks. The Gateway stack is unlike other popup stacks, 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 by a user, it will not get shown again for a set period of time (or until the cookie is deleted).

Possible uses for the Gateway stack include:
  • Alert users to the presence of cookies on your website, with links to your privacy policy or to opt-out of analytical tracking (mandatory in Europe)
  • Display an email newsletter signup form, which can link to a service like MailChimp or ConstantContact
  • Present links or icons to different social networking services, so you can connect and communicate with more users away from your website
  • Emphasise important tidbits of information, like business opening times, discount days, special promotions etc.
  • Provide links to other relevant content or products which your customers might be interested in seeing
  • Advertise special events, new products or new additions to your website


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.

We also use the Gateway stack (in combination with UsefulStack) on the homepage of the Stacks4Stacks website; to display mandatory information about website cookies and provide an opt-out link for Google Analytics. In this example, Gateway stack automatically fades-out when the page is scrolled vertically more than 500px. Gateway remains hidden for 28 days or until the cookie is deleted (whichever happens first).


  1. Once installed, drag and drop a Gateway stack into your page. It is possible to @import Gateway into a non-stacks page using PlusKit (not included).
  2. Drag and drop content into the Gateway 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.

Tip: Gateway 2.3.0 and later include a checkbox option in the Gateway settings to toggle tracking cookies on and off. Turning cookies off is useful for previewing the style and behaviour of your Gateway stack in RapidWeaver (Gateway will show each time the page is refreshed or scrolled down). Prior to publishing your website, you can optional re-enable tracking cookie support again. Tracking cookies are enabled by default.

Cookie expiration timings

Cookies are permanently enabled in Gateway. In the stack settings for Gateway, 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 or an online convertor tool, you can calculate a custom expiration time. For example, if you were to enter 20160, the Gateway stack would only appear again after 2 weeks. If you were to enter 129600, the Gateway stack would not appear for another 90 days. Using expiration cookies means that a user won't get continually nagged with the same message, every time they land on the website! If in the meantime a user deletes the cookie in their web browser, then the Gateway stack will get shown again.

Reseting Gateway cookies

Once a Gateway stack has been dismissed or removed from the page automatically (through the timeout or scroll behaviours), 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="#" class="ResetGateway">Click here to reset the Gateway tracking cookie.</a>
Whenever this link is clicked, the cookie is 'zapped', so the Gateway tracking cookie immediately 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. Cookies can also be view and deleted from the web browser developer tools.


Behaviours are an exciting new feature which were added in Gateway 2.0. The basic principle of behaviours is to give you, the web developer, more power to change when Gateway stacks are shown or hidden. All this can be done quickly through the stack settings, using the new Behaviours pull-down menu. Five behaviours are provided for you to choose from and use:
  • Display Until Dismissed is the default behaviour. Gateway will check for a cookie on page load. If no cookie is found, the Gateway stack will fade into view and remain displayed until a user clicks the close button.
  • Display On Page Scroll works by hiding the Gateway stack when the page is first loaded. When the page is scrolled down (beyond the distance you set), the Gateway stack will fade into view (if no cookie is found). Gateway will remain displayed, until a user clicks the close button.
  • Display At Page End is as the description implies, and will keep the Gateway stack hidden until a user scrolls right down to the bottom of a page. If no cookie is found, then the Gateway stack will display. A user can hide Gateway by clicking it's close button.
  • Hide Automatically is a simple behaviour to check if a Gateway cookie already exists. If no cookie is found, then Gateway will display on the page. However Gateway will be hidden (and a cookie set) after a defined period of time (this can be set in the stack settings).
  • Hide On Page Scroll works by displaying Gateway stack when the page has finished loading (and if no Gateway cookie can be found). When the user scrolls down the page (beyond the distance you set), Gateway will be hidden and a cookie will be set.

Multiple Gateway stacks on the same website

It's 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. 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.

Important Laws in the EU dictate 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:

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.
Bookmark or share this page
Baidu 百度
Renren 人人网
Weibo 微博
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!


Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.