Skip to main content

End Card Overlay

The End Card Overlay template horizontally splits the screen space between the lower half containing an end card layout (banner img, title, description, CTA button etc.), and the upper half dedicated to a looping segment of gameplay (video).

When to use it?#

This template is great if your game contains a lot of visually-attractive elements that you want to showcase at the end of a video ad. For example, you can present the user with a choice of characters, levels or items.

Example#

Below is an example using real assets from a game.

images-xsmall

Required assets#

The following are the required assets in order to make this template a success.

  • Background video or image
  • Game icon
  • Eye catching description

Configurable Fields#

This template includes a selection of general configurable fields which are all detailed here.

The specific fields which are provided with the End Card Overlay template are listed below.

Images Section#

FieldType/OptionsDetails
App IconImage file (.png, .jpg, .jpeg, etc.)The icon shown in the middle of the screen, if nothing is chosen the device App Store icon will be displayed.
App BannerImage file (.png, .jpg, .jpeg, etc.)The banner shown below the app icon, if nothing is chosen then the placeholder image will disappear on the live version.
Icon Size (default and landscape)Float value (Number value that allows decimals, negative values not allowed)This determines the size of the icon image, the higher the value the larger the image will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Banner Size (default and landscape)Float value (Number value that allows decimals, negative values not allowed)This determines the size of the banner image, the higher the value the larger the image will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Show Icon (default and landscape)On or OffToggle whether the App Icon should be displayed or not.
Show Banner (default and landscape)On or OffToggle whether the App Banner should be displayed or not.
Overlay BackgroundClick on the color bar to open the color context menu and begin choosing a color.The color behind the end card portion of the template (the lower half).

Title Section#

FieldType/OptionsDetails
TextString (Letters, Numbers and Symbols)The title text that will appear below the App Icon and App Banner.
Font Size (default and landscape)A float value (Number value that allows decimals, negative values will default the value used back to 1)The size of the title text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Text Color (default and landscape)Click on the color bar to open the color context menu and begin choosing a color.The color of the title text.

Description Section#

FieldType/OptionsDetails
TextString (Letters, Numbers and Symbols)The description text that will appear below the title text.
Font Size (default and landscape)A float value (Number value that allows decimals, negative values will default the value used back to 1)The size of the description text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Text Color (default and landscape)Click on the color bar to open the color context menu and begin choosing a color.The color of the description text.

Call To Action Section#

FieldType/OptionsDetails
TextString (Letters, Numbers and Symbols)The text that will appear over the CTA button.
Font Size (default and landscape)A float value (Number value that allows decimals, negative values will default the value used back to 1)The size of the button text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Text Color (default and landscape)Click on the color bar to open the color context menu and begin choosing a color.The color of the button text.

Footer Section#

FieldType/OptionsDetails
TextString (Letters, Numbers and Symbols)The text that will appear below the CTA button.
Font Size (default and landscape)A float value (Number value that allows decimals, negative values will default the value used back to 1)The size of the footer text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.
Text Color (default and landscape)Click on the color bar to open the color context menu and begin choosing a color.The color of the footer text.

Advanced Settings Section#

Whilst the Advanced Settings section is universal, this template contains unique settings listed below.

FieldType/OptionsDetails
Element Spacing (default and landscape)A float value (Number value that allows decimals, negative values will default the value used back to 1)The amount of space between fields in the end card section of the template. Increasing the amount of space will enlarge the end card as a whole to accommodate.
Landscape AlignmentLeft or RightDecides whether the end card portion of the template will position itself on the left or right of the screen in landscape mode.
Overlay Layout-Normal: The video will be resized to fit the portion of the screen that isn't occupied by the end card.
-Overlay: The video will fill to fit the screen, including the space behind the end card segment.
Decides how the gameplay video should fit into the template.
Landscape Content AlignmentCenter, Left or RightDecides how the fields within the end card segment are aligned horizontally.
Landscape Content Spread-No Spread: Default layout.
-Spread Evenly: Evenly spaces the fields apart.
-Spread Evenly (except header & footer): Even spacing except for header and footer.
-Center Description: Ensures the Title and Description occupy the center area (vertically).
Decides how the fields within the end card are positioned vertically. Examples below.
Footer FontFont file (.ttf only)The font to be used for the footer text.

Landscape Content Spread example#

images-small