# Formats All formats are expected to be coded in HTML5. **Limitations**: Reparenting iFrames isn't possible (it reloads/looses state) ## Skin *The creative is drawn on background of the page, behind main content block.* This format is not specified by IAB and is fairly specific to the Czech market - Catch size: **2000×1400** - Can be *forced* to catch all on certain adUnits - Platform: Desktop only ## Interscroller *The content of the creative is fixed on the page background, limited by viewport dimensions* Fastest rendering was determined by real world testing of all reasonable approaches, see [Experiments / Interscroller Rendering](../experiments/interscroller-rendering/README.md). - Catch size: **120x600, 160x600, 300x600, 480×820, 720×1280 or 768x1230 (mafra)** - Can be *limited* to certain adUnits - Platform: Mobile, but can be used anywhere ## Native *Data based creative (text, image, link), using templates and styles of the page to blend in* The data is formatted based on [iAB OpenRTB Native API specification](https://iabtechlab.com/standards/openrtb-native/) It is encoded with base64 and passed with postMessage from the ad script to the topmost window, where cpexPackage should be listening for it. There are multiple templates that can be matched to multiple adUnit names - Catch size: **548×150 or 0x0** - Platform: Any ## Slideup *Accepts any HTML banner. Native banners as well, but relies on their fallback template. (Which is suitable, because they shouldn't fit into the page, like a regular native)* Only single position per page. There is no size catching, whatever comes into the slideup elementId should be rendered as a slideup. It requires slideup settings (with a target elementId) to be present. The data is the same as for the Native format. - Catch size: Any, based on elementId - Platform: Any ## Vignette *Accepts any HTML or Native (Data Creative). Natives are rendered using our fixed vignette template.* Only single position per page. There is no size catching, whatever comes into the vignette elementId should be rendered as a vignette It requires vignette settings (with a target elementId) to be present The data is the same as for the Native format. It first renders the HTML, in case that is the actual creative. If it catches Native post message, it draws the Native template over it. No timing logic needed. - Catch size: Any, based on elementId - Platform: Mobile, but can be used anywhere ## Responsive *Accepts any HTML banner* Only single position per page. This format scales down the creative to fit into smaller mobile viewports - Catch size: Combination of elementId and size from settings (formats.responsive.width, formats.responsive.height) - Platform: Mobile, but can be used anywhere # Testing *You can test any creative (either packaged preset or custom HTML) locally by overriding settings.* ## LocalStorage Place the following into `cpexPackage` key in localStorage of the tested page. ### Preset creative *Presets: `banner`, `interscroller`, `skin`, `native`, `slideup`* ``` { "adserver": { "adapter": "test" }, "formats": { "testCreatives": { "adUnitName": { "preset": "skin", "width": 2000, "height": 1400 } } } } ``` ### Custom creative ``` { "adserver": { "adapter": "test" }, "formats": { "testCreatives": { "adUnitName": { "html": "", "width": 2000, "height": 1400 } } } } ``` ### Native template *Note: Template literals and multi-line string concatenation cannot be used, JSON does not allow it* ``` { "adserver": { "adapter": "test" }, "formats": { "testCreatives": { "adUnitName": { "html": "

Example headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", "width": 548, "height": 150 } } } } ```