Overlay

Give advertisers a giant stage to make a lasting first impression with the overlay.

Customization

  • By default the overlay is automatically closed after 15 seconds, but you can adjust this from 1 to 900 seconds.
  • You can create a custom header/footer as well as customize the background color of the overlay to match the look and feel of your web sites.
  • The overlay can easily be made responsive to show appropriately sized ads to desktop/laptop users, tablet users and mobile phone users for a better user experience.

Media Support

  • Graphic banners (GIF/JPG/PNG)
  • Flash banners
  • HTML5 banners
  • Custom HTML banners, including forms with CSS and JavaScript
  • Third-Party banners from agencies and ad networks such as DoubleClick, Google, Sizmek and others

Deployment

Deploying overlays on your web site couldn't be easier. Our code wizard will generate all of the HTML code for you. All you have to do is copy and paste that code into the bottom of your web page near the </body> tag.

The code wizard also gives you the option to customize the background color of the overlay and adjust the auto-close timeout if the default 15 seconds is not suitable.

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.

Advanced Techniques

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

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.

Return to Example Gallery