General
The Clinch - Legal Overlay: Standard widget offers the ability to add an overlay that can be triggered with user interaction. It includes customizable options across the trigger, close button, and other attributes of the overlay. Opening this overlay also triggers a video pause() when used in conjunction with an Interactive HTML template that contains a video object. Read more about how to access The Widget Editor.
Important: The JavaScript for this widget is centrally hosted by Clinch. If you'd like to customize the JavaScript, you may create your own widget by duplicating the code directly in your widget or hosting the new .js file in your account asset library and revising the .js script location.
Usage Guide Sections
This usage guide provides Widget Editor UI references for the widget's following sections:
Widget Editor UI
Section: Drawer
| Attributes | Type, Default Value | Purpose |
| Text | TEXTAREA, default Lorem ipsum… | Injects HTML content into the drawer |
| Font | FONT, default "" | Defines the font family and weight for all drawer text. |
| Font Size (px) | NUMBER, px, default 12 | Sets the base font size (in px) for the drawer |
| Text Color | COLOR, default #333333 | Sets the color of text inside the legal overlay content. |
| Background Color | COLOR, default #ffffff | Color of the drawer’s backdrop. |
| Top Padding (px) | NUMBER, px, default 0 | Defines the top padding (in px) of the content container. |
| Padding (px) | NUMBER, px, default 10 | Applies left/right/bottom padding (in px) around the content |
| Text Alignment | SELECT, default Left | Sets horizontal text alignment inside the drawer (left, center, right). |
| Transparency (%) | NUMBER, %, default 80 | Drawer background opacity percentage. |
| Animate in From | SELECT, default BOTTOM | Controls the drawer’s entry/exit direction (TOP, BOTTOM, LEFT, RIGHT) or fade (FADE). |
| Drawer Open (%) | NUMBER, %, default 25 | Percentage of viewport the drawer expands to when opened. |
Section: Auto Scroll
| Attributes | Type, Default Value | Purpose |
| Auto Scroll | BOOLEAN, default No | Enables or disables automatic vertical scrolling of the drawer text.
|
| Auto Scroll Speed | NUMBER, fps, default 15 | Controls the frame rate for smooth scrolling (frames per second). |
| Auto Scroll Duration (s) | NUMBER, s, default 15 | Duration in seconds before auto-scroll stop |
| Auto Scroll Start Delay (s) | NUMBER, s, default 2 | Delay in seconds before auto-scroll begins after opening. |
Section: Trigger
| Attributes | Type, Default Value | Purpose |
| Text | TEXT, default Offer Details | Content displayed inside the trigger element. |
| Font | FONT, default "" | Defines the font family and weight for all trigger text. |
| Font Size (px) | NUMBER, px, default 20 | Sets the base font size for trigger text. |
| Color | COLOR, default #333333 | Default color of the trigger text. |
| Hover Color | COLOR, default #bbbbbb | Color of the trigger text when the user hovers over it. |
| Padding (px) | NUMBER, px, default 4 | Padding around the trigger's clickable area. |
| Text Alignment | SELECT, default Left | Text alignment inside the trigger.
|
| Horizontal Alignment | SELECT, default Left | Justifies the trigger horizontally within its container. |
| Vertical Alignment | SELECT, default Center | Aligns the trigger vertically within its container. |
Section: Close
| Attributes | Type, Default Value | Purpose |
| Type | SELECT, default Image | Selects between text or image for the close button. |
| Text | TEXT, default Close | Text displayed if Type = TEXT vs IMAGE. |
| Font | FONT, default "" | Font family and weight for the close button. |
| Font Size (px) | NUMBER, px, default 12 | Font size when closeType is TEXT. |
| Color | COLOR, default #333333 | Text color for the close button. |
| Top Padding (px) | NUMBER, px, default 20 | Top padding around the close control. |
| Horizontal Padding (px) | NUMBER, px, default 10 | Left/right padding around the close control. |
| Bottom Padding (px) | NUMBER, px, default 10 | Bottom padding around the close control. |
| Alignment | SELECT, default Left | Positions the close button within its holder.
|
| Image | IMAGE, default CDN URL | Source URL for the close icon when Type = IMAGE. |
| Image Width (px) | NUMBER, px, default 40 | Width of the close icon. |
| Image Height (px) | NUMBER, px, default 40 | Height of the close icon. |
Section: Scroll Bar
| Attributes | Type, Default Value | Purpose |
| Track Color | COLOR, default #cccccc | Color of the scrollbar's track in the drawer. |
| Thumb Color | COLOR, default #999999 | Color of the scrollbar's thumb in the drawer. |