Examples

Ad integration examples

Working iframe examples for IMA video ads and a static publisher banner.

IMA pre-roll and rewarded hint

This iframe uses Google’s public IMA test VAST tag for both placements:

Enter the first letter in Worday to request the pre-roll.
After play begins, press the hint button to request the rewarded ad.

Live iframe

Open example

Code

html

<div id="playgent-ima-example"></div>

<script src="https://static.playgent.com/player/v2.js"></script>
<script>
  Playgent.init({
    containerId: "playgent-ima-example",
    player: "plyr_Pt3dos6fzy",
    game: "worday",
    mode: "daily",
    content: "cha_worday_general_en",
    theme: "pop-minimal",
  });

  const IMA_TEST_TAG =
    "https://pubads.g.doubleclick.net/gampad/ads?" +
    "iu=/21775744923/external/single_preroll_skippable&" +
    "sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&" +
    "output=vast&unviewed_position_start=1&env=vp&correlator=";

  window.playgent_ads = {
    container: "playgent-ima-example",
    preroll: {
      format: "video",
      tag: IMA_TEST_TAG,
      noticeText: "Your game starts after this ad",
    },
    rewarded: {
      format: "video",
      tag: IMA_TEST_TAG,
      noticeText: "Your hint unlocks after this ad",
    },
  };
</script>
<script src="https://static.playgent.com/ads/v2.js"></script>

Test demand only

Google’s sample tag is for development. Replace it with your VAST tag, or configure the network code and ad unit on the Player in Hub.

This iframe displays the same static banner over the game for two SDK events:

The first input emits onStart and opens the banner.
Pressing the hint button emits onHint and opens it again.

Live iframe

Open example

Code

html

<div class="example-stage">
  <div id="playgent-banner-example"></div>

  <div id="banner-overlay" class="banner-overlay" hidden>
    <div id="event-label"></div>
    <aside class="publisher-banner" aria-label="Publisher banner">
      <span>Publisher banner</span>
      <strong>300 × 250</strong>
      <small>Replace with your creative</small>
    </aside>
    <button id="continue-button" type="button">Continue</button>
  </div>
</div>

<style>
  .example-stage {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 620px;
  }

  #playgent-banner-example {
    width: 100%;
    height: 100%;
  }

  .banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
    background: rgba(9, 9, 11, 0.94);
  }

  .banner-overlay[hidden] {
    display: none;
  }

  .publisher-banner {
    width: 300px;
    max-width: 100%;
    height: 250px;
    display: grid;
    place-content: center;
    text-align: center;
    background: #f5f5f5;
  }
</style>

<script src="https://static.playgent.com/player/v2.js"></script>
<script>
  const overlay = document.querySelector("#banner-overlay");
  const eventLabel = document.querySelector("#event-label");

  function showPublisherBanner(eventName) {
    eventLabel.textContent = eventName + " event";
    overlay.hidden = false;
  }

  document.querySelector("#continue-button").addEventListener("click", () => {
    overlay.hidden = true;
  });

  Playgent.init({
    containerId: "playgent-banner-example",
    player: "plyr_Pt3dos6fzy",
    game: "worday",
    mode: "daily",
    content: "cha_worday_general_en",
    theme: "pop-minimal",
    onStart: () => showPublisherBanner("start"),
    onHint: () => showPublisherBanner("hint"),
  });
</script>

Event behavior

This reproduces the overlay experience, but it is not an ad request. onStart fires after play begins, and onHint fires after the hint is granted.

Rewarded

Support

IMA pre-roll and rewarded hint

Code

Static banner overlay using events

Code