What is an overlay?
Overlays are a new feature which allows a station to reveal a piece of content over the top of the plug-in space. This is particularly useful for video prerolls but because of the flexibility we’ve built, you can in fact load any page of HTML into this space. You can also set it to mute your station stream until the overlay has been closed. For those interested in the technology, what we have is an iframe which appears over the plugin space.
How to create an overlay
Prepare your creative
Overlays must fit the size of the plugin space (see our Styleguide pages) so it’s important to ensure that the dimensions are prepared correctly to prevent unsightly scrollbars from appearing. You need to build a web page containing your overlay content – and because it’s standard HTML/CSS/Javascript, you can build whatever you like in this space. Once it’s done, upload it to your webserver. If you’re using an adserver, you will need to follow the adserver’s usual process for uploading creatives and scheduling campaigns – just ensure you know the URL which needs to be called).
Add the close button
Radioplayer requires the ability for users to manually close the overlay if they wish. Therefore the standard-issue Skip button needs to be added to your creative and located in the top right of the overlay. You can find the code to do this by delving into your browser player files and locating the file preroll-framework/index.html. Please only use this Skip button since it is designed to reactivate the stream audio if it’s been muted by the overlay. Note that the code points to a cross-domain file (xdomainproxy.html) with a dummy URL. The cross-domain file can be found in your console directory under preroll-framework/xdomainproxy.html. You must update this dummy URL to point to the correct location of that file.
Activate your console functionality
The console needs to be activated to support the overlay. Open the index.html file in your console directory and locate the line
var xDomainProxyUrl = "";
Update the variable with the location of the xdomainproxy.html file – as mentioned in the earlier step, it’s in the preroll-framework directory so you should be able to copy the URL over from previously.
Schedule the overlay
Next you need to schedule the overlay in the Station Control Panel. Follow the steps below to achieve this:
- Login to the Station Control Panel
- Locate the Overlay Manager
- You now need to create a new overlay, so click Create Overlay
- Give the overlay a name. This can be a simple identifier or campaign name. It’s just for your reference and isn’t shown to the user.
- Provide the URL of your creative – remember this is loaded into an iframe so to prevent a broken experience for users, you must check this URL in a new web browser window first.
- If you want the browser player to mute the audio of the stream (useful if you need to show a video in your overlay) tick the Mute Audio checkbox. This means that the station stream will be silenced when your overlay appears and reactivated once it closes.
- You can set start and end dates for your overlay.
If you leave the start date blank, the console will show the interstitial immediately
If you leave the end date blank, the console wlll show the interstitial indefinitely. - If you are ready for the overlay to be made available for scheduling, click the Enabled checkbox.
Points to note
- Overlays appear each time a user opens your browser player. There is no frequency capping.
- Remember the Mute Audio checkbox if you’re playing video otherwise the soundtrack from the clip and the audio from the stream will clash
- Remember to add the Skip/Close button
- If you’re an advanced user, you can extend the basic functionality and show the Overlay at any time, not just on start-up. Take a look at the integration guide if you want to use this feature.