General
The widgets highlighted in this article can be used in conjunction or independently, based on creative requirements. They're intended to be paired with an Ad Builder template type that includes a video object on the timeline. The attributes of the buttons are highly customizable without the need for any additional code.
Usage Guide Widgets & Sections
This usage guide provides Widget Editor UI references for the following widgets and their sections:
- The Clinch - Video Button: Mute/Unmute widget enables the ability to mute or unmute an Ad Builder template that includes audio/video on the timeline. This action will mute the entire ad volume regardless of how many video objects are included. As a best practice, your video object should not be muted in the ad builder by default. The audio state will be solely controlled by the widget instead.
- The Clinch - Video Button: Play/Pause widget triggers the play or pause method of the Ad Builder timeline. It can be used with or without a template that contains a video object/layer.
- The Clinch - Video Button: Replay widget triggers the play method only. It doesn't "rewind" the timeline at any point within the playback of the ad. As a best practice, it should always be triggered at the end of the length of the ad. By default, the widget is designed to check to see if the ad is "playing" or if it has "ended." The button is only visible when the timeline has reached its end. It can be used with or without a template that contains a video object/layer.
- The Clinch - Video Controls: Layout widget allows for the above video controls to be contained in a single container for easy alignment of the controls at a default level. Making it more efficient to control the layout of the controls in a single place, rather than having to manage individual layers to position them per ad size. This widget should only be used if you are including two or more of the above video widgets and want to control the layout at a global level.
Read more about how to access The Widget Editor.
Important: The JavaScript for these widgets is centrally hosted by Clinch. If you'd like to customize the JavaScript, you may create your own widget by copying/duplicating the code directly in your widget or hosting the new .js file in your account asset library and revising the .js script location.
Widget Editor UI | Clinch - Video Button: Mute/Unmute
Section: General
| Attributes | Type, Default Value | Purpose |
| Unmuted Icon | IMAGE, default CDN URL | Source of backgroundImage used for the unmuted state of the button. |
| Muted Icon | IMAGE, default CDN URL | Source of backgroundImage used for the muted state of the button. |
| Image Width (px) | NUMBER, default 24 | Width of the button image and its background. |
| Image Height (px) | NUMBER, default 24 | Height of the button image and its background. |
| Vertical Padding (px) | NUMBER, default 4 | Vertical inner spacing of the button. |
| Horizontal Padding (px) | NUMBER, default 4 | Horizontal inner spacing of the button. |
| Border Width (px) | NUMBER, default 0 | Thickness of the button’s border. |
| Border Radius (px) | NUMBER, default 4 | Corner radius (rounding) of the button. |
| Border Opacity (%) | NUMBER, default 0 | Opacity applied to the border color of the button. |
| Start Muted | BOOLEAN, default Yes | Toggles the audio of the ad to be on or off by default.
|
| Button CSS Override | TEXT, default // | If populated, overrides solid color and styles the button background with CSS. Example CSS:
|
| Image CSS Override | TEXT, default // | Custom CSS rules (semicolon-separated) applied to the Image. Example CSS:
|
Section: Idle State
| Attributes | Type, Default Value | Purpose |
| Bg Color Opacity (%) | NUMBER, default 100 | Opacity applied to the solid background. |
| Bg Color | COLOR, default #000000 | Default solid background. |
| Border Color | COLOR, default #000000 | Default border color. |
Section: Hover State
| Attributes | Type, Default Value | Purpose |
| Bg Color | COLOR, default #666666 | Default solid background color. |
| Border Color | COLOR, default #cccccc | Default border color. |
| Scale (%) | NUMBER, default 105 | Scale percentage triggered when rolling over the button. |
| Animation Time (ms) | NUMBER, default 300 | Duration of the scale transition (in ms). |
Widget Editor UI | Clinch - Video Button: Play/Pause
Section: General
| Attributes | Type, Default Value | Purpose |
| Pause Icon | IMAGE, default CDN URL | Source of backgroundImage used for the pause state of the button. |
| Play Icon | IMAGE, default CDN URL | Source of backgroundImage used for the play state of the button. |
| Image Width (px) | NUMBER, default 24 | Width of the button image and its background. |
| Image Height (px) | NUMBER, default 24 | Height of the button image and its background. |
| Vertical Padding (px) | NUMBER, default 4 | Vertical inner spacing of the button. |
| Horizontal Padding (px) | NUMBER, default 4 | Horizontal inner spacing of the button. |
| Border Width (px) | NUMBER, default 0 | Thickness of the button’s border. |
| Border Radius (px) | NUMBER, default 4 | Corner radius (rounding) of the button. |
| Border Opacity (%) | NUMBER, default 0 | Opacity applied to the border color of the button. |
| Button CSS Override | TEXT, default // | If populated, overrides solid color and styles the button background with CSS. Example CSS:
|
| Image CSS Override | TEXT, default // | Custom CSS rules (semicolon-separated) applied to the Image. Example CSS:
|
Section: Idle State
| Attributes | Type, Default Value | Purpose |
| Bg Color Opacity (%) | NUMBER, default 100 | Opacity applied to the solid background. |
| Bg Color | COLOR, default #000000 | Default solid background color. |
| Border Color | COLOR, default #000000 | Default border color. |
Section: Hover State
| Attributes | Type, Default Value | Purpose |
| Bg Color | COLOR, default #666666 | Default solid background color. |
| Border Color | COLOR, default #cccccc | Default border color. |
| Scale (%) | NUMBER, default 105 | Scale percentage triggered when rolling over the button. |
| Animation Time (ms) | NUMBER, default 300 | Duration of the scale transition (in ms). |
Widget Editor UI | Clinch - Video Button: Replay
Section: General
| Attributes | Type, Default Value | Purpose |
| Replay Icon | IMAGE, default CDN URL | Source of backgroundImage used for the replay button. |
| Image Width (px) | NUMBER, default 22 | Width of the button image and its background. |
| Image Height (px) | NUMBER, default 22 | Height of the button image and its background. |
| Vertical Padding (px) | NUMBER, default 5 | Vertical inner spacing of the button. |
| Horizontal Padding (px) | NUMBER, default 5 | Horizontal inner spacing of the button. |
| Border Width (px) | NUMBER, default 0 | Thickness of the button’s border. |
| Border Radius (px) | NUMBER, default 4 | Corner radius (rounding) of the button. |
| Border Opacity (%) | NUMBER, default 0 | Opacity applied to the border color of the button. |
| Button CSS Override | TEXT, default // | If populated, overrides solid color and styles the button background with CSS. Example CSS:
|
| Image CSS Override | TEXT, default // | Custom CSS rules (semicolon-separated) applied to the Image. Example CSS:
|
| Show Immediately | BOOLEAN, default No |
If set to Yes, visibility will be set to true. If set to No, the button will appear automatically when the timeline of the Ad Builder composition, where the replay widget resides, reaches its end. If the replay widget is only meant to replay the video object, and the video is shorter than the main timeline, both the video and the widget should be placed in a pre-comp that matches the video’s duration.
|
Section: Idle State
| Attributes | Type, Default Value | Purpose |
| Bg Color Opacity (%) | NUMBER, default 0 | Opacity applied to the solid background. |
| Bg Color | COLOR, default #000000 | Default solid background color. |
| Border Color | COLOR, default #000000 | Default border color. |
Section: Hover State
| Attributes | Type, Default Value | Purpose |
| Bg Color | COLOR, default #666666 | Default solid background color. |
| Border Color | COLOR, default #cccccc | Default border color. |
| Scale (%) | NUMBER, default 105 | Scale percentage triggered when rolling over the button. |
| Animation Time (ms) | NUMBER, default 300 | Duration of the scale transition (in ms). |
Widget Editor UI | Clinch - Video Controls: Layout
Section: General
| Attributes | Type, Default Value | Purpose |
| Horizontal Align | SELECT, default Left | Horizontal alignment of the buttons within the video controls container:
|
| Vertical Align | SELECT, default Top | Vertical alignment of the buttons within the video controls container:
|
| Play Button Order | NUMBER, default 1 | Flex order of the play button in the video controls container. |
| Mute Button Order | NUMBER, default 2 | Flex order of the mute button in the video controls container. |
| Use Play Button | BOOLEAN, default No | If No, the play button is hidden until Yes is selected. Options:
|
| Use Mute Button | BOOLEAN, default No | If No, the mute button is hidden until Yes is selected. Options:
|
| Controls CSS Override | TEXT, default // |
If populated, overrides solid color and styles the button background with CSS. Example CSS:
|
| Orientation | SELECT, default Row |
Chooses how the buttons will display within the video controls container. Row: Stacks the buttons on top of each other in separate rows. Column: Positions the buttons side by side in separate columns. |
| Padding | NUMBER, default 6 | Inner spacing of the video controls container. |
| Replay Button Order | NUMBER, default 3 | Flex order of the replay button in the video controls container. |
| Use Replay Button | BOOLEAN, default No | If No, the replay button is hidden until Yes is selected. Options:
|