govDelivery Overlay Features

Granicus builds and provides you with the code for overlays that are:

• Built on tried and true templates, with flexible branding options.
• Able to drive subscriptions to custom Quick Subscribe pages or entire Topic trees.
• Customizable to include "No Thanks" and "Remind Me Later" options to the overlay.
• Capable of including multi-choice and free-text selection questions for subscribers.
• Able to include a second screen that can include questions and request wireless phone numbers.
• Viewable in both desktop and mobile versions, allowing overlays to function properly on any device.

Planning Your Overlay

When planning your overlay, consider any color schemes, logos, or brand guidelines that your organization may have. In order to provide your organization with your overlay code, we require a few pieces of information, which you can either submit in a request using the link at the bottom of this page. Those pieces of information we require are as follows:

1. Header Title

The header title is found at the top of your overlay, and should tell your website visitors why they're seeing an overlay. Use phrases like, "Sign Up For Email Updates" or "Don't Miss Out!" to give potential subscribers context around your prompt.

2. Description

Description text is found between your Header Title and where subscribers will enter their email address. This text can indicate the types of updates a subscriber will receive ("Enter your email address to subscribe to local Parks & Recreation updates!"), or add more clarifying and enticing information for potential subscribers.

3. Overlay Name

Your organization's Overlay Name will only be used internally within your organization and govDelivery to differentiate it from any other overlays you may have. Use a name that reflects the page the overlay will be placed on, or the types of information it directs subscribers to.

4.  Questions

Questions can be added to overlays to collect more information from subscribers, such as data on their locations, demographics, and interests. An Account Admin must first create the questions before they can be included in an overlay. Overlays can contain up to 5 questions per screen that can either be free-text or select-one question types. For more information on questions and how to implement them, go to Questions Overview.

5. Second Screen

After subscribers enter their email address, they can set up a second screen displaying question fields and asking for the subscriber’s wireless phone numbers. Phone numbers and emails create two separate subscriber records. Second screens allow the subscription process to be spread out, which not only makes for less congested overlays, but also increases the likelihood of potential subscribers to submit information instead of exiting the overlay window.

6. Confirmation Message

Once your visitors have subscribed, they'll receive a short confirmation message inside the overlay, with a button allowing them to continue onto your site. Use this message as a space to thank your new subscribers, and briefly tell them what they can expect, i.e. "Thanks for subscribing! You'll soon be receiving small business management tips once a week from us!"

7. Quick Subscribe Link

Your overlay will correspond with one of your organization's Quick Subscribe pages, in order to add new subscribers to your account. Learn more about Quick Subscribe Pages.

8. Width

Overlays can be anywhere between 300 and 400 pixels wide, with 300 pixels being the minimum width and 400 pixels being the maximum width. Please decide your organization's width preference, and include this information in your request.

9. Design Assets

Lastly, we'll need any design assets or branding elements for your organization's website that you'd like included in the design of your overlay. This can include a logo, brand colors, and web fonts that you would like to be used in your overlay. Preferred dimensions for any logo or image are 344 pixels wide by anywhere from 81 to 200 pixels high.

Once you have assembled the above information, please include all of the items, which you can submit in a request from this page. We will be in contact with your organization if we require any further information or assets, and will complete your request within 3 to 5 business days. Once finished, we will reach out to provide you with the code for your new overlay. Once your organization adds this code snippet to your website, just sit back and watch your numbers grow, with no extra work on your part. It's as simple as that.

Implementing Your Overlay

After requesting your overlay, Granicus will email your organization your custom one-line script tag to embed on your website. You will need to add this snippet of script to each page of your website that you want your overlay to appear on. The script tag will look similar to this:

<!--start GovDelivery overlay-->

<script src=’http://content.govdelivery.com/overlay/js/1.js’></script>

<!--end GovDelivery overlay-->

The ideal location for the script tag on each page is right before the closing </body> tag of the web page. For the best user experience, the overlay script should be the last thing to load on the page. When implemented, the script should look something like this:

Above, the script tag is located right before the closing </body> and </html> tags on the page, which is exactly correct.

If you are using a web site that programmatically renders the page, you will need to have the embed tag added to the script or code that renders the page. If it is not possible to have the script rendered right before the closing body tag, you can add it between the <head></head> tags on the web page. Again, the later it appears in the load order, the better the user experience, but it will work no matter where you put it in the page.

Your organization's overlay will still work regardless of where the script tag is included on the page, but if it is loaded earlier, it may block portions of your page from loading before it has displayed itself.

This traditional Overlay uses local storage to determine when the overlay will display.

• Clicking "Remind Me Later" - or the X in the corner - will hide it for a set number of days (usually ~30 days).
• Clicking "No Thanks" and signing up through the Overlay will hide it "forever".
• Clicking within the background will hide it for the current session only.