Use the Clickable Skin component to grab a user’s attention by replacing the entire background of the publisher's page with your own clickable wallpaper. The wallpaper includes a list of customizable properties including the option to push down the website content to show the skin in a top bar. The component can be placed in a Studio creative of any format.
- Supports fixed/scroll attachment, background repeat, background position and more
- Can toggle visibility at runtime
- Independent handling of top-left-right clickable areas
- Can push down the main website content to show the skin at the top
- Supports multiple background images
- Automatic custom layout adjustments for whitelisted domains
- Your creative must be built as an HTML5 creative.
- You must import the DoubleClick Studio Enabler into your HTML file.
- You must import the Polymer custom elements library into your HTML file.
Before using the Clickable Skin component, you must first include these scripts in the head of your creative's HTML file.
- DoubleClick Studio Enabler, the core code library of DoubleClick Studio.
- Polymer custom elements library, allows the creation of custom HTML elements that are reusable, encapsulated and can work for both desktop and mobile.
- Clickable Skin component library.
Set up the component
Choose one of the options below:
<ci-studio-clickableskin backgroundcolor="#d57a4d" backgroundimagefilename="wallpaper.jpg" topsideheight="160">
var skin = new ci.studio.clickableskin.ClickableSkin(); skin.setAttribute('backgroundcolor', '#d57a4d'); skin.setAttribute('backgroundimagefilename', 'wallpaper.jpg'); document.body.appendChild(skin);
Customize component settings
Clickable Skin includes many properties that you can apply or change to customize the appearance and behavior of your creative. Expand the sections below to learn about available attributes and see example tags.
You can set the background image to be used as wallpaper, then position and style it with the following attributes.
backgroundimagefilenameThe name of the JPG, GIF, or PNG file, uploaded to Studio with the creative, to be used as the background wallpaper.
backgroundattachmentWhether the background image should scroll with the page or always be visible.
backgroundpositionWhere to position your skin relative to the top left corner of the page.
backgroundrepeatWhether the background image should be repeated across the page.
usebackgroundcolorWhether to change the background color of the page (visible in the areas not covered by the wallpaper image).
backgroundcolorThe color to use for the page background (visible in the area not covered by the wallpaper image).
Valid values: CSS legal color values. For example,
To use an image file called wallpaper.jpg with a
#ff0000 (red) background color, which doesn't scroll with the page, is positioned at the top center of the page and doesn't repeat:
backgroundposition="center top" backgroundrepeat="no-repeat">
The following attributes control the visibility of the wallpaper and whether it is enabled (clickable) or not. These attributes can also be changed at runtime.
visibleWhether the skin is visible.
enabledWhether skin is clickable.
To create a skin which is visible but not clickable:
backgroundimagefilename="wallpaper.jpg" visible="true" enabled="false">
Separately manage the top, left and right clickable areas using the following properties.
rightsideisclickableWhether the top, left, right areas are clickable.
topsideheightSets the height, in pixels, of the top area. It also pushes down the website content of an equal amount of pixels in order for this upper part of the skin to be visible.
rightsidewidthSets the width, in pixels, of the left and right area respectively.
0, which sets an area to 100% of the page width.
rightsideexitnameChanges the name of the exit events fired when the top, left or right area is clicked. All exit event values must be manually added via code in the main HTML file or in the Studio UI in order to function correctly.
To create a skin with a 160 pixel high, top clickable area, and with a "Top Click" exit name:
topsideexitname="Top Click" leftsideisclickable="false"
There are two additional attributes to better adapt the Clickable Skin component to specific publisher layouts.
appendtodividAssigns the wallpaper image to the
<div>with the id provided instead of the document body.
Valid value: The name of a publisher page
<div>id. For example,
"wallpaper-div". There must be a corresponding element on the publisher page with the id.
sitewidthSets the site width, in pixels, manually. Providing this value may help if clicks are not correctly firing an exit in some areas. By default the component automatically recognizes the width of the main content of the site in order to correctly detect the clicks on the side areas.
- It's recommended to run a publisher page test first to make sure the page layout is compatible. Some pages may have layered content that can obscure the creative wallpaper.