A template for seamless skin that allows for the easy creation of a switching skin creative. The template requires three sets of assets (background image, side overlay, hover button, top banner), with an interactive "switching" transition when the user hovers over one of three buttons on the right side of the skin. When paired with the Skin Top with Sticky Streaming Video top banner, the format also supports sticky video playback, so the video can remain visible after the top banner scrolls away.
For more information please see our Guide to Skins, which covers:
- The key differences between our Seamless Skin & Fluid Skin formats
- The basics for designing assets for using within the our skin templates
- Tips and best practice for using overlays
Examples
Adventure Travel (Star Wipe)
Admire (Circular Wipe)
Adore (Fade)
Adly (Horizontal Wipe)
Advance Technology (Vertical Wipe)
Recommended default creative dimensions
Swapping Content (x3)
- Background Image:
2560x1440px (JPG or WEBP) - Side Overlay:
Maximum size of 800x1440px (PNG or WEBP with transparent background) - Button:
350x350, PNG with transparent background. - Top Banner Overlay (optional):
Maximum size of 1000x180px (PNG or WEBP with transparent background)
Sticky Video:
Supported when paired with the Skin Top with Sticky Streaming Video top banner.
Top banner sizes vary across publishers and between countries, so please read carefully to ensure your assets are produced correctly.
For HTML5 Top Banners, the creative width should be responsive (width: 100%) up to a maximum width of 1280 pixels. The height will match the billboard height from the list below. If the width of your top banner is not responsive, there may be empty space visible between the top banner and side panels on some sites.
Billboard placement sizes by country:
- 🇦🇹 AUT: 1000x250px
- 🇨🇭 CHE: 1000x250px
- 🇩🇪 DEU: 1000x250px
- 🇩🇰 DNK: 930x180px
- 🇫🇮 FIN: 1000x400px
- 🇫🇷 FRA: 970x250px
- 🇮🇹 ITA: 1000x250px
- 🇲🇽 MEX: 970x250px
- 🇳🇱 NLD: 970x250px
- 🇳🇴 NOR: 980x300px
- 🇵🇱 POL: 970x250px
- 🇸🇪 SWE: 1000x240px
- 🇬🇧 GBR: 970x250px
Top banner dimensions can also vary from publisher to publisher. Always confirm the exact sizes with the publishers on your plan before creating skin assets.
CTA Button:
200x80, PNG, SVG or WEBP
Logo:
400x250 (or similar), PNG, JPG, SVG, or WEBP
Format description and guidance
Avoid placing any text or logos on the sides or edges of the background assets, as they could appear cropped on smaller screen sizes. All "key" static elements or artwork (logos, messaging, CTA etc) should be implemented as part of the overlays.
The specs for the format are flexible, allowing the size and position of the overlays to be customised. For best results, export the overlay PNGs without any extra empty space around the edges - this allows the template to handle the overlay scaling and positioning more effectively.
The template allows for separate logo and CTA elements to be added on the left side of the skin, and the instruction text on the right side is editable to allow you to customise or localise the creative as necessary. The colour of the instruction text and arrow animation can also be customised.
Sticky video and the side overlays. When the creative is paired with the Skin Top with Sticky Streaming Video top banner, the video moves into the side panel once the top banner scrolls out of view. The Overlay Behaviour setting controls what the side overlays do while that player is on screen:
- Overlap (default) – the player is drawn on top of the overlays. Nothing moves, but the player can obscure overlay content on shorter screens.
- Resize While Sticky – the overlay container shrinks to the space the player leaves while it is on screen, and returns to full size when playback is handed back to the top banner.
- Always Reserve Space – that reduced overlay area is kept at all times, so nothing moves as the user scrolls.
Both reserving modes scale the overlays down rather than cropping them, so design overlay artwork to stay legible at around two thirds of its full height. The Overlay Container Gap sets the minimum space kept between the player and the overlays. Overlap is the default, so a creative only behaves differently once this is changed.
Transition Style. The reveal between the three products can be changed with the Transition Style setting:
- Circular Wipe (default) – the new skin opens out from the button in a circle.
- Star Wipe – a many-pointed starburst opens from the button, turning slowly as it grows.
- Fade – the outgoing skin dissolves into the incoming one.
- Horizontal Wipe – the old skin wipes away right to left, revealing the new one behind it.
- Vertical Wipe – the same, revealing from the bottom upwards.
All five reveal the same artwork, so no extra assets are needed – the choice only changes how the switch is animated. Circular Wipe is the default, so existing creatives keep the transition they were built with.
Max total file weight
3.5 MB.
If you use skin background videos, keep clips to roughly 10-15 seconds where possible to minimise compression and quality issues.
For best performance, all assets should be compressed and optimised to the lowest possible file weight. We recommend using tinypng.com to compress PNG overlays.
Click tags and tracking
The template supports four individual clickURL & trackers - one for each of the skin backgrounds, and another for the top banner.
Audio
No
Template Details
Seamless Switching Skin
General
| Parameter | Purpose | Default |
|---|---|---|
| Default Click URL | Click destination used unless a skin sets its own Click URL. | |
| Transition Style | Sets how one product skin gives way to the next. Circular Wipe grows a circular mask out from the product button, and is the original effect. Star Wipe grows the same reveal through a star-burst mask for a more striking switch. Fade dissolves the previous skin into the new one. Horizontal Wipe uncovers the new skin from the right edge across to the left, and Vertical Wipe uncovers it from the bottom edge upwards. | Circular Wipe | choices: Circular Wipe, Star Wipe, Fade, Horizontal Wipe, Vertical Wipe |
Background
| Parameter | Purpose | Default |
|---|---|---|
| Background Anchor Point | Sets where the background is anchored when it is scaled to fill the panel. Inherit uses the Background anchor. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour shown wherever the background does not cover the skin. | #000000 |
Skin 1
| Parameter | Purpose | Default |
|---|---|---|
| Click URL | Destination when skin 1 is clicked (falls back to Default Click URL if blank). | |
| Button | Image for interactive button on the right side. | |
| Background Image | Image asset used as background for skin 1. | |
| Background Anchor Point | Sets where the background is anchored when it is scaled to fill the panel. Inherit uses the Background anchor. | inherit | choices: inherit, top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour shown wherever this background does not cover the skin. Leave blank to use the Background colour. | |
| Main Overlay | Main overlay asset, using as much space as is available within the overlay container. | |
| Top Banner Image (optional) | Optional skin-specific top banner overlay. |
Skin 2
| Parameter | Purpose | Default |
|---|---|---|
| Click URL | Destination when skin 2 is clicked (falls back to Default Click URL if blank). | |
| Button | Image for interactive button on the right side. | |
| Background Image | Image asset used as background for skin 2. | |
| Background Anchor Point | Sets where the background is anchored when it is scaled to fill the panel. Inherit uses the Background anchor. | inherit | choices: inherit, top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour shown wherever this background does not cover the skin. Leave blank to use the Background colour. | |
| Main Overlay | Main overlay asset, using as much space as is available within the overlay container. | |
| Top Banner Image (optional) | Optional skin-specific top banner overlay. |
Skin 3
| Parameter | Purpose | Default |
|---|---|---|
| Click URL | Destination when skin 3 is clicked (falls back to Default Click URL if blank). | |
| Button | Image for interactive button on the right side. | |
| Background Image | Image asset used as background for skin 3. | |
| Background Anchor Point | Sets where the background is anchored when it is scaled to fill the panel. Inherit uses the Background anchor. | inherit | choices: inherit, top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour shown wherever this background does not cover the skin. Leave blank to use the Background colour. | |
| Main Overlay | Main overlay asset, using as much space as is available within the overlay container. | |
| Top Banner Image (optional) | Optional skin-specific top banner overlay. |
Static Overlays
| Parameter | Purpose | Default |
|---|---|---|
| Static Overlay Mode | Mirror reuses the right-side top overlay on the left. Independent enables the dedicated left-side top overlay asset and height settings instead. | Mirror | choices: Mirror, Independent |
| Right Top Overlay (optional) | Top-aligned overlay, anchored to the top of the overlay container. | |
| Left Top Overlay (optional) | Optional top-aligned overlay for the left side when Left Side Overlay Mode uses left-side assets. | |
| Top Overlay Height | Sets the height of the top overlay as a percentage of the overlay container (px, vw and vh also accepted). | 15% |
| Left Top Overlay Height | Sets the height of the left top overlay when Left Side Overlays use their own assets. | 15% |
| Bottom Overlay (optional) | Bottom-aligned overlay, anchored to the bottom of the overlay container. | |
| Bottom Overlay Height | Sets the height of the bottom overlay as a percentage of the overlay container (px, vw and vh also accepted). | 10% |
| Hover Interaction Text | Text encouraging users to hover over the banner for interaction. | Hover to explore |
| Text Colour | Colour of the hover interaction text. | #fff |
| Arrow Colour | Colour of the animated chevron below the hover interaction text. | #fff |
| Button Glow Effect | Adds a brightness glow effect to the currently selected button. | Enabled | choices: Enabled, Disabled |
Overlay Container
| Parameter | Purpose | Default | Notes |
|---|---|---|---|
| Overlay Container Width | Sets the width of the overlay container as a percentage of the side panel width. | 80% | Required |
| Overlay Container Height | Sets the height of the overlay container as a percentage of the skin height. | 90% | Required |
| Overlay Container Gap | Sets the minimum space kept between the overlays, and between the sticky video player and the overlays. | 1vh | |
| Overlay Container Minimum Width | Sets a minimum width for the overlay container, so the overlays do not become too small on narrow screens. | 120px | |
| Overlay Container Maximum Width | Sets a maximum width for the overlay container, so the overlays do not become too large on wide screens. | 300px | |
| Hide Overlays Below Minimum Width | When enabled, hides the overlays whenever the overlay container is narrower than its minimum width. | False | choices: False, True | |
| Overlay Container Horizontal Alignment | Sets the horizontal alignment of the overlay container and every overlay within it. | center | choices: center, inside, outside | |
| Overlay Container Horizontal Offset (optional) | Sets a horizontal offset for the overlay container away from its aligned edge (px, %, vw). | ||
| Overlay Container Vertical Alignment | Sets the vertical alignment of the overlay container and every overlay within it. | center | choices: top, center, bottom | |
| Overlay Container Vertical Offset (optional) | Sets a vertical offset for the overlay container away from its aligned edge (px, %, vh). |
Advanced Overlay Settings
| Parameter | Purpose | Default |
|---|---|---|
| Main Overlay Layout | Inset fits the main overlay into the space left by the top and bottom overlays, inside the overlay container. Full Bleed fills the whole side panel with the main overlay, ignoring the overlay container's width and height, and draws the top and bottom overlays on top of it. | Inset | choices: Inset, Full Bleed |
| Main Overlay Scaling Mode | Sets how the Full Bleed main overlay fills the side panel. Contain shows the whole asset. Cover fills the panel and may crop. Fit to Width matches the panel width and may run past the top or bottom. Fit to Height matches the panel height and may run past the sides. Ignored in the Inset layout. | contain | choices: contain, cover, fit to width, fit to height |
| Main Overlay Horizontal Alignment | Sets the horizontal alignment of the Full Bleed main overlay within the side panel. Ignored in the Inset layout. | center | choices: center, inside, outside |
| Main Overlay Vertical Alignment | Sets the vertical alignment of the Full Bleed main overlay within the side panel. Ignored in the Inset layout. | center | choices: top, center, bottom |
Sticky Video Player
| Parameter | Purpose | Default |
|---|---|---|
| Video Side | Sets which side panels show the sticky video player when the top banner scrolls out of view, or disables the handoff. | left | choices: left, right, both, disabled |
| Video Transition | Sets the transition animation used when the sticky video player appears. | Slide In | choices: Disabled, Slide In |
| Position | Sets the vertical position of the sticky video player within the side panel. | top | choices: top, middle, bottom |
| Max Height | Sets the maximum height of the sticky video player. Match Top Banner Height copies the height of the top banner. | Match Top Banner Height | choices: Match Top Banner Height, 200px, 250px, 300px, 350px, 400px |
| Vertical Offset | Sets an additional vertical offset from the chosen position (px, %, vh). | 0 |
| Overlay Behaviour | Controls how the side panel overlays react to the sticky video player. Overlap keeps the original behaviour, where the player is drawn on top of the overlays and can obscure them on some screens. Resize While Sticky shrinks the overlay container to the space left by the player while it is on screen, and restores it when the player hands playback back. Always Reserve Space keeps that reduced overlay area at all times, so nothing moves as the user scrolls. The Overlay Container Gap sets the minimum space kept between the player and the overlays. | Overlap | choices: Overlap, Resize While Sticky, Always Reserve Space |