Configurable Fields
Configurable fields are editable items within each Interactive Template that allow you to fully customise the content and experience of your playable ad.
Background
It's likely that your choices for scaling and anchoring your video will leave unfilled edges in some resolutions. The background options allow you to control what is used to fill such areas.
| Field | Type/Options | Details |
|---|---|---|
| Content Filler | No filler: No blur applied, background will remain black. Blurred 1st frame: The first frame of the video will be chosen, blurred and layered behind the video. Blurred video: the video will be blurred and layered behind the video, playing in-sync. | The video filler option allows you to fill these areas with a blurred background, using the video as the content. |
| Image (default and landscape) | Image file (.png, .jpg, .jpeg, etc.) | The image option allows you to fill these areas with a specific image background. |
| Image Scaling (default and landscape) | Keep aspect, fill: Retains the image's aspect ratio and expands it to fill the screen. This may cause clipping, but will render the image large. Keep aspect, fit: Retains the aspect ratio and expands the image until it reaches the edge of the screen. This will avoid clipping but the image may appear small. Ignore aspect, fill: Will change the image's aspect ratio to match that of the preview screen, and then scale it up so that it fills it entirely. This will likely make the image appear stretched, but there will be no clipping and the image will be rendered large. | The image scaling option allows you to choose how your background image fits the layout. |
| Background Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the background - solid or gradient. |
Tap Hint
The Hint sections allow you to control the image, size and position of the hint or hints to be used. You can also add optional hint text and relevant options (size, colour). Unity Playworks provides a number of tested gestures in the Asset library. Sliders can be incremented by 1 at a time; to do so click the slider and then press left or right on your keyboard to begin changing the value.
| Field | Type/Options | Details |
|---|---|---|
| Text (default and landscape) | String (Letters, Numbers and Symbols) | The text to use in the hint. NOTE: The text for the hint is not positioned relative to the hint image. |
| 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 hint 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 hint text. |
| Text Offset (default and landscape) | Slider (Which changes a float value) | Moves the hint text along the x and y axis (horizontally and vertically). |
| Image | Image (.png, .jpg, .jpeg, .gif, etc.) | The image to use for each hint. If you are using a custom gesture and not an asset provided in the asset library, then we recommend the following: APNG format Ensure the focus point of the gesture (i.e where to tap) is at the centre of the image (use padding if necessary) |
| Size (default and landscape) | Float value (Number value that allows decimals, negative values will default the value used back to 50) | This determines the size of the 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. |
| Image Offset (default and landscape) | Slider (Which changes a float value) | Moves the hint image along the x or y axis (horizontally or vertically). |
| Flip | No Flip Flip horizontally Flip vertically Flip horizontally & vertically | Select which way you wish to flip your hint image. |
| Tap Radius | A float value (Number value that allows decimals, negative values will default the value used to 0) | This will determine how large the circular hole that is cut out of the mask is. The larger the number, the larger the hole. |
| Rotate | Slider (Which changes an float value) | Move the slider to determine what value in degrees you wish to rotate your hint image by. |
| Hole Offset (default & landscape) | Slider (Which changes a float value) | Moves the mask hole along the x and y axis (horizontally and vertically). |
| Overlay Color (default & landscape) | Click on the color bar to open the color context menu and begin choosing a color. | This controls what color is used to overlay on top of the video. A hole will then be cut out of this color overlay to help highlight your hint. By default this color will have 0 alpha, meaning it won't be visible. If you wish to make use of this mask/hole effect, select a color for the mask and adjust the alpha value to how transparent you wish the overlay to be. (A low alpha value will be highly transparent, and vice versa.) |
| Speed | Slider (Which changes a float value) | Move the slider to determine the speed of hint animation |
Store Button
This section controls a marketing store button which can be placed in various positions in the playable.
| Field | Type/Options | Details |
|---|---|---|
| Show | On or Off | Show or hide store button. |
| Text (default and landscape) | String (Letters, Numbers and Symbols) | The text to use in the store 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 store 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 banner text. |
| Image Type | 9 Patch Image: Recommended when using one of the button image we provide in the (asset library)[asset-library] under 'Controls > Buttons'. Static Image: Recommended when using your own custom image (set the End Card text colour to be transparent if your image includes text on it already). | The type of button to be used for the store button. |
| Image | Image (.png, .jpg, .jpeg, .gif, etc.) | The icon shown in the end card, if nothing is chosen the device App Store icon will be displayed. |
| Animation | No Animation Pulse Wobble Scale Opacity | The animation type for the button. Default value is No Animation. |
| Padding | Float value (Number value that allows decimals, negative values will default the value used back to 0.5) | Adds padding (space) to the top and bottom of the icon. |
| Offset (default and landscape) | Slider (Which changes a float value) | Moves the store button along the x or y axis (horizontally or vertically). |
Banner
This section controls a marketing banner which can be placed in various positions in the playable.
| Field | Type/Options | Details |
|---|---|---|
| Show | On or Off | Show or hide banner. |
| App Icon (default and landscape) | Image (.png, .jpg, .jpeg, .gif, etc.) | The icon shown in the end card, if nothing is chosen the device App Store icon will be displayed. |
| Icon Size (default and landscape) | Float value (Number value that allows decimals, negative values will default the value used back to 3) | 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. |
| Text (default and landscape) | String (Letters, Numbers and Symbols) | The text to use in the 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 banner 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 banner text. |
| Background Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the banner background - solid or gradient. |
| Click Goes To App Store | On or Off | Set up the option to determine whether clicking on the banner should lead to the store or not. |
| Vertical Offset | Slider (Which changes a float value) | The vertical position of the banner, from the top (0) to the bottom (1) of the device. |
| Content Alignment | Left Middle Right | The horizontal alignment of the whole banner elements. |
| Padding | Float value (Number value that allows decimals, negative values will default the value used back to 0.5) | Adds padding (space) to the top and bottom of the icon. |
End Card
This section controls all the major features of the end card, which shows at various stages of the playable depending on your choice of template.
| Field | Type/Options | Details |
|---|---|---|
| Type | Icon, Description and Button Icon and Button Description and Button Button Only | Choose the variation you want to use. |
| Icon (default and landscape) | Image (.png, .jpg, .jpeg, .gif, etc.) | The icon shown in the end card, if nothing is chosen the device App Store icon will be displayed. |
| Icon Size (default and landscape) | Float value (Number value that allows decimals, negative values will default the value used back to 7) | 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. |
| Icon Corner Radius | A float value (Number value that allows decimals) | The amount of corner radius to apply the icon. This means that if you icon image is square, you can round-off the corners quickly in Editor. |
| Icon Shadow Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the shadow to add behind the button. |
| Icon Shadow Spread | A float value (Number value that allows decimals) | The mount of spread for the icon shadow. |
| Button Image Type | 9 Patch Image: Recommended when using one of the button image we provide in the (asset library)[asset-library] under 'Controls > Buttons'. Static Image: Recommended when using your own custom image (set the End Card text colour to be transparent if your image includes text on it already). | The type of button to be used for the call to action. |
| Description Text (default and landscape) | String (Letters, Numbers and Symbols) | The text to use in the description. |
| Description 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. |
| Description 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 Text (default and landscape) | String (Letters, Numbers and Symbols) | The text to use in the Call To Action. |
| Call To Action 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 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. |
| Call To Action 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 Call To Action text. |
| Button Image | Image (.png, .jpg, .jpeg, .gif, etc.) | The button shown in the bottom of the screen, if nothing is chosen the default button image will be displayed. |
| Button Animation | No Animation Pulse Wobble Scale Opacity | The animation type for the button. Default value is No Animation. |
| Button Padding | A float value for each box (Number value that allows decimals, negative values) | Left box: Adds padding (space) to the top and bottom of the icon. Right box: Adds padding (space) to the left and right sides of the icon. |
| Background Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the End Card background - solid or gradient. |
| Background Image (default and landscape) | Image file (.png, .jpg, .jpeg, etc.) | The image option allows you to fill End Card background area with a specific image background. |
| Background Image Scaling (default and landscape) | Keep aspect, fill: Retains the image's aspect ratio and expands it to fill the screen. This may cause clipping, but will render the image large. Keep aspect, fit: Retains the aspect ratio and expands the image until it reaches the edge of the screen. This will avoid clipping but the image may appear small. Ignore aspect, fill: Will change the image's aspect ratio to match that of the preview screen, and then scale it up so that it fills it entirely. This will likely make the image appear stretched, but there will be no clipping and the image will be rendered large. | The image scaling option allows you to choose how your background image fits the layout. |
| Alignment | Top Middle Bottom | The vertical alignment of the whole End Card elements. |
| Appearance Animation Type | Slide Up Slide Down Slide Left Slide Right | The appearance animation type for the end card, which controls show the end card arrives on screen. Default value is Slide Up. |
| Appearance Animation Duration | A float value (Number value that allows decimals) | The duration of the end card appearance animation. Default is 0.25s. |
| Icon Position | On or Off | Enable/disable the option to set up custom icon position. |
| Horizontal | Slider (Which changes a float value) | Moves the result along the x axis (horizontally ). |
| Vertical | Slider (Which changes a float value) | Moves the result along the y axis (vertically). |
| Button Position | On or Off | Enable/disable the option to set up custom button position. |
| Horizontal | Slider (Which changes a float value) | Moves the result along the x axis (horizontally). |
| Vertical | Slider (Which changes a float value) | Moves the result along the y axis (vertically). |
App Store Controls
The App Store Controls allow you to customise when the user is directed to the app store after engaging with your playable.
| Field | Type/Options | Details |
|---|---|---|
| Click Number To Open Store | Integer (A whole number, so no decimals. Negative values and 0 will default to 1). | Most template have their own click control clicks are required before the app store is opened. |
| Keep Playing Video At End Card | On or Off | The video can continue playing or be paused when the End Card is displayed. |
| Open Store With End Card | On or Off | The app store is opened as the end card is displayed. Please note, that it is recommended to make sure that you only choose this option if the end card is displayed within a few seconds of a user interaction. |
| Whole End Card Is Clickable | On or Off | Whether or not the whole end card is clickable. The default behaviour means only the button is clickable. |
Sound
This section manages the inclusion of any audio you wish to play in your creative, including background music and sounds for taps, as well as the option to mute it.
| Field | Type/Options | Details |
|---|---|---|
| Soundtrack Audio | Audio file (.mp3, .wav etc.) | The audio to play in the background of your creative. Audio files are uploaded and stored in the Media Library. Audio will be looped automatically. |
| Mute Sound | On or Off | Toggle whether audio should be enabled or not. |
| End Card Audio | Audio file (.mp3, .wav etc.) | The audio to play when the End Card is displayed. Audio files are uploaded and stored in the Media Library. Audio will be looped automatically. |
| End Card Playback | Play Soundtrack: Play the audio selected in the Soundtrack Audio field during the End Card. Play End Card Audio: Play the audio selected in the End Card Audio field during the End Card. Stop Audio: Pause all audio during the End Card. | |
| Interaction Sound | Audio file (.mp3, .wav etc.) | The audio that plays when the user taps. Audio files are uploaded and stored in the Media Library. |
Advanced Settings
These settings provide additional controls which allow you to fine-tune the playable experience. Note that there are a number of fields here which may not be used for every Interactive Template.
| Field | Type/Options | Details |
|---|---|---|
| Default Font | Font file (.ttf only) | The default font to be used for all fields |
| CTA Button Font | Font file (.ttf only) | The font to be used for the button text. (Overrides the default font) |
| Low Power Mode Image | Image file (.png, .jpg, .jpeg, etc.) | You may upload a custom image to use when the user is in Low Power Mode on their phone, which could hinder the playable from fully playing. |
| Low Power Mode Preview | Image file (.png, .jpg, .jpeg, etc.) | You can preview the experience of Low Power Mode by pressing On. The default is not to preview the experience. |
| Low Power Mode Content Filler Type | Contain Cover | The image scaling option allows you to choose how your background image fits the layout. |
| Show End Card | On or Off | Enable or Disable End Card |