Following you can find C-S showcase with all the available widgets' templates:
...
Hotspots can be placed anywhere in the video and are typically used to trigger another event when clicked. Hotspots are used to highlight other elements within the video ad.
- None
Widget Options: Each option needs to be communicated when creating the ad format.
- Color: Any RGB Color
- Stroke Size: 1px to 10px
- Hotspot Size: 10px, 20px, 50px, 80px, 100, 120px
- Hotspot Animation: Puff/Ring
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the interactions trigger an event or clickthrough
- Pause on Show: Often used when the widget has been triggered
See Interactive Hotspot preview here.
How to set up an Interactive Hotspot: This is just a sample but you can select more options that you can find in the Widget page.
| Anchor | ||||
|---|---|---|---|---|
|
Template: Interactive Element FE5
Interactive CTA is used to open a landing page but can also be used to trigger another event in the ad. Each CTA can direct to a unique landing page to redirect traffic from the ad to the appropriate part of an advertiser’s website.
Assets Required:
- One or more images
- File Type: .png, .jpeg, .ai
- File Size: min 15kb - max 2MB
- Dimensions: Any
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the interaction triggers an event or clickthrough
- Opacity: Define wether the widget is semi-transparent and becomes solid when hovered
- Hover Zoom-in: Define wether the widget zoom-in when hovered
- Pause on Show: Often used when the widget has been triggered
See Interactive CTA preview here.
...
How to set up an Interactive CTA: This is just a sample but you can select more options that you can find in the Widget page.
| Anchor | ||||
|---|---|---|---|---|
|
...
Interactive Loading is used at the beginning of the ad in order to inform that the video is interactive/shoppable/personalized. The interactive loading appear at the beginning of the ad and disappears within 1.5”.
Assets Required:
- One or more images
- File Type: .png, .jpeg, .ai
- File Size: min 15kb - max 2MB
- Dimensions: Any
Widget Options: Each interactive loading can have its own text underneath.
- Suggested Text: Interactive Ad, Interactive Video, Shoppable Ad, Shoppable Video
- Clickthrough: Define whether loading is clickable or not
See Interactive Loading preview here.
How to set up an Interactive Loading: This is just a sample but you can select more options that you can find in the Widget page.
Anchor interactivegallery interactivegallery
Interactive Gallery
| interactivegallery | |
| interactivegallery |
...
The Interactive gallery is used to showcase different products, services, movie characters and more. Each image of the gallery can redirect to a specific landing page or trigger another event within the ad unit.
Assets Required:
- File type: .png, .jpeg, .ai
- File Size: min 15kb - max 2MB
- Dimensions: Any
- Number of images: Min: 2 - Max: 40
Widget Options: Each option needs to be communicated when creating the ad unit/format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the interaction triggers an event or clickthrough
- Opacity: Define wether the widget is semi-transparent and becomes solid when hovered
- Hover Zoom-in: Define wether the widget zoom-in when hovered
- Pause on Show: Often used when the widget has been triggered
See Interactive Gallery preview here.
...
How to set up an Interactive Gallery: This is just a sample but you can select more options that you can find in the Widget page.
| Anchor | ||||
|---|---|---|---|---|
|
...
How to set up an Add to Calendar: This is just a sample but you can select more options that you can find in the Widget page.
| Anchor | ||||
|---|---|---|---|---|
|
...
How to set up an Interactive Map: This is just a sample but you can select more options that you can find in the Widget page.
Anchor shoppableproducts shoppableproducts
Shoppable Products
| shoppableproducts | |
| shoppableproducts |
...
How to set up a Shoppable Product: This is just a sample but you can select more options that you can find in the Widget page.
Anchor interactiveform interactiveform
Interactive Form
| interactiveform | |
| interactiveform |
...
How to set up an Interactive Form: This is just a sample but you can select more options that you can find in the Widget page.
Anchor interactivecards interactivecards
Interactive Cards
| interactivecards | |
| interactivecards |
...
Interactive Cards are used to provide more details about a product, a movie character, a service and more and are usually triggered by another widget. By default, interactive cards contain an image on the left side, a text on the right side, and a CTA on the bottom right corner. However, Interactive Cards are highly customizable through the editor setting and additional css.
Assets Required:
- One ore more images.
- File type: .png, .jpeg, .ai.
- File Size: min 15kb - max 2MB.
- Dimensions: Any
- Text: Optional.
- Suggested CTA Text: Learn more, Shop Now, Visit Website.
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the interaction triggers an event or clickthrough.
- Opacity: Define wether the widget is semi-transparent and becomes solid when hovered.
- Hover Zoom-in: Define wether the widget zoom-in when hovered.
- Pause on Show: Often used when the widget has been triggered.
- Card Close Button: The top right “X” can be changed to any color.
See Interactive Card preview here.
How to set up an Interactive Card: This is just a sample but you can select more options that you can find in the Widget page.
Anchor interactivevideocards interactivevideocards
Video Card
| interactivevideocards | |
| interactivevideocards |
...
Video Cards are used are used to enrich the ad with more engaging content on top of the video content in the background. Video cards are usually triggered by another widget. There Is the possibility to have more than one video card viewable at the same time.
Assets Required:
- One video.
- File type: .mov, .mp4.
- File Size: max 3-5MB.
- Dimensions: 16:9 or 9:16
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event: Define whether the interaction triggers an event.
- Opacity: Define wether the widget is semi-transparent and becomes solid when hovered.
- Hover Zoom-in: Define wether the widget zoom-in when hovered.
- Pause on Show: Often used when the widget has been triggered.
- Card Close Button: The top right “X” can be changed to any color.
- Video Loop: Define wether the video should loop or not.
- Sync Videos: Decide if the video card should be synchronized with the original video.
- Show Controls: Decide if play/pause controls should be viewed.
See Video Card preview here.
How to set up a Video Card: This is just a sample but you can select more options that you can find in the Widget page.
Anchor interactiveslider interactiveslider
| interactiveslider | |
| interactiveslider |
...
The interactive Slider widget allows you to show the before and after versions of an image/video by simply sliding over them with mouse on desktop or finger on mobile. This widget will give you the unique before and after perspective of two different views, along with customization options. Applicable across both mobile and desktop, the Slider widget is often used to launch new products and more.
Assets Required:
- Video/image: 2 videos or 2 images.
- File type: .mp4, .mov (for videos), .jpeg, .png, .psd (for images). - File Size: min 3 - 5MB (for videos) 15kb-2MB (for images).
- Dimensions: Any.
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the interaction triggers an event or clickthrough after the background image has been revealed.
See Interactive Slider preview here.
How to set up an Interactive Slider: This is just a sample but you can select more options that you can find in the Widget page.
Anchor scratchandreveal scratchandreveal
| scratchandreveal | |
| scratchandreveal |
...
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the interaction triggers an event or clickthrough after the background image has been revealed.
- Hover Zoom-in: Define wether the widget zoom-in when hovered.
- Pause on Show: Often used when the widget has been triggered.
See Scratch and Reveal preview here.
How to set up a Scratch and Reveal: This is just a sample but you can select more options that you can find in the Widget page.
| Anchor | ||||
|---|---|---|---|---|
|
The interactive bar can be placed bot to the left or the right of the video ad and it is used to show more information about the content of the video. Each icon can trigger another widget or open a specific landing page. The interactive bar opens up when triggered and can be closed when the user clicks or taps on the arrow.
Assets Required:
- File type: .png, .jpeg, .ai.
- File Size: min 15kb - max 2MB.
- Dimensions: Any
- Number of Icons: Min. 3 - No Max.
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the icons triggers an event or clickthrough once clicked.
- Pause on Show: Often used when the bar starts closed.
- Color: Define the color of bar.
- Open/Close: Define whether the bar starts open or close.
- Arrow: If the bar starts closed, an arrow is added so that users can open it and close it. Define the color of the arrow.
.gif?version=1&modificationDate=1579268641063&cacheVersion=1&api=v2&height=250)
See Interactive Sidebar preview here.
How to set up an Interactive Topbar: This is just a sample but you can select more options that you can find in the Widget page.
.gif?version=1&modificationDate=1585748189855&cacheVersion=1&api=v2&width=764)
...
The interactive Topbar can be placed on top of the video and it is used to show more information about the content of the video. Each icon can trigger another widget or open a specific landing page. The interactive bar opens up when triggered and can be closed when the user clicks or taps on the arrow.
Assets Required:
- File type: .png, .jpeg, .ai.
- File Size: min 15kb - max 2MB.
- Dimensions: Any
- Number of Icons: Min. 3 - Max. 8.
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the icons triggers an event or clickthrough once clicked.
- Pause on Show: Often used when the bar starts closed.
- Color: Define the color of bar.
- Open/Close: Define whether the bar starts open or close.
- Arrow: If the bar starts closed, an arrow is added so that users can open it and close it. Define the color of the arrow.
See Interactive Topbar preview here.
How to set up an Interactive Topbar: This is just a sample but you can select more options that you can find in the Widget page.
Anchor quiz/poll quiz/poll
Quiz / Poll
| quiz/poll | |
| quiz/poll |
Widget Type: Quiz / Poll
Quizzes and Polls are used to engage the user by asking their opinion on anything related to the brand, the content, or the product. Quizzes show if the answer was correct or wrong, while polls show the percentage of answers each option received.
Assets Required:
- Question: Shouldn’t be longer than 6-7 words.
- Answers: min 2 answers - max 6.
-Background Image: Optional. Allows the widget to have a background instead of being transparent.
Widget Options: Each option needs to be communicated when creating the ad format.
- Quiz/Poll: Define whether the widget is a poll or a quiz.
- Pause/Play on Click: Yes/No
- Event: Define whether answer triggers an event. Each answer can trigger a different event.
- Pause on Show: Often used when the widget has been triggered.
- Color: Define the color of both questions and answers.
- Open/Close: Define whether the bar starts open or close.
...
How to set up a Poll: This is just a sample but you can select more options that you can find in the Widget page.
Anchor directcalls directcalls
| directcalls | |
| directcalls |
Direct Calls
The Direct Call widget allows the user to call a number and directly contact a brand's call center or customer service. It is applicable both to mobile and desktop.
Assets Required:
- One Image
- File Type: .png, .jpeg, .ai
- File Size: min 15kb - max 2MB
- Dimensions: Any
- Phone Number
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the icons triggers an event or clickthrough once clicked.
- Opacity: Define wether the widget is semi-transparent and becomes solid when hovered.
- Hover Zoom-in: Define wether the widget zoom-in when hovered.
- Pause on Show: Often used when the widget has been triggered.
...
How to set up a Direct Call: This is just a sample but you can select more options that you can find in the Widget page.
.gif?version=1&modificationDate=1585739423550&cacheVersion=1&api=v2&width=764)
See Direct Calls preview here.
...
Template: Interactive Element Fe5
L’app downloader permette all’utente di raggiungere Google Play o Apple Store per consentire all’utente di scaricare l’applicazione sul suo device (mobile e desktop).
The app downloader allows the user to reach Google Play or Apple Store in order to download the application on his device (mobile and desktop).
Assets Required:
- One or more Images
- File Type: .png, .jpeg, .ai
- File Size: min 15kb - max 2MB
- Dimensions: Any
Widget Options: Each option needs to be communicated when creating the ad format.
- Pause/Play on Click: Yes/No
- Event/Clickthrough: Define whether the icons triggers an event or clickthrough once clicked.
- Opacity: Define wether the widget is semi-transparent and becomes solid when hovered.
- Hover Zoom-in: Define wether the widget zoom-in when hovered.
- Pause on Show: Often used when the widget has been triggered.
See App Downloader preview here.
How to set up an App Downloader: This is just a sample but you can select more options that you can find in the Widget page.
NEXT STEP: Ad Export >>
...