UX Customization

General

Web Ad Tag offers ample opportunities for UX customization.

In case your webpage has a fixed header – the header id  attribute or header class attribute should be defined as a value for parameter fixedHeaderSelector within the Config Script.

To define if the ad tag is availbale on desktop as well as on mobile define desktopAvailable parameter within the Config Script (boolean, default FALSE).

You can choose between full with and non-fullwith UX by setting up fullWidth parameter within the Config Script (boolean, default FALSE).

Shoppable Video Ad unit

You can customize Shoppable Video ad unit style with the following CSS classes:

dio-ad-container  |  dio-video |  dio-product-card  |  dio-image  |  dio-content  |  dio-title  |  dio-product-name  |  dio-rating  |  dio-reviews  |  dio-price  |  dio-info  |  dio-button

Video progress bar isn’t shown by default, but its visibility can be customized via showVideoProgressBar parameter of the bid response (bidResponse.seatbid.bid.ext.showVideoProgressBar) as showVideoProgressBar: True/False.

dio-content objects visibility can be customized via bid response – the object is visible only if it is set up as a parametr under bidResponse.seatbid.bid.ext object:

  • customTitle (string)
  • buttonText (string)
  • productName (string)
  • productPrice (string)
  • productRate (float)
  • productReviews (string)
  • productInfo (string)
  • productBrand (string)

Shoppable Video objects clickability also can be set up via bid response: Bidder:bidResponse.seatbid.bid.ext.clickableObjects  (adContainer, productImage, productVideo, button, productName, productRate, productInfo, productReviews, adContent).

 

Interscroller Ad Unit

You can customize Interscroller ad unit colors by defining the following parameters within the Config Script (optional):

  • headerTextColor – header text color, ‘white’ by default
  • headerBackgroundColor – header background color, ‘black’ by default
  • adContainerBackgroundColor – ad container background color, ‘transparent’ by default

By default the ad container header text is “Scroll to continue with content”. In order to change the text – define the required text within the Config Script parameter headerText (limited to 50 characters).

 

Headline Ad Unit

You can customize Headline ad unit colors by defining the following parameters within the Config Script (optional):

inFeedModeStyle: {
  backgroundColor: "grey",
  buttonTextColor: "#fff",
  buttonBorderColor: "#fff",
  buttonBackgroundColor: "transparent",
  titleColor: "#fff",
  advertiserNameColor: "#fff",
},
headlineModeStyle: {
  backgroundColor: "#ddd3fc",
  buttonTextColor: "#000",
  buttonBorderColor: "#000",
  buttonBackgroundColor: "#9be3e1",
  titleColor: "#000",
  advertiserNameColor: "#000",
}

If headlineModeStyle isn’t defined then inFeedModeStyle is applied.

Still have Questions?

Contact Us