Preview

When the user visits a page, he sees a folded banner first. The user can see the fullscreen banner after a click or mouseover. There are several animation types available in the template settings: slide, cut, rotate, slide.

Supported platforms

Asset Requirements

Main panel

• Standard dimensions, WxH, px: 300х250, 240х350, 240х400, 180х150, 320х280, 728х90, 970х90, 970х200, 650х250, 240×500, 300х600, 160х600
• File type: .png, .jpg, .gif, html5 (ZIP archived).

Fullscreen panel

• Standard dimensions: 100%x100% for video and an HTML5 code; editable for an image or an image with video. High definition and screen ratio 16:9 are recommended.

Video

• If a video is on the fullscreen panel, its dimensions are 100%x100%. If a video is on the background, the container size can be set within the expanded panel’s borders.
• File type: .mp4
• Max duration: 30 sec
• Frame rate: 24 fps

Audio

• Initiated by the user (off by default)

Controls

• The X Close button in the top right corner of the expanded panel (allows the user to roll a banner up)

Creative size

• up to 300 KB without video
• up to 2 MB with video

Template Settings

The template settings are available in the UI.

Main panel

Expand Types

• Click — switch to the fullscreen panel by a click on the main panel
• Hover — switch to the fullscreen panel by a mouseover
  • Timer — pre-loader that shows up when the user moves a pointer over the main panel; duration 1.5 sec

Close Button

• Dark — the button will look like this         
• Light — the button will look like this         

Animation Type

• Cut — a website screenshot is ‘cut’ horizontally or vertically
• Side — a website screenshot ‘opens’ in one of the directions (up, down, left, right) by a defined number of degrees
• Slide — a website screenshot ‘slides’ in one of the directions (up, down, left, right)
• Rotate — a website screenshot pivots horizontally or vertically by a defined number of degrees (180)

Fullscreen panel

Fullscreen panel type

IMAGE

An image will be proportionally scaled, thus it is recommended to place important information close to the center. About 10-15% of an image can be cut at edges (depends on image and screen ratios).

• Width — defined automatically on image loading
• Height — defined automatically on image loading

VIDEO

Video Upload Type

• Local — video will be uploaded to a server from the user’s computer
• URL — video will be served from a third-party server following the link to an .mp4 file
• Width — video player width (100%)
• Height — video player height (100%)

Video Loop

• Yes — on playback completion, video plays again
• No — video stops after playback

HTML

A code should be archived as a .zip file. The banner’s main file should be named body.html and placed in the .zip archive’s root folder

IMAGE + VIDEO

An image will be proportionally scaled, thus it is recommended to place important information close to the center. About 10-15% of images can be cut at edges (depends on image and screen ratios).

• Width — defined automatically on image loading
• Height — defined automatically on image loading

Video Upload Type

• Local — video will be uploaded to a server from the user’s computer
• URL — video will be served from a third-party server following the link to an .mp4 file
• Width — video player width
• Height — video player height

Player Placement Settings

• Auto:
  • Player vertical layout
    • top
    • center
    • bottom
  • Player horizontal layout
    • left
    • center
    • right
• Manual:
  • Indentation from the top — a player’s indentation value from the top banner border, in px or %
  • Indentation from left — a player’s indentation value from the left banner border, in px or %

Video Loop

• Yes — on playback completion, video plays again
• No — video stops after playback

Video

• Paused — video is paused when a banner is loaded
• Auto — video autoplays
• Viewport — video plays when more than 50% of the video player space is visible

Event Tracking

• View
• Confirmed view
• Click
• Expand by user
• Auto-expand
• Collapse by user
• Auto-collapse
• Play
• Pause
• Resume
• Sound on
• Sound off
• Progress (firstQuartile, midpoint, thirdQuartile, complete)

Known Restrictions

• The format will work incorrectly if it is placed on a website in Safe Frame.