CDN & Web Components

All three strategies below are registered by the same script:

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="https://code.seeen.com/pulse/latest/seeen-pulse.js" async></script>

Web component

<div style="width: 300px; height: 250px">
  <seeen-pulse
    data-playlist-id="1d5531f5-a5f6-4104-828a-3daea73a6966"
    data-aspect-ratio="16:9"
    data-position="bottom-right"
    data-stay-visible
  ></seeen-pulse>
</div>

<seeen-pulse> observes its attributes — updating one at runtime re-renders the player in place:

document.querySelector("seeen-pulse").dataset.playlistId = "another-id";

data-seeen auto-discovery

The same attributes work on any element carrying data-seeen, no custom element required:

<div
  data-seeen
  data-playlist-id="1d5531f5-a5f6-4104-828a-3daea73a6966"
  style="width: 300px; height: 250px"
></div>

[data-seeen] elements are mounted on load and watched for afterward, so this also works for content inserted later — CMS widgets, late-loading ad slots, SPA route changes.

Imperative mount()

<div id="my-player" style="width: 300px; height: 250px"></div>
<script>
  SEEENPulse.mount("#my-player", {
    playlistId: "1d5531f5-a5f6-4104-828a-3daea73a6966",
    aspectRatio: "16:9",
    options: { stayVisible: true, position: "bottom-right" },
  });
</script>

mount() accepts a CSS selector or an Element, and returns a Promise that resolves once the playlist has loaded. SEEENPulse.unmount(target) tears a player down.

Simplest form

For a single player with no markup beyond the target element:

<div id="root" style="width: 300px; height: 250px"></div>
<script>
  window.seeen = {
    selector: "#root",
    playlistId: "1d5531f5-a5f6-4104-828a-3daea73a6966",
    options: { stayVisible: true, position: "bottom-right" },
  };
</script>
<script src="https://code.seeen.com/pulse/latest/seeen-pulse.js" async></script>

Config reference

Field / attribute	Type	Description
playlistId / data-playlist-id	string	Fetches the playlist (and its default aspect ratio) from the SEEEN CDN.
playlist / data-playlist	Playlist[] (JSON on data-*)	Provide the playlist inline instead of fetching it by id.
vastTagUrl / data-vast-tag-url	string	VAST tag URL requested for the interstitial ad break between items. Defaults to a bundled tag if omitted.
aspectRatio / data-aspect-ratio	"16:9" | "9:16" | "4:3" | "1:1"	Defaults to the fetched playlist’s aspect ratio, or 16:9.
options.position / data-position	"top-left" | "top-right" | "bottom-left" | "bottom-right" | "sticky"	Where the player docks when scrolled out of view.
options.stayVisible / data-stay-visible	boolean	Whether the player pops out at all when scrolled out of view.
width, height / data-width, data-height	number	Defaults to 300x250.

One of playlist or playlistId is required. If playlistId fails to resolve, Pulse falls back to a small bundled sample playlist and logs a warning rather than showing a blank slot.