Q: How do I implement a list subscription popup layer for my website?

By Robert Graf-Waczenski,
Senior Applications Programmer, L-Soft

Many websites ask users to subscribe to a newsletter by showing a small popup, layered above the rest of the website content. Different strategies to show the layer can be used. Some show the layer after the user has been on the site for a certain period of time, hoping that the site has gained enough attention and that showing the layer is not observed as intrusive. A simpler approach (also used fairly often) is to have a subscribe link or button that opens the popup layer. As a result, the subscription visually happens on the organization's website without redirecting the user to a separate subscription website, which would happen if you followed the standard Maestro subscription method.

This tip describes how to achieve a subscription popup layer with LISTSERV Maestro. The basic idea is that the Maestro subscription website is running in an iframe, which is then integrated into the organization's website.

Designing the Popup Layer

The first step is to design an appealing popup layer and find a strategy to show it at the "correct" moment. Even though the popup layer may initially only be shown with an email address input and a button, the layer must be designed in such a way that it is large enough to show additional information. You will need to find a resizing and positioning strategy that is synchronized with your website's handling of browser resize events by your users. Most probably this will give you a box that is centered horizontally and vertically on top of your website and some form of "greying out" or disabling of your website "behind" the popup layer. This visual approach is recommended throughout the industry and yields the best usability. Make sure that you have some form of "Close" link or button that the script on your website is acting on. The key content element of your popup layer is an HTML iframe element that is serving the Maestro subscriber website, for example like this:

In the script of your website, you will need some form of JavaScript function that is supposed to open the "maestroPopup" layer and point the nested iframe to the correct src URL (initially probably the subscribe URL, but you may also have the same popup layer show the login page of your dataset or list).

Note that this initial step happens completely outside of LISTSERV Maestro and should be a simple task for any proficient website designer.

Customizinge Your Subscriber Area in LISTSERV Maestro

By default, the LISTSERV Maestro subscriber website contains a lot of outer layout elements that are simply not necessary when it is running in an iframe. This step suggests some basic customizations that you can make in LISTSERV Maestro to better blend the subscription form into the iframe.

Contrary to what the standard customization method would be (replicate your website layout and have the URLs point directly to LISTSERV Maestro), since Maestro's subscriber website is running in an iframe here, you will most likely not need any header or footer-type content in the Maestro header/footer template. A sample header/footer template of LISTSERV Maestro 8.2 would look something like this:

This yields a very reduced outer page layout for all subscriber pages. You will now notice that the individual pages of your dataset and list also contain elements that are not needed or needed with much reduced content. Naturally, the most important pages that you will need to adjust are the subscribe page and the subscription details page. The subscribe page can, for example, be reduced to the following content:

Note that the "Cancel" button is inside an HTML comment because Maestro requires it to be present in the layout. Since you are running the subscriber website in a popup layer with its own "Close" button, the Cancel button is actually not needed and is therefore hidden.

The subscription details page (which is the "landing page" after the user has clicked the subscribe button after having supplied a proper email address) also contains elements that you may not need in such a scenario. Similar to the "Cancel" button of the subscribe page, you may want to use HTML comments to hide the "Logout" link that this page has by default. Within a popup layer such as the one you are now using, a logout link is not needed because the user can simply close the popup dialog.

Other pages may also need some adjustments, but the most important ones are the subscribe page and the subscription details page.

The end result is that you can run the subscriber website from within your own popup that is layered on top of your external website. Since the Maestro layout is now customized, you will now have to ensure that you:

1. Do not link directly to the Maestro subscriber website pages

Since your layout customization only looks correct if it is running inside your iframe, you will need to make sure that all public access goes through your website and passes through your "openMaestroPopup" function, which then sets the correct iframe src URL and opens the popup layer. On your own website, this can be done easily by using URLs of the following form:

Your script function then has to set the correct iframe src URL with the parameter given and open the layer. The "Subscriber Access URLs" page lists all the URLs that you will need to find the correct replacement for the [URL_HERE] token in the snippet shown above.

2. Handle a user directly accessing the Maestro subscriber page through its own URL

Since the layout now looks incorrect when the page is served from a native top window, you may need some form of script in the Maestro page customizations to detect this situation and act accordingly. For example, if your website is running with some form of active server technology that is capable of acting dynamically on URL parameters, a possible redirect script on a customization of the login page could look like this:

Your website would then load the login page URL (which can be found on the usual "Subscriber Access URLs" utility page in Maestro) into the iframe and open the popup, thus showing the login page of the Maestro subscriber website in the iframe.

A very important URL that you now have to handle differently is the unsubscribe URL that you are supposed to have in your marketing messages. The value of the {{*UnsubscribeURL}} system drop-in resolves to the URL pointing back to the Maestro subscriber website. This means that you no longer can use the value of this drop-in directly in your messages but you must instead augment your website to open the Maestro popup layer with a URL that is given dynamically as a parameter (this is necessary because the actual URL is different for each mail job in Maestro). In your messages you would, therefore, no longer use a link like this:

Instead, you would use:

Note that the code example above makes use of LISTSERV's &*URLENCODE() function. This is necessary because you are using a URL as the value of a parameter in another URL.

Subscribe to LISTSERV at Work.