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.
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
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)
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:
- 🇦🇹 AT: 1000x250px
- 🇨🇭 CH: 1000x250px
- 🇩🇪 DE: 1000x250px
- 🇩🇰 DK: 930x180px
- 🇫🇮 FI: 1000x400px
- 🇫🇷 FR: 970x250px
- 🇳🇱 NL: 970x250px
- 🇳🇴 NO: 980x300px
- 🇵🇱 PL: 970x250px
- 🇸🇪 SE: 1000x240px
- 🇬🇧 UK: 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.
Max total file weight
3.5 MB.
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 Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. |
Background
| Parameter | Purpose | Default |
|---|---|---|
| Background Anchor Point | Sets how the background is anchored when scaling within the seamless skin. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Colour displayed in any space not covered by the background assets. | #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 | Set to inherit to fall back to the Background group anchor. | inherit | choices: inherit, top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Leave blank to use the Background group colour. | |
| Main Overlay | Main overlay asset, uses available space 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 | Set to inherit to fall back to the Background group anchor. | inherit | choices: inherit, top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Leave blank to use the Background group colour. | |
| Main Overlay | Main overlay asset, uses available space 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 | Set to inherit to fall back to the Background group anchor. | inherit | choices: inherit, top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right |
| Background Colour | Leave blank to use the Background group colour. | |
| Main Overlay | Main overlay asset, uses available space 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 relative to the overlay container. | 15% |
| Left Top Overlay Height | Sets the height of the left top overlay relative to the overlay container when Left Side Overlay Mode uses left-side 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 relative to the overlay container. | 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 Config
| Parameter | Purpose | Default | Notes |
|---|---|---|---|
| Overlay Container Width | Width of the overlay container as a percentage of side panel width. | 80% | Required |
| Overlay Container Height | Height of the overlay container as a percentage of total skin height. | 90% | Required |
| Overlay Container Gap | Minimum space maintained between overlays. | 1vh | |
| Overlay Container Minimum Width | Minimum width to prevent overlays becoming too small on narrow screens. | 120px | |
| Overlay Container Maximum Width | Maximum width to prevent overlays becoming too large on wide screens. | 300px | |
| Hide Overlays Below Minimum Width | Automatically hides overlays if container width drops below the minimum width. | False | choices: False, True | |
| Overlay Container Horizontal Alignment | Horizontal alignment of the overlay container and its overlays. | center | choices: center, inside, outside | |
| Overlay Container Horizontal Offset (optional) | Horizontal offset applied away from the aligned edge. | ||
| Overlay Container Vertical Alignment | Vertical alignment of the overlay container and its overlays. | center | choices: top, center, bottom | |
| Overlay Container Vertical Offset (optional) | Vertical offset applied away from the aligned edge. |