Overview

The Pre-Content Unit is an easy way to show video ads before games, downloads, or any content. The latest version of the Ad Wrapper automatically pulls in the ad tags that have been associated with your account, so all you have to do is put the code in your page, place your game or other content within the <div id=”my-content”> – inside the area denoted by “Your content goes here”. The Pre-Content Ad Wrapper works by hiding your content while a snippet of Javascript plays an ad within the Bolt Video Player. Once the ad is finished, the Bolt Video Player hides itself, and reveals your content.
1

Sign-In to Playwire:

You should have a Playwire account already and have been approved for Pre-Content Ads by the Playwire team.
  • If you already have a Playwire account, sign-in to the Playwire Platform here
  • If you do not have a Playwire account, sign-up for the Playwire Platform here
2

Embed Code & Customization:

  • After logging into your Playwire Account, click “Advertising” from the left navigation
  • From the expanded menu, click “Pre-Content”
  • From the Embed Code section, click the copy button which will copy the embed code to your computer’s clipboard
  • Click the “Customize” tab to view the Pre-Content Customizer
  • Within the Customizer, you can change the Background color, Loader color and Loader style
  • You also have the ability to show a custom logo
3

Simple Embed Example:

  • Paste your embed code into the <body> of your web page
  • Use the embed from the Playwire backend in production, NOT the example in this section
  • The default size is set to 640×360, you can edit the size by editing the parent <div> dimensions
  • Ads will autoplay on page load, if you need to delay or control when it plays, use the Lazy Load implementation in the next step.
Important

Embed code will NOT work without a web server or local server environment such as MAMP or XAMPP

<!DOCTYPE> must be declared at the top of your HTML document or you may encounter errors in Internet Explorer


<!DOCTYPE html>
<html>
<head>
	<title>Pre-Content Example</title>
</head>
<body>

<!-- Embed MUST be placed in <body> to work properly -->

<!-- Change dimensions in div below -->
<div style="width:640px;height:360px;">

	<!-- Place your content within this div -->
	<div id="my-content" style="display:none;position:absolute;">

		*** Your content goes here ***

	</div>

	<script
		data-hidden-container="my-content"	
		data-config="//cdn.playwire.com/test-configs/pre_content.json"
		data-width="100%"
		data-height="100%"
		type="text/javascript"
		charset="utf-8"
		src="//cdn.playwire.com/bolt/js/zeus/embed.js">
	</script>
	
</div>

</body>
</html>

4

Lazy Loading:

  • In this example, we will dynamically inject a Pre-Content Ad Wrapper when a user clicks a button
  • Use the config from the Playwire backend in production, NOT the example in this section
  • We add a click event listener to the button
  • We append the player script to the DOM
  • The data-onready attribute calls the boltEventHandlers script when fully loaded
  • We can listen to Bolt events and trigger actions, ie When the Ad Starts… etc
  • The ad will play and the data-hidden-container “my-content” will appear when the ad completes
  • Callbacks, Event Listeners, Etc… – Explore the Bolt Video Player API documentation for more info

  • Use Cases with Code Examples
    • Default Pre-Content Demo
    • Pre-Content Modal On Click Demo
    • Pre-Content Modal On Enter Demo
    • Pre-Content Modal On Timer Demo
    • Pre-Content Fullscreen Demo
    • Pre-Content Modal Detect AdBlock Demo

<!DOCTYPE html>
<html>
<head>
	<title>Pre-Content Example</title>
</head>
<body>

<!-- Embed MUST be placed in <body> to work properly -->

<!-- Change dimensions in div below -->
<div style="width:640px;height:360px;">

  <!-- Place your content within this div -->
  <div id="my-content" style="display:none;">
	<h1>You successfully watched an Ad!</h1>
  </div>

  <button id="press-me">Create Pre-Content Modal</button>

  <div id="pre-content-container"></div>

</div>

<!-- Lazy Load JavaScript -->
<script>

  // change config here to your account's config link
  var config = '//cdn.playwire.com/test-configs/pre_content.json';
  var player = 'pre-content-player';
  var button = document.getElementById('press-me');
  
  button.addEventListener('click', function() {

    var container = document.getElementById('pre-content-container');
    var script = document.createElement('script');
    script.src = '//cdn.playwire.com/bolt/js/zeus/embed.js';
    script.type = 'text/javascript';
    script.setAttribute('data-config', config );
    script.setAttribute('data-width', '100%');
    script.setAttribute('data-height', '100%');
    script.setAttribute('data-id', player);
    script.setAttribute('data-hidden-container', 'my-content');
    script.setAttribute('data-onready', 'window.boltEventHandlers');
    container.appendChild(script);

  });

  function boltEventHandlers(){
    console.log('Pre-Content Player loaded');

    Bolt.on( player , Bolt.BOLT_AD_STARTED, function() {        
      console.log('Pre-Content Ad Started');
    });

    Bolt.on(player , 'showHiddenContainer', function() {        
      console.log('Pre-Content Finished');
    });

  }

</script>

</body>
</html>

Lazy Load Demo