Skip to main content

 

Granicus Insights

Using Overlays

The fastest and easiest way to grow your digital audience is the use of an overlay, which converts your organization's website visitors into engaged email subscribers. A Granicus client study found that participating government organizations see between 250% to 500% subscriber growth upon the implementation of an overlay.

Since implementing an overlay, the Department of Interior (DOI) has benefitted from a 250% increase in subscribers. In the first 30 days of implementing a sign-up overlay on their website, Ready.gov experienced a 518% increase in subscribers.

The best part about using overlays with Communications Cloud, is that they're easy to obtain and implement, and there’s absolutely no additional cost to your organization. Simply provide Granicus with your organization's branding preferences, and we'll send you a line of 508 compliant JavaScript overlay code that matches the look and feel of your website, all for free. Once implemented, you'll be passively increasing your audience by leaps and bounds every day.

Communications Cloud 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.
  • ADA Section 508 compliant.
  • 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.
  • Not designed to use cookies, complying with certain government requirements.
  • Built using secure HTML5 storage.

Overlay Browser Compatibility

Browser

Versions

Supported? 

Android (4+)

4+

YES

Chrome (21+)

21+

YES

Firefox (22+)

22+

YES

Internet explorer (8+)

8+

YES

Safari (5+) and Safari (in-app) 

5+

YES

As a digital communications best practice, overlays are one of the best methods your organization has to help you reach more people. And if your organization isn't currently using one, you’re missing out on a huge opportunity to grow your audience and convert your website visitors into engaged subscribers of your email updates.

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 Communications Cloud 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. To learn more about Quick Subscribe pages, or for information on creating a new Quick Subscribe page for your overlay, click here.
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.

Adding Your Overlay to a Wordpress Site

If your organization uses a Wordpress website, you can add the embed script tag to the footer.php file in your custom theme. This requires a one-time change, and assumes you have access to the Wordpess administrator interface for your website. 

  1. Open the Wordpress Admin portal for your site. The url is typically:

    http://www.mysite.gov/wp-admin/
     
  2. Navigate to Appearance > Editor.
  3. In the list of Templates to the right, click footer.php.
  4. Paste in the script embed code you received from Granicus right before the tag: <?php wp_footer(); ?>
  5. Click Update File to save the file.
  6. Test your web site to make sure the overlay appears.
    Note: If overlay does not appear it may because you need to clear your local browser storage.

 

What's Next

  • Was this article helpful?