The fluid skin format consists of three separate elements - a left panel, a right panel (the side panels), and a top banner. These specs describe how to set up a fluid skin using the Image/Video side panels template, however you are free to mix and match any of the available templates for each of the elements. You may use either images or video as the background asset of each element. For best results, combine with a PNG overlays, to create a simple responsive skin. For skin designs with artwork that spans across the entire screen, consider using our seamless skin format instead.
Guide to skins
- The difference between our Seamless Skin & Fluid Skin formats
- The respective templates (i.e. Seamless Image Skin, Seamless Sliding Skin, Fluid Skin Image, Fluid Skin Video, etc.) within our Seamless & Fluid Skin formats
- Tips and best practice for using overlays
Examples
Asset Specs
Background:
- Video - 1080x1920px (9:16) MP4 (Optimised for web)
- Image - 800x1440px JPG
Background assets use the "cover" scaling mode by default, so be aware that the edges may appear cropped at smaller screen sizes and resolutions.
Overlays:
- Main overlay - Max size of 800x1440px (PNG or WEBP with transparent background)
- Top/Bottom overlays - additional optional overlay elements that will be top/bottom aligned with the overlay container. Max size of 800x500px (PNG or WEBP with transparent background).
- For best results, export overlay PNG assets without any excess empty space - the size and position of the overlay is configurable within the template settings.
Top Banner:
Image or Video: 1280x180px* (JPG, WEBP, MP4)
HTML5: width: 100% (responsive), height: 180px* (HTML Zip File or 3rd Party Tag)
Top Banner sizes vary across publishers and between countries, so please read carefully to ensure your assets are produced correctly.
For image and video Top Banners, use a width of 1280 pixels. The height should match the billboard height from the list below, and all key content should appear within a centralised safe zone of the corresponding billboard width. eg, for a UK skin, the ideal asset size is 1280x250, with a centralised 970x250 safe zone. You may also wish to export your assets double sized (eg 2560x500), for sharper display on high resolution screens.
For HTML5 Top Banners, the creative width should be responsive (width: 100%) with a maximum width of 1280 pixels. The height should match the billboard height from the list below. If the width of your top banner is not responsive, there will 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
Format description and guidance
Background assets use the "cover" scaling mode by default, so be aware that the edges may appear cropped for different screen sizes and resolutions. You can set the anchor point of the background via background position - this is the transformation point around which the image will be scaled, and it will be the part of the asset guaranteed to be in view, so make sure to set it to an appropriate value for your specific assets. If the "contain" scaling mode is used, you can select a background colour to fill any empty space, or if your background asset is a video, you can also upload a separate background image which will fill any empty space behind the video background.
Use the overlays to add your static branding and messaging elements on top of the background. The overlays automatically scale and resize your content to fit within the available space, enabling responsive functionality for your skin. You can define the overlay container width & height (as a percentage of the total side-panel area), as well as define minimum and maximum widths (in pixels) to constrain their scaling.
The main overlay is the primary overlay asset, which will fill as much space within the overlay container as is available. Optional top and bottom overlays can be added, allowing for static branding elements such as logos and CTAs to be positioned separately from the main overlay, allowing for more advanced responsive layouts. The top/bottom overlays will match the full overlay container width, and you can adjust their heights to control how big they will appear
You can additionally configure how the overlays are positioned within the skin side-panels. By default they are centered, however you can modify the horizontal and vertical alignment of the overlays using the preset positioning options, and add an offset to fine-tune the position (you can use any valid css unit eg 250px, 50%, 20vh etc, measured from the selected position edge).
For best results, export overlay PNG assets without any excess empty white space - this allows the template to handle the overlay scaling and placement more effectively.
Max duration
Autoplaying videos should not exceed 30 seconds in duration.
Click URL
Click tracking is included in the template.
Max total file weight
Video: Files up to 50 MB are accepted, with a recommended maximum length of 20 seconds.
Image: Maximum 200kb.
Audio
User-initiated
Template Details
Automatically synced on 2026-02-11T14:27:19.567Z. This section documents the canvases, banner templates, and trafficking controls directly from the source configs.
Canvases: Fluid Skin
Banner templates: Fluid Scrolling Skin, Fluid Image & Streaming Video Skin
Use the tables below to configure the linked banner templates. Each parameter definition is pulled straight from the template config, ensuring the spec always documents the latest functionality.
Fluid Scrolling Skin
A Scrolling Skin with 3 sets of background and overlay assets. · Version 2.0.0
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Default Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. |
Skin 1
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Falls back to Default Click URL if blank. | ||
| Background Image | Upload the background image asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. |
Skin 2
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Falls back to Default Click URL if blank. | ||
| Background Image | Upload the background image asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. |
Skin 3
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Falls back to Default Click URL if blank. | ||
| Background Image | Upload the background image asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. |
Static Overlays
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Top Overlay (optional) | Top-aligned overlay, anchored to the top of the overlay container. | ||
| Top Overlay Height | Define the top overlay height using responsive CSS units (px, %, vw, vh) so it scales across screens. | 15% | |
| Bottom Overlay (optional) | Bottom-aligned overlay, anchored to the bottom of the overlay container. | ||
| Bottom Overlay Height | Define the bottom overlay height using responsive CSS units (px, %, vw, vh) so it scales across screens. | 10% |
Background Config
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Scaling Mode | Sets how backgrounds scale. Cover fills and may crop. Contain avoids cropping. None keeps intrinsic size. | cover | choices: cover, contain, none | |
| Anchor Point | Anchor Point used to position background assets within the side panel. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right | |
| Background Colour | Colour of any empty space left after scaling. | #FFF |
Overlay Config
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Overlay Container Width | Width of overlay container (% of side panel). | 80% | Required |
| Overlay Container Height | Height of overlay container (% of skin height). | 80% | Required |
| Overlay Container Gap | Minimum space between overlay items. | 1vh | |
| Overlay Container Minimum Width | Minimum width before overlays risk becoming too small. | 120px | |
| Overlay Container Maximum Width | Maximum width to prevent overlays growing too large. | 300px | |
| Hide Overlay Below Minimum Width | Hide overlays if container drops below its minimum width. | False | choices: False, True | |
| Hover Effect | Sets the hover effect when the user hovers over the skin side panel. | scale | choices: disabled, glow, scale, glow & scale | |
| Overlay position | Sets the positioning and alignment of the overlay container, and all the overlays within it. | mid-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right | |
| Overlay Container Horizontal Offset | For left or right positioned overlays, this is the horizontal offset for the overlays away from that edge. | ||
| Overlay Container Vertical Offset | For top or bottomed positioned overlays, this is the vertical offset for the overlays away from that edge. |
Fluid Image & Streaming Video Skin
Side panel for fluid skin, with configurable background & overlays. · Version 2.0.0
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. |
Background
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Background (Image) | Upload the background (image) asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Background (Video) | Provide the background (video) video in MP4 or WEBM format, encoded for autoplay and kept under the maximum weight. | ||
| Max Video Stream Weight | Sets the maximum allowed stream weight for the background video asset. | 1.5mb | choices: 3.5mb, 3.0mb, 2.5mb, 2.0mb, 1.5mb, 1.0mb | |
| Scaling Mode | Sets how the background scales. Cover fills and may crop. Contain avoids cropping. None keeps intrinsic size. | cover | choices: cover, contain, none | |
| Anchor Point | Anchor Point used to position the background within the panel. | top-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right | |
| Background Colour | Colour of any empty space left after scaling. | #FFF |
Overlays
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Main Overlay | Main overlay asset, will use as much space as is available within the overlay container. | ||
| Top Overlay (optional) | Top-aligned overlay, anchored to the top of the overlay container. | ||
| Top Overlay Height | Define the top overlay height using responsive CSS units (px, %, vw, vh) so it scales across screens. | 15% | |
| Bottom Overlay (optional) | Bottom-aligned overlay, anchored to the bottom of the overlay container. | ||
| Bottom Overlay Height | Define the bottom overlay height using responsive CSS units (px, %, vw, vh) so it scales across screens. | 10% |
Overlay Config
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Overlay Container Width | Width of overlay container (% of side panel). | 80% | Required |
| Overlay Container Height | Height of overlay container (% of total skin height). | 80% | Required |
| Overlay Container Gap | Minimum space between overlay items. | 1vh | |
| Overlay Container Minimum Width | Minimum width before overlays risk becoming too small. | 120px | |
| Overlay Container Maximum Width | Maximum width to prevent overlays growing too large. | 300px | |
| Hide Overlay Below Minimum Width | Hide overlays if container drops below its minimum width. | False | choices: False, True | |
| Side Overlay Hover Effect | Effect applied to overlays on hover (desktop). | scale | choices: disabled, glow, scale, glow & scale | |
| Overlay Position | Anchor Point used to position the overlay container within the panel. | mid-center | choices: top-left, top-center, top-right, mid-left, mid-center, mid-right, bot-left, bot-center, bot-right | |
| Overlay Container Horizontal Offset | For left or right positioned overlays, this is the horizontal distance from the edge that the overlay will appear. | ||
| Overlay Container Vertical Offset | For top or bottomed positioned overlays, this is the vertical distance from the edge that the overlay will appear. | ||
| Top Overlay - Time In (optional) | Video time (seconds) at which the top overlay appears. Only works with background video. | ||
| Top Overlay - Time Out (optional) | Video time (seconds) at which the top overlay hides. Only works with background video. | ||
| Main Overlay - Time In (optional) | Video time (seconds) at which the main overlay appears. Only works with background video. | ||
| Main Overlay - Time Out (optional) | Video time (seconds) at which the main overlay hides. Only works with background video. | ||
| Bottom Overlay - Time In (optional) | Video time (seconds) at which the bottom overlay appears. Only works with background video. | ||
| Bottom Overlay - Time Out (optional) | Video time (seconds) at which the bottom overlay hides. Only works with background video. |
Sticky Video Player
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Video Side | Enables sticky video handoff from top banner into side panel when scrolling. | Disabled | choices: Disabled, Enabled | |
| Video Position | Vertical position of the sticky video within the side panel. | top | choices: top, middle, bottom | |
| Max Height | Maximum height applied to the sticky video player. | 250px | choices: 180px, 200px, 250px, 300px, 350px, 400px | |
| Vertical Offset | Additional vertical offset applied after positioning (supports px, %, vh). | 0 |