Overview

The Reveal Unit allows you to quickly and easily add inline video advertising into your web pages. With a simple copy-paste of some code, you can add an attractive, high-visibility ad unit, customizable to the needs of your site. The Reveal Unit opens up when visitors reach a certain point in your page. If you haven’t seen it before, it’s best experienced, rather than described, scroll down the page to view the example. Follow the steps below to configure your Reveal Unit.
1

Sign-In to Playwire:

You should have a Playwire account already and have been approved for Reveal 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

Find Your Embed Code:

  • After logging into your Playwire Account, click “Advertising” from the left navigation
  • From the expanded menu, click “Reveal”
  • From the Embed Code section, click the copy button which will copy the embed code to your computer’s clipboard
3

Dynamic Placement:


In this example, the data-dynamic-placement attribute is set to true. This allows the Reveal Unit to automatically pick a location within the specified DOM element set in the data-content-area attribute. Additionally, the data-content-percent attribute will specify how far down the Reveal Unit will appear.
  • 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
  • Set data-dynamic-placement=”true”
  • The data-content-area is set to #mainContent. You can target any DOM element with Dynamic Placement, but we recommend targetting a <div> or block level elements
  • To select IDs <div id=”name”> – use “#”
    ex. data-content-area=”#name”
  • To select classes <div class=”name”>- use “.”
    ex. data-content-area=”.name”
  • The data-content-percent corresponds to a percentage. By default, its set to “.5” which means 50%, or in other words, within the selected element – “#mainContent”, the Reveal Unit will appear 50% inside that element
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>Reveal Unit Example: Dynamic Placement</title>
</head>
<body>

<!-- #mainContent <div> Reveal Unit will target -->
<div id="mainContent">

<p>The Reveal Unit causes a video ad to appear as you scroll past a certain point in the page. It's a great choice for news articles, blog content, and other situations where you have at least a few paragraphs of text, perhaps combined with a video or graphics. After the video ad appears, it automatically starts playing. The video starts out muted; the volume turns on if the user mouses over the ad.</p>

<p>For this example, we've set the Reveal Unit to automatically appear below this placeholder text in this paragraph.</p>

<p>Lorem ipsum dolor sit amet, cum ad quod admodum accumsan. Cum fabulas labores eu, mea cu utamur perfecto, prima oratio causae nec ea. Primis diceret eligendi ea vim, in duo dicant putent copiosae. Usu audiam virtute facilisi et. Ad delectus accusamus quo.</p>

<p>Cu solet aliquid eos. Ex maiorum epicurei efficiantur has, ea quaestio similique eam. Sea delicata eloquentiam eu, vis ne wisi mucius oporteat. Dolore aeterno voluptaria cum te. Ex cum rationibus honestatis, per inermis volutpat reformidans ea, in mea vide possim. Ipsum munere postea ius cu, te nec brute ullamcorper.</p>

<p>You can see how the Reveal Unit "opens up" between the paragraphs of text. After the sample ad ends, it will close up again.</p>

</div>

<!-- Embed MUST be placed in <body> to work properly -->
<script 
	charset="utf-8"
	data-autoload="false"
	data-config="//cdn.playwire.com/test-configs/in-game.json"
	data-height="100%"
	data-id="reveal"
	data-post-ad-container="reveal-unit"
	data-width="100%"
	src="//cdn.playwire.com/bolt/js/zeus/embed.js"
	type="text/javascript">
</script>

<!-- Only edit this part of the script -->
<script 
	data-content-area="#mainContent"
	data-content-percent=".5"
	data-dynamic-placement="true"
	data-video-id="reveal"
	src="http://cdn.intergi.com/reveal-unit/reveal.js"
	type="text/javascript">
</script>

</body>
</html>

4

Non-Dynamic Placement:

In this example, the data-dynamic-placement attribute is set to false. This allows you to specify an exact DOM element set in the data-content-area attribute where you would like the Reveal Unit to appear.
  • 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
  • Set data-dynamic-placement=”false”
  • The data-content-area is set to #revealContainer. You can target any DOM element, but we recommend targetting a <div> or block level elements
  • To select IDs <div id=”name”> – use “#”
    ex. data-content-area=”#name”
  • To select classes <div class=”name”>- use “.”
    ex. data-content-area=”.name”
  • As the user scrolls, the Reveal Unit will appear inside the revealContainer <div>
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>Reveal Unit Example: Non-Dynamic Placement</title>
</head>
<body>

<div id="article">

<p>The Reveal Unit causes a video ad to appear as you scroll past a certain point in the page. It's a great choice for news articles, blog content, and other situations where you have at least a few paragraphs of text, perhaps combined with a video or graphics. After the video ad appears, it automatically starts playing. The video starts out muted; the volume turns on if the user mouses over the ad.</p>

<p>For this example, we've set the Reveal Unit to automatically appear below this placeholder text in this paragraph.</p>

<p>Lorem ipsum dolor sit amet, cum ad quod admodum accumsan. Cum fabulas labores eu, mea cu utamur perfecto, prima oratio causae nec ea. Primis diceret eligendi ea vim, in duo dicant putent copiosae. Usu audiam virtute facilisi et. Ad delectus accusamus quo.</p>

<!-- This is where the Reveal Unit would appear -->
<div id="revealContainer"></div>

<p>Cu solet aliquid eos. Ex maiorum epicurei efficiantur has, ea quaestio similique eam. Sea delicata eloquentiam eu, vis ne wisi mucius oporteat. Dolore aeterno voluptaria cum te. Ex cum rationibus honestatis, per inermis volutpat reformidans ea, in mea vide possim. Ipsum munere postea ius cu, te nec brute ullamcorper.</p>

<p>You can see how the Reveal Unit "opens up" between the paragraphs of text. After the sample ad ends, it will close up again.</p>

</div>

<!-- Embed MUST be placed in <body> to work properly -->
<script 
	charset="utf-8"
	data-autoload="false"
	data-config="//cdn.playwire.com/test-configs/in-game.json"
	data-height="100%"
	data-id="reveal"
	data-post-ad-container="reveal-unit"
	data-width="100%"
	src="//cdn.playwire.com/bolt/js/zeus/embed.js"
	type="text/javascript">
</script>

<!-- Only edit this part of the script -->
<script 
	data-content-area="#revealContainer"
	data-content-percent=".5"
	data-dynamic-placement="false"
	data-video-id="reveal"
	src="http://cdn.intergi.com/reveal-unit/reveal.js"
	type="text/javascript">
</script>

</body>
</html>

Reveal Unit Demo

The Reveal Unit causes a video ad to appear as you scroll past a certain point in the page. It’s a great choice for news articles, blog content, and other situations where you have at least a few paragraphs of text, perhaps combined with a video or graphics. After the video ad appears, it automatically starts playing . The video starts out muted; the volume turns on if the user mouses over the ad.

For this example, we’ve set the Reveal Unit to automatically appear below this placeholder text in this paragraph.

Lorem ipsum dolor sit amet, cum ad quod admodum accumsan. Cum fabulas labores eu, mea cu utamur perfecto, prima oratio causae nec ea. Primis diceret eligendi ea vim, in duo dicant putent copiosae. Usu audiam virtute facilisi et. Ad delectus accusamus quo.

Cu solet aliquid eos. Ex maiorum epicurei efficiantur has, ea quaestio similique eam. Sea delicata eloquentiam eu, vis ne wisi mucius oporteat. Dolore aeterno voluptaria cum te. Ex cum rationibus honestatis, per inermis volutpat reformidans ea, in mea vide possim. Ipsum munere postea ius cu, te nec brute ullamcorper.

You can see how the Reveal Unit “opens up” between the paragraphs of text. After the sample ad ends, it will close up again.

  • Was this Support Article Helpful ?
  • yes   no