Full Page Overlay Demo

Advisory

We are aware that overlays may require site changes to be compliant with the Better Ads standards because they cover up page content. Failure to achieve compliance may result in all of your ads being blocked by Google Chrome starting in early 2018. For more information about how you can deal with this situation, please read this article which explains everything in detail.

Recommendations

• Overlays are best implemented with large-scale banners since they can utilize a good portion of the browser window area, but you don't want to go too large as not all users will have high-resolution screens!
• We recommend serving 300x600 or 550x480 banners to desktop/laptop users and tablet users since they fit nicely on all such screens.
• Smaller sizes such as 300x250 or 180x150 can be substituted for mobile phones users, which will improve the usability of your web site on those devices.
• To make the overlay a bit more polite you can optionally set it to disable itself for the remainder of the current browsing session if a visitor clicks the close button.

Further Customization

Close Button

Don't like the default close button? You can change it by going to Settings > Basic > Code Wizard

Close Callback Function

The ability to include a JavaScript callback function in custom creatives is useful to stop audio or video from playing promptly when the overlay is closed by the user:

<script type="text/javascript">
function overlayCloseCallback() {
// your custom close logic here...
}
</script>

Remember this needs to be a global function in order for it to be visible to the overlay wrapper code. Using this callback is not necessary with HTML5 banners or video banners. Those types of banners are designed to destroy any audio/video components upon closing so they stop playing automatically.

Header and Footer

Adding a custom header and footer to the overlay simply involves including an initially hidden <div id="overlay_header"> tag and/or a <div id="overlay_footer"> tag ahead of the ad serving tag for the overlay.

Header

<div id="overlay_header" style="display: none; text-align: center; margin-bottom: 24px">
<img src="/images/logo.png" border="0" width="116" height="50" alt="AdvertServe" />
<span style="padding: 32px">Click here to continue to www.advertserve.com</span>
</div>

Footer

<div id="overlay_footer" style="display: none; text-align: center; margin-top: 24px">
<span>This advertisement from our sponsors will close in <span id="overlay_countdown"></span> seconds...</span>
</div>

Notice that we've included a special <span id="overlay_countdown"></span> tag in the footer. It will be dynamically updated with the number of seconds remaining before the overlay is closed. This is completely optional, of course, but it may be included in the header or the footer.

Advanced Techniques

You might have actualy noticed that the example overlay on this page used a subtle gradient rather than a solid background color. How did we do that? We simply override the CSS for the <div id="overlay_container"> tag to use a background image as follows.

<style type="text/css">
#overlay_container {
background-color: #EFEFEF !important;
background-image: url("/images/subpage_background.png") !important;
background-repeat: repeat-x !important;
}
</style>

Just make sure that you include !important in your CSS rules so that they override any styles that the overlay might already inherit.

Quirks Mode Considerations

If your web site happens to render in Quirks Mode you will need to correct that in order for the overlay to show up correctly in Internet Explorer, however, this can usually be accomplished by simply specifying a doctype if one is missing or by switching to a standards compatible HTML doctype.

The HTML5 doctype as well as all of the XHTML 1.0 or 1.1 doctypes, which are the most commonly used for modern or relatively modern web sites are already rendered in standards compliant mode and require no changes.

On older web sites that use HTML 4.01 you must use the complete doctype with system identifier which would be one of the following:

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">