Renderers · Documentation

The Ad Placement API response now includes the renderers utilized for displaying the ads on the page. Within the response, you will discover the URLs for the renderer scripts, which can be employed to independently render different containers and ads on your webpage. Below, you will discover instructions on how to use each of these renderers.

Container Renderers

These renderers are designed to generate various types of containers where you can conveniently display the ads. The render function of the container renderers will return an array with the placeholders that you can use to place the ads.

Fixed Container Renderer

Used to render a container with a fixed position on the page.

This script will expose the window.FixedContainerRenderer variable, which you can use to interact with the renderer. For example, by calling window.FixedContainerRenderer.render(zone, placeholder); it is possible to render the container on the page.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the container

Zone object for rendering: This object is similar to the ones returned in the zones property of the Ad Placement API response. It contains the zone id along with the necessary data for rendering, as illustrated in the example below:

{
  "idzone": 9999999,
  "data": {
    "width": 300,
    "height": 250
  }
}

Data Properties:

Property Name	Type	Required	Description
width	Number	Yes	Width of the element in pixels
height	Number	Yes	Height of the element in pixels

Sticky Container Renderer

This script will expose the window.StickyContainerRenderer variable, which you can use to interact with the renderer. For example, by calling window.StickyContainerRenderer.render(zone, placeholder); it is possible to render the container on the page.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the container
	`cookieConsent`	No	Boolean indicating if the user consents to cookies
`setBorder()`	`zoneId`	Yes	ID of the zone to set the border for
	`width`	Yes	Width of the border
	`color`	Yes	Color of the border
`removeBorder()`	`zoneId`	Yes	ID of the zone to remove the border from
`setPosition()`	`zoneId`	Yes	ID of the zone to set the position for
	`horizontalPosition`	Yes	Horizontal position of the zone
	`verticalPosition`	Yes	Vertical position of the zone

Zone object for rendering:

This object is similar to the ones returned in the zones property of the Ad Placement API response. It contains the zone id along with the necessary data for rendering, as illustrated in the example below:

{
  "idzone": 9999999,
  "data": {
    "width": 300,
    "height": 250,
    "frequency_period": 1440,
    "v_pos": "top",
    "h_pos": "left",
    "border_width": 0,
    "border_color": "fd7a9e"
  }
}

Data Properties:

Property Name	Type	Required	Description
width	Number	Yes	Width of the element in pixels
height	Number	Yes	Height of the element in pixels
frequency_period	Number	No	Length of time in minutes that the container is hidden for once it is closed (needs cookie consent from user)
v_pos	String	No	Vertical position of the container: top, bottom or middle
h_pos	String	No	Horizontal position of the container: left, right or center
border_width	Number	No	Width of the border, if there is one
border_color	String	No	Hex value of the border color, if there is one

Instant Message Container Renderer

Used to render a instant message container on the page.

This script will expose the window.InstantMessageContainerRenderer variable, which you can use to interact with the renderer. For example, by calling window.InstantMessageContainerRenderer.render(zone, placeholder); it is possible to render the container on the page.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the container
	`cookieConsent`	No	Boolean indicating if the user consents to cookies

{
  "idzone": 9999999,
  "data": {
    "width": 300,
    "height": 250,
    "frequency_period": 30
  }
}

Data Properties:

Property Name	Type	Required	Description
width	Number	Yes	Width of the element in pixels
height	Number	Yes	Height of the element in pixels
frequency_period	Number	No	Length of time in minutes that the container is hidden for once it is closed (needs cookie consent from user)

Mobile Instant Message Container Renderer

Used to render a instant message container for mobile on the page.

This script will expose the window.MobileInstantMessageContainerRenderer variable, which you can use to interact with the renderer. For example, by calling window.MobileInstantMessageContainerRenderer.render(zone, placeholder); it is possible to render the container on the page.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the container
	`cookieConsent`	No	Boolean indicating if the user consents to cookies

{
  "idzone": 9999999,
  "data": {
    "width": 300,
    "height": 250,
    "frequency_period": 30,
    "capping": 2
  }
}

Data Properties:

Property Name	Type	Required	Description
width	Number	Yes	Width of the element in pixels
height	Number	Yes	Height of the element in pixels
frequency_period	Number	No	Length of time in minutes that the container is hidden for once it is closed (needs cookie consent from user)
capping	Number	No	Number of times the container is shown to the user (needs cookie consent from user)

Fullpage Interstitial Container Renderer

Used to render a fullpage interstitial container for desktop or mobile on the page.

This script will expose the window.FullpageInterstitialContainerRenderer variable, which you can use to interact with the renderer. For example, by calling window.FullpageInterstitialContainerRenderer.render(zone, placeholder); it is possible to render the container on the page.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the container
	`cookieConsent`	No	Boolean indicating if the user consents to cookies

{
  "idzone": 9999999,
  "type": "desktop_fullpage_interstitial",
  "data": {
    "frequency_count": 30,
    "frequency_period": 5,
    "frequency_trigger_type": 0,
    "ad_trigger_method": 2,
    "ad_trigger_classes": "example-class",
    "first_trigger_clicks": 0,
    "next_trigger_clicks": 0,
    "chrome_enabled": 1,
    "media": "img_banner"
  }
}

Data Properties:

Property Name	Type	Required	Description
frequency_count	Number	No	Number of times the ad will be displayed within the selected frequency period (needs cookie consent from user)
frequency_period	Number	No	The time, in minutes, during which we monitor the number of times the ad has been displayed (needs cookie consent from user)
frequency_trigger_type	Number	No	Indicates the frequency trigger type: `0` for time and `1` for the number of clicks on links within the website
ad_trigger_method	Number	No	Indicates the ad trigger method: `2` to trigger on links with specific classes or `3` to trigger on any link
ad_trigger_classes	String	No	Link classes that trigger the ad, seperated by commas
first_trigger_clicks	Number	No	Number of clicks required to trigger the ad when using the click frequency trigger type
next_trigger_clicks	Number	No	Number of clicks required after the first trigger to activate the ad when using the click frequency trigger type
chrome_enabled	Number	No	Browser compatibility: `0` indicates non-Chrome browsers, `1` encompasses all browsers, and `2` represents Chrome-only
media	String	No	Media type of the ad: `img_banner` for images, `video_banner` for video, `iframe_link` for iframes

Group Container Renderer

This script will expose the window.GroupContainerRenderer variable, which you can use to interact with the renderer. For example, by calling window.GroupContainerRenderer.render(group, placeholder); it is possible to render the container on the page.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`group`	Yes	Group object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the container

Group object for rendering:

This object is similar to the one returned in the group property of the Ad Placement API response, when there is an ad group. It contains the group orientation, along with the ad_items array, containing information for each ad:

{
  "orientation": "horizontal",
  "ad_items": [
    {
      "idzone": 9999999,
      "type": "banner",
      "data": {
        "url": "https://example.com/click.php?data=H4sIAAAAAAAAA02QwWrDMAyGX8WXXo0ly45y3GWXHvYMju2sYYlTmtBkoIefE8ZWJBDo__VJyLFp0bZiNMhtXe_Lxb5d8L3mtm067yEtOs6TiBHwzN5hLXJ_DM.85H2.lzBlXUYBown1QWG0hi2AUMvE3IgzLEIgVsBVjBFrzI6uAmuIp9Y07KzxTLbRHhyBbQ4GE0JjoQ5k71oPTZ.wpxhDqADX.9C7lKAjynKYlu.ShhjWYS6_dz_m.LXIuVK9qOpU1amqcY5hVGte1qF8qi13qgul5Ie6rdOo5CT_xwFDlpcO_Tmc4OlAkifJx1UgY.YOWsTgsE9M2XV9fUhMCMaC.QGJvJS8ewEAAA--",
        "impression": "https://example.com/cimp.php?t=api&data=H4sIAAAAAAAAA1VOW2oDMQy8Si+wRpIlW85/L1Ao5NfxA5a2m5AtZQs6fJ0NaakGoZE0jERAfoI4QXhCOAAdWA3BMTlwaMfj0Rjtcp2/2tq282XJH80t74ZJAsCjRNSUwDgpq0YTUBOFRD6Zkgf1iIZi3uABBwA4hPb8+rLnEDgcIzIPsNHY3K8bqfHgsIEFThBVPARlH11AYfTxdkCZMHq0FiQFjL1S51JyHl7SQ+5SK56Y283I1u+lziV/zufFtS3X1V3P5W39fW1Y6S78w3RvR4DtLA+TYvZPBCbj/TtDM2Y65Rqoasu5x6A9+xTRF+1dSMoPx6PFxXoBAAA=",
        "image": "https://example.com/library/195600/8f89c9427462f10fe612a8c8b35eb290e10ec348.jpg",
        "optimum_image": "https://example.com/library/195600/ec575ed6d9f7560ec6190ef9dfdaedab36ca2fdf.webp",
        "width": 300,
        "height": 250
      },
      "multizoneid": 9999999
    },
    {
      "idzone": 9999999,
      "type": "banner",
      "data": {
        "url": "https://example.com/click.php?data=H4sIAAAAAAAAA02QwWrDMAyGX8WXXo0ly45y3GWXHvYMju2sYYlTmtBkoIefE8ZWJBDo__VJyLFp0bZiNMhtXe_Lxb5d8L3mtm067yEtOs6TiBHwzN5hLXJ_DM.85H2.lzBlXUYBown1QWG0hi2AUMvE3IgzLEIgVsBVjBFrzI6uAmuIp9Y07KzxTLbRHhyBbQ4GE0JjoQ5k71oPTZ.wpxhDqADX.9C7lKAjynKYlu.ShhjWYS6_dz_m.LXIuVK9qOpU1amqcY5hVGte1qF8qi13qgul5Ie6rdOo5CT_xwFDlpcO_Tmc4OlAkifJx1UgY.YOWsTgsE9M2XV9fUhMCMaC.QGJvJS8ewEAAA--",
        "impression": "https://example.com/cimp.php?t=api&data=H4sIAAAAAAAAA1VOW2oDMQy8Si+wRpIlW85/L1Ao5NfxA5a2m5AtZQs6fJ0NaakGoZE0jERAfoI4QXhCOAAdWA3BMTlwaMfj0Rjtcp2/2tq282XJH80t74ZJAsCjRNSUwDgpq0YTUBOFRD6Zkgf1iIZi3uABBwA4hPb8+rLnEDgcIzIPsNHY3K8bqfHgsIEFThBVPARlH11AYfTxdkCZMHq0FiQFjL1S51JyHl7SQ+5SK56Y283I1u+lziV/zufFtS3X1V3P5W39fW1Y6S78w3RvR4DtLA+TYvZPBCbj/TtDM2Y65Rqoasu5x6A9+xTRF+1dSMoPx6PFxXoBAAA=",
        "image": "https://example.com/library/195600/8f89c9427462f10fe612a8c8b35eb290e10ec348.jpg",
        "optimum_image": "https://example.com/library/195600/ec575ed6d9f7560ec6190ef9dfdaedab36ca2fdf.webp",
        "width": 300,
        "height": 250
      },
      "multizoneid": 9999999
    }
  ]
}

Content Renderers

These renderers are responsible for displaying the ads within a container. Some are self-contained and do not require a container.

Banner Content Renderer

This script will expose the window.BannerRenderer variable, which you can use to interact with the renderer. For example, by calling window.BannerRenderer.render(zone, placeholder); it is possible to render the ad.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the ad, such as a container

Zone object for rendering:

{
  "idzone": 9999999,
  "data": {
    "url": "https://example.com/click.php?data=H4sIAAAAAAAAA02QwWrDMAyGX8WXXo0ly45y3GWXHvYMju2sYYlTmtBkoIefE8ZWJBDo__VJyLFp0bZiNMhtXe_Lxb5d8L3mtm067yEtOs6TiBHwzN5hLXJ_DM.85H2.lzBlXUYBown1QWG0hi2AUMvE3IgzLEIgVsBVjBFrzI6uAmuIp9Y07KzxTLbRHhyBbQ4GE0JjoQ5k71oPTZ.wpxhDqADX.9C7lKAjynKYlu.ShhjWYS6_dz_m.LXIuVK9qOpU1amqcY5hVGte1qF8qi13qgul5Ie6rdOo5CT_xwFDlpcO_Tmc4OlAkifJx1UgY.YOWsTgsE9M2XV9fUhMCMaC.QGJvJS8ewEAAA--",
    "impression": "https://example.com/cimp.php?t=api&data=H4sIAAAAAAAAA1VOW2oDMQy8Si+wRpIlW85/L1Ao5NfxA5a2m5AtZQs6fJ0NaakGoZE0jERAfoI4QXhCOAAdWA3BMTlwaMfj0Rjtcp2/2tq282XJH80t74ZJAsCjRNSUwDgpq0YTUBOFRD6Zkgf1iIZi3uABBwA4hPb8+rLnEDgcIzIPsNHY3K8bqfHgsIEFThBVPARlH11AYfTxdkCZMHq0FiQFjL1S51JyHl7SQ+5SK56Y283I1u+lziV/zufFtS3X1V3P5W39fW1Y6S78w3RvR4DtLA+TYvZPBCbj/TtDM2Y65Rqoasu5x6A9+xTRF+1dSMoPx6PFxXoBAAA=",
    "image": "https://example.com/library/195600/8f89c9427462f10fe612a8c8b35eb290e10ec348.jpg",
    "optimum_image": "https://example.com/library/195600/ec575ed6d9f7560ec6190ef9dfdaedab36ca2fdf.webp",
    "width": 300,
    "height": 250
  }
}

Data Properties:

Property Name	Type	Required	Description
width	Number	Yes	Width of the element in pixels
height	Number	Yes	Height of the element in pixels
url	String	Yes	URL that the ad directs to
impression	String	Yes	URL of the impression tracker
image	String	Yes	URL of the image to be used on the ad
optimum_image	String	No	URL of the optimized ad image, for example an mp4 for an animated ad

Native Content Renderer

This script will expose the window.NativeRenderer variable, which you can use to interact with the renderer. For example, by calling window.NativeRenderer.render(zone, placeholder); it is possible to render the ad.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the ad, such as a container

Zone object for rendering:

This object is similar to the ones returned in the zones property of the Ad Placement API response. It contains the zone id along with the necessary data for rendering. For native, the layout and ad_items will need to be included, as illustrated in the example below:

{
  "idzone": 9999999,
  "type": "native_ad",
  "data": {
    "layout": {
      "widgetHeaderContentHtml": "<a target=\"_blank\" href=\"https://www.exads.rocks\" rel=\"nofollow\">Powered By <span></span></a>",
      "branding_logo": "//static.example.com/widget-branding-logo.png",
      "branding_logo_hover": "//static.example.com/widget-branding-logo-hover.png",
      "itemsPerRow": 4,
      "itemsPerCol": 2,
      "font_family": "Arial, Helvetica, Verdana, sans-serif",
      "header_font_size": "12px",
      "header_font_color": "#999999",
      "widget_background_color": "transparent",
      "widget_width": "1830px",
      "minimum_width_for_full_sized_layout": "450px",
      "item_height": "300px",
      "item_padding": "10px",
      "image_height": "450px",
      "image_width": "450px",
      "text_margin_top": "3px",
      "text_margin_bottom": "3px",
      "text_margin_left": "0px",
      "text_margin_right": "0px",
      "title_font_size": "16px",
      "title_font_color": "#000000",
      "title_font_weight": "normal",
      "title_decoration": "none",
      "title_hover_color": "#0000FF",
      "title_hover_font_weight": "normal",
      "title_hover_decoration": "none",
      "description_font_size": "14px",
      "description_font_color": "#555555",
      "description_font_weight": "normal",
      "description_decoration": "none",
      "description_hover_color": "#0055FF",
      "description_hover_font_weight": "normal",
      "description_hover_decoration": "none",
      "open_in_new_window": 1,
      "mobile_responsive_type": 1,
      "header_is_on_top": 1,
      "header_text_align": "right",
      "title_enabled": 1,
      "description_enabled": 0,
      "image_border_size": "",
      "image_border_color": "",
      "text_align": "left",
      "customcss_enabled": 0,
      "customcss": null,
      "header_enabled": 1,
      "mobile_breakpoint": 450,
      "spacing_v": 10,
      "spacing_h": 10,
      "zoom": 1,
      "mobile_rows": 2,
      "mobile_cols": 1,
      "use_v2_script": 1,
      "text_enabled": 1,
      "mobile_image_width": 450,
      "mobile_text_box_size": 90,
      "mobile_text_enabled": 1,
      "mobile_text_position": "bottom",
      "mobile_image_height": 450,
      "delaySeconds": 0,
      "frequency": 0,
      "frequencyCount": 0,
      "publisherAdType": "native-recommendation",
      "item_spacing_on_each_side": "5px",
      "text_position": "bottom",
      "text_box_size": "90px",
      "widget_height": "1120px",
      "brand_enabled": 1,
      "brand_font_size": "11px",
      "brand_font_color": "#555555",
      "brand_font_weight": "normal",
      "brand_decoration": "none"
    },
    "ad_items": [
      {
        "image": "https://static.example.com/library/195600/0c7cc52e6f003979b1991c71a2c88a3f26da85cc.jpg",
        "url": "https://syndication.example.com/click.php?data=H4sIAAAAAAAAA02PvW7DMAyEX0VLVoGSqL.xS5cOfQZaolujjhzERpwCfPgqRtEGx4l3.A7nE2TrnIA28rltl_XkXk72td..73rjdZvahy7LWQTEhJQhBYtBLtfpxivfl0ujM.s2iwGNVj84yTpINmfBnDAbJx6SCBpxYnzHgIjpkoBUnXWxsKuUNeQU0WRAk3yv8Sn3JAefg4ljtSOWQuQA_Bho9LWaAZE7B2T9bnUqtE1L03ynuurrUr5WObrUk6sOVx2umpdCs_qdqHYe1ECt8VV9budZyUH.1wNmkzx98C_hxR4Ji3JDeX8TT956pADRMEcgF5G5Ty2Fo82D.QEzEdhxdgEAAA--",
        "title": "Ad Title",
        "description": "Ad Description",
        "brand": "Brand",
        "original_url": "https://www.example.com",
        "image_position": "50% 0%",
        "format": "native_ad",
        "iframe_url": "",
        "impression": "https://syndication.exads.rocks/cimp.php?t=api&data=H4sIAAAAAAAAA1VOW2oDMQy8Si+wRpLlh/LfCxQK+XVsLyxtNyFbSgpz+LpJQ6gGoZEYRiMkfqI0MT8x7XzaSQSTU3HkGPv9Hso4nZevvvXL8bSWj+7Wd7CFSHQfibMZQS2rsUegjJDJxHtk8ZTFDBzgQXc4IuIhxPPry7UZ7HichIDbX0iGDk4XQtTSvPhUu2/FHFlOykbKORjlkA09Bouc5iaz1lqKJwpzLHNojQ+q/dcI2/fallo+l+Pq+qW0zZ2P9W17hOKRnB8pB6bbOopwZWWYVOCfiBAgf4yBVFPsLbVD11ZbDsq9Zdbma5Q6k/wAx5LEUHQBAAA="
      }
    ]
  }
}

Data Properties:

Data > layout

Parameter	Description
widgetHeaderContentHtml	The URL of the 'Powered by' branding that shows.
branding_logo	The URL for the branding logo that shows if enabled.
branding_logo_hover	The URL for the branding logo that shows when the user hovers over it.
itemsPerRow	The number of ads that show in each row of the widget.
itemsPerCol	The number of ads that show in each column of the widget.
font_family	The family of font used in the ad.
header_font_size	The size of font used in the branding header.
header_font_color	The colour of font used in the branding header.
widget_background_color	The hex code of the background colour used for the widget.
widget_width	The width of the entire widget.
minimum_width_for_full_sized_layout	The minimum width for a full-sized layout in pixels.
item_height	The height of each individual ad.
item_padding	The padding between each of the ads.
image_height	The height of the image in each ad.
image_width	The width of the image in each ad.
text_margin_top	The size in pixels of the top text margin.
text_margin_bottom	The size in pixels of the bottom text margin.
text_margin_left	The size in pixels of the left text margin.
text_margin_right	The size in pixels of the right text margin.
title_font_size	The font size of the title for each ad.
title_font_color	The font colour of the title for each ad.
title_font_weight	The font weight of the title for each ad.
title_decoration	Whether the title is underlined or not.
title_hover_color	The font colour when the title is hovered over.
title_hover_font_weight	The font weight when the title is hovered over.
title_hover_decoration	Whether the title is underlined on hover or not.
description_font_size	The font size of the description for each ad.
description_font_color	The font colour of the description for each ad.
description_font_weight	The font weight of the description for each ad.
description_decoration	Whether the description is underlined or not.
description_hover_color	The font colour when the description is hovered over.
description_hover_font_weight	The font weight when the description is hovered over.
description_hover_decoration	Whether the description is underlined on hover or not.
open_in_new_window	Whether the ad should be opened in a new window when clicked. 1=yes, 0=no.
mobile_responsive_type	The type of responsiveness when using a mobile device (i.e none or compact). 1=compact, 0=no.
header_is_on_top	Whether the branding should be displayed above or below the ads. 1=yes, 0=no.
header_text_align	The horizontal alignment of the branding header.
title_enabled	Whether the title is enabled or not. 1=yes, 0=no.
description_enabled	Whether the description is enabled or not. 1=yes, 0=no.
image_border_size	The size in pixels of the image border.
image_border_color	The hex code colour of the image border.
text_align	The alignment of the text: left, center, or right.
customcss_enabled	Whether custom css is enabled or not. 1=yes, 0=no.
customcss	If enabled the custom css will display here.
header_enabled	Whether header is enabled or not. 1=yes, 0=no.
mobile_breakpoint	The breakpoint in pixels, between desktop and mobile views of the ad zone.
spacing_v	The vertical spacing in pixels between the ads, set in Advanced Options.
spacing_h	The horizontal spacing in pixels between the ads, set in Advanced Options.
zoom	Whether the ad should zoom in/out on hover.
mobile_rows	The number of rows of ads in the mobile widget.
mobile_cols	The number of columns of ads in the mobile widget.
use_v2_script	Whether the ad zone was created with the newer V2 setup or the older v1.
text_enabled	Whether the text title and description should be displayed. 1=yes, 0=no.
mobile_image_width	The width of the image in each ad on mobile.
mobile_text_box_size	The text box size when on mobile. Valid range 50-500.
mobile_text_enabled	Whether the title is enabled or not on mobile. 1=yes, 0=no.
mobile_text_position	The position of the text on mobile: bottom or right.
item_spacing_on_each_side	The padding on each side of the ads, if they were set up using the old v1 setup.
text_position	Whether the text is positioned on the left or right side.
text_box_size	The size of the text box in pixels. Range 50-500.
widget_height	The height of the entire widget.
brand_enabled	Whether the branding is enabled or not.
brand_font_size	The font size of the branding.
brand_font_color	The font colour of the branding.
brand_font_weight	The font weight of the branding.
brand_decoration	Whether the font is underlined or not.
mobile_image_height	The height of the image in each ad on mobile.
publisherAdType	What type of native ad this is, i.e recommendation, exit, or interstitial: `native-recommendation`, `native-exit`, `native-interstitial`.

Data > ad_items

Parameter	Description
image	The original image uploaded for the ad.
url	The URL that the ad directs to.
impression	The URL of the impression tracker.
title	The title text of the ad.
description	The description text of the ad.
brand	The brand text of the ad.
original_url	The original url of the landing page.
image_position	The position of the ad image (how the image will be cropped).

Outstream Video Content Renderer

This script will expose the window.OutstreamVideoRenderer variable, which you can use to interact with the renderer. For example, by calling window.OutstreamVideoRenderer.render(zone, placeholder); it is possible to render the ad.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the ad, such as a container
	`cookieConsent`	No	Boolean indicating if the user consents to cookies

Zone object for rendering:

{
  "idzone":9999999,
  "type":"outstream_video",
  "data":{
    "url":"https://syndication.example.com/click.php?data=H4sIAAAAAAAAA01Pu27DMBD7FS1ZhdNJp8fYpUuHfoOerVFHDmIjToH7.CpG0QbkdOSRIHkIqBVrSQG0Q.290474c9su60m_nPB1cN93udV1m_qHzMuZGVhZH2ywThFfrtOtrvW.XHo8V9lnViANSpCKPWrw2io2wRvvAxN4ZjMKeXzCAKsBtiaRqk2nWJMNksA4h9YqAtKgzMNYLQWrXCvYTM4xagBqNjYqRSVj6ogBXr97mXLcpqXLeo9lldclf618VIknVRyqOFQxLznO4neh2GsSKfZer.JzO8.Cj.R_PMIQ.Oli_hzEeDjQMCq.Eb._jelYIozxJjeqPmOLLWLBVI1ruuIPoK3etYQBAAA-",
    "tracking":{
      "progress":[
        {
          "offset":"00:00:10.000",
          "url":"https://syndication.example.com/vregister.php?a=vview&tracking_event=progress&progress=00:00:10.000&idzone=4984889&dae6f8a4bb3d5d6cc63d67b614ac4ea1=tsVuZ8uHLnt4d9vHxq48vXHj669ddlTlK8E.fHhu6ct3Ddx1tTWS104ZqKKa4G42JXrGHnM.nHXVBW4u_NVXKxI5nPTBa5U5fNPKxI5ulj1wNsN2uU1wVOU58fPXtw4a4G57GY4Kn3Kc.Pnr24cNcDdUFbmffj48.eGuBvGaVzPp58dPHjzrgbaYrcempwz68PGuBtpiSdiB6XPr44eeXPjrgbtYpgYrgmlz8cufDxz7cdcDc1WfHrrgbZpmuqcpz564G23LYGnM.GuBtpimmBynPhrgbgqnz4a6rGc.Gu1iOxzPhu4cOfXzw59.XPx478._XXPYzHBU.5SvSxW5n14a57GY4Kn3KV2rKaXJWsMwUTtbTEk7ED0q7VlNLkrWGYKJ2ty9p9iV5xeuZeexmOCp9ynPjrcvafYlecXrmXlcrumpiz47uPDjrYbXrwncz599bs1MjFeeuBuVyu6amLPjramslrpwXmpgeglYjzUUU1v11zr3ruzU3MUtuNruzU564G56Zm7Gq12mK3HpqcM.XDXPTA1BK8vJM25Hn01v11z1Z8ddTVLjkq9LlU0dlcE0ufC_hrsqcpXgbz7dGevFx3myw4z287uvDp378u3bj14defDj04a7KY132Kn83O3Xz2493W.TvRpphjnw4dXezDvVtviz06Oa4JJ6XKqoJpV6q2K7Ks.OuCSelyqqCaVeCW1iOBtelxiqaXPhrpcdcpcpXqgrcXfmqrlYkczqwlbgaYrgml3OXsN1bqZmoqtbDbMczUWfDXA3M665Tnw1wNxsStwSvLzsPOZ8NdsDbky7lrktefLW5TTNS1M25nw1wNtsVsNOS1uU58NcDbTFNMDlK9U1lLTmfDXLNU1TBPXnw1wStTPSwVzLyTNuZ8NdblVa8kzbmfDXS49BNKu85NKxI4vA3nw1z0zX4L1VsV2VZ7eOuBudimuVynPhragrwXecmlYkcXgbz4a5XK2GrIK8F56Zr8F68J3M9crlbDVkFeC89M1.C7blTVME9cE0uethtmOZqJe1ynPXBJPS5VVBNKuxHGvBLaxHA2vS4xVNLVnw11WM8s.Guqxnnnw11NUwT1r14TuZsVYSta6mqYJ615WJHM9dTVME9a9rlOetmma6pyle1ynPhrtpz4a4Ja3KZWI8.GuWZd2yVurPhrgbpcqnmlqgtcXjYwmsrz4a4G5LI64MZpXM.GtyRiCNeCqfPhrqapgnrXbcrYgjz666mqYJ617XKaoJpc.WuBthu1ymuCpyldhtevCdzPlx122WQN58e3jz289u_Hrx68PPfpy4ceHboz2Z8tM.PPjjz11wSOVVsST58e3jz289u_Hrrammigcamlqclrz4wA--"
        }
      ]
    },
    "video":"https://static.example.com/library/195600/8b52c320f382e382bc0f1e35c7f7d260a8b3388f.mp4",
    "brandingEnabled":1,
    "frequencyPeriod":0,
    "maximumWidth":0,
    "impression":"https://syndication.example.com/vregister.php?a=vimp&tracking_event=impression&t=api&idzone=4984889&dae6f8a4bb3d5d6cc63d67b614ac4ea1=tsVuZ8uHLnt4d9vHxq48vXHj669ddlTlK8E.fHhu6ct3Ddx1tTWS104ZqKKa4G42JXrGHnM.nHXVBW4u_NVXKxI5nPTBa5U5fNPKxI5ulj1wNsN2uU1wVOU58fPXtw4a4G57GY4Kn3Kc.Pnr24cNcDdUFbmffj48.eGuBvGaVzPp58dPHjzrgbaYrcempwz68PGuBtpiSdiB6XPr44eeXPjrgbtYpgYrgmlz8cufDxz7cdcDc1WfHrrgbZpmuqcpz564G23LYGnM.GuBtpimmBynPhrgbgqnz4a6rGc.Gu1iOxzPhu4cOfXzw59.XPx478._XXPYzHBU.5SvSxW5n14a57GY4Kn3KV2rKaXJWsMwUTtbTEk7ED0q7VlNLkrWGYKJ2ty9p9iV5xeuZeexmOCp9ynPjrcvafYlecXrmXlcrumpiz47uPDjrYbXrwncz599bs1MjFeeuBuVyu6amLPjramslrpwXmpgeglYjzUUU1v11zr3ruzU3MUtuNruzU564G56Zm7Gq12mK3HpqcM.XDXPTA1BK8vJM25Hn01v11z1Z8ddTVLjkq9LlU0dlcE0ufC_hrsqcpXgbz7dGevFx3myw4z287uvDp378u3bj14defDj04a7KY132Kn83O3Xz2493W.TvRpphjnw4dXezDvVtviz06Oa4JJ6XKqoJpV6q2K7Ks.OuCSelyqqCaVeCW1iOBtelxiqaXPhrpcdcpcpXqgrcXfmqrlYkczqwlbgaYrgml3OXsN1bqZmoqtbDbMczUWfDXA3M665Tnw1wNxsStwSvLzsPOZ8Nbl7jVlcE0q9cEjmfDdw5a4G22K2GnJa3Kc.GuBtpimmByleqaylpzPhrlmqapgnrz4a4JWpnpYK5l5Jm3M.GutyqteSZtzPhrpcegmlXecmlYkcXgbz4a56Zr8F6q2K7Ks9vHXA3OxTXK5Tnw1tQV4LvOTSsSOLwN58NcrlbDVkFeC89M1.C9eE7meuVythqyCvBeema_BdtypqmCeuCaXPWw2zHM1Eva5TnrgknpcqqgmlXYjjXgltYjgbXpcYqmlqz4a6rGeWfDXVYzzz4a6mqYJ6168J3M2KsJWtdTVME9a8rEjmeupqmCete1ynPWzTNdU5Sva5Tnw12058NcEtblMrEefDXLMu7ZK3Vnw1wN0uVTzS1QWuLxsYTWV58NcDclkdcGM0rmfDXZU5Su0xPPBK9nw12VOUrtMTzwSvLu0uUWOStYZ8NbkjEEa8FU.fDXU1TBPWu25WxBHn111NUwT1r2uU1QTS58tbNlMeeuBthu1ymuCpyldhtevCdzPlx122WQN58e3jz289u_Hr079unHl459e3Rnsz5aZ8MeGXddcEjlVbEk.fHt489vPbvx662ppooHGppanJa8.M",
    "isVast":false,
    "ctaEnabled":1,
    "cta":{
      "displayUrl":"example.com",
      "text":"View More"
    }
  }
}

Data Properties:

Property Name	Type	Required	Description
url	String	Yes	URL that the ad directs to
impression	String	Yes	URL of the impression tracker
video	String	Yes	URL of the video to be used on the ad
tracking	Object	Yes	Object with tracking info
- offset	String	Yes	Progress marker to persist the video view
- url	String	Yes	URL to call to persist the video view
brandingEnabled	Boolean	No	Flag to enable the branding
frequencyPeriod	Number	No	Length of time in minutes that the ad is hidden for once it is closed (needs cookie consent from user)
maximumWidth	Number	No	Maximum video width
isVast	Boolean	No	Flag indicating if the video is Vast
ctaEnabled	Boolean	No	Flag to enable the CTA (call to action)
cta	Object	No	URL of the optimized ad image, for example an mp4 for an animated ad
- displayUrl	String	No	URL to display on the CTA
- text	String	No	Text to display on the CTA button

In Page Push Notification Content Renderer

This script will expose the window.InPagePushNotificationRenderer variable, which you can use to interact with the renderer. For example, by calling window.InPagePushNotificationRenderer.render(zone, placeholder); it is possible to render the ad.

Available renderer functions:

Function	Parameter Names	Required	Parameter Description
`render()`	`zone`	Yes	Zone object containing information for rendering
	`placeholder`	Yes	HTML element indicating where to render the ad, such as a container
	`cookieConsent`	No	Boolean indicating if the user consents to cookies

Zone object for rendering:

{
  "idzone":9999999,
  "type":"in_page_push_notification",
  "data":{
    "url":"https://syndication.example.com/click.php?data=H4sIAAAAAAAAA02QvW7DMAyEX0VLVoGUSP2MXbp06DPQltwadeQgNuIU4MPXMYo2OE68w0ccOUF25BUs6.e6XpaTfzm51322bbNrXdaxfdh.PquCYkg55BQh6OU63upS7_OlybnaNimCJWfBoibnIfmISjlRdqwMSZVQvSLvGNDo4E5pB.7SQB1jHXwntQvZMlCMLgRkYA9Ij3wNnAPGobiB.l7EA_AQZOBSsCOqOwZ0.W5l7GUd52brXcpir3P_tehx0Ty55nDN4Zpp7mUyv0XNVjvTSWv1aj7X82T0IP_rAXOgTxv6S7C6I.FIPeuN9f1Ni3OIsXj0.0sEMJXEUQafa5QaovwASom5rH8BAAA-",
    "image":"https://static.example.com/library/195600/0ce94b4e2b6222ee26594af823a65cb7059ca62d.jpg",
    "title":"Title",
    "description":"This is a description",
    "impression":"https://syndication.example.com/cimp.php?t=api&data=H4sIAAAAAAAAA1VPW2rDQAy8Si+QZaSV9pH/XiBQ8O/au4bQ1glxKS7o8N24hFAJSTMwjCQG+wPigdIL8VH0iGAEJ+zgyIZhMCG73s7fbW3b5bqUz+aWD6OsAXiMSClnmOQkmdUUyTQhs3hL7JF8JCM1b3ikA3AX2uvbaa8ucAQyYYuMTVI339cbd+OOscGCjEpt9mNpY8hOITFyCKRQDxJYC5oDxbnyLNNUiu9b5lBmrZVGkXb3sfVnqeepfJ0vi2tbqau7Xab39XkaJ9qFzzz80R6wHZVuMpn9E8HUuHevOyHrz8wcYhHNtVSfRVklttxAOSTh6RdhQ+r1fQEAAA==",
    "optimum_image":"https://static.example.com/library/195600/0c9243bcbb139db5671a779366a98a08f678b2f1.webp",
    "horizontal_position":"right",
    "vertical_position":"top",
    "delay":0,
    "max_notifications_on_page":2,
    "once_closed_hide_for":10,
    "user_session_capping":0,
    "delay_between_notifications":10
  }
}

Data Properties:

Property Name	Type	Required	Description
url	String	Yes	URL that the ad directs to
impression	String	Yes	URL of the impression tracker
image	String	Yes	URL of the image to be used on the ad
optimum_image	String	No	URL of the optimized ad image, for example an mp4 for an animated ad
title	String	Yes	Title of the notification
description	String	Yes	Description of the notification
horizontal_position	String	Yes	Indicates the horizontal position on the page (left, center, right)
vertical_position	String	Yes	Indicates the vertical position on the page (top, middle, bottom)
delay	Number	No	Number of seconds before the notification appears after the page loads
max_notifications_on_page	Number	No	Number of notifications that can appear on the page at the same time
once_closed_hide_for	Number	No	Length of time in seconds that the ad is hidden for once it is closed (needs cookie consent from user)
user_session_capping	Number	No	Number of times the ad is shown to the user (needs cookie consent from user)
delay_between_notifications	Number	No	Number of seconds before the next notification appears after the previous one loads