Skip to main content
Sign in

Search

Flight Control Help Center

Widget Usage Guide: Clinch - CTA Button

  • Updated

General

The Clinch - CTA Button widget enables the addition of an interactive call-to-action button with customizable dimensions, scaling, and other attributes. It supports both image-based styling and CSS overrides for full design flexibility. 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 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.

Usage Guide Sections

This usage guide provides Widget Editor UI references for the widget's following sections:

Widget Editor UI

Section: General

Attributes Type, Default Value Purpose
Text TEXT, default LEARN MORE Defines the call-to-action text within the button.
Font FONT, default "" Defines the font family and weight for all drawer text.
Font Size (px) NUMBER, px, default 16 Sets the base font size (in px) for the button text.
Maximum Text Width (px) NUMBER, default 100 Maximum width of the text before wrapping/truncation.
Border Width (px) NUMBER, default 0 Thickness of the CTA button's border.
Border Radius (px) NUMBER, default 10 Corner radius (rounding) of the button.
Border Opacity (%) NUMBER, default 100 Opacity applied to the border color of the button.
Bg Color Opacity (%) NUMBER, default 100 Opacity applied to the solid background when no CSS gradient is used.
Bg Gradient (CSS) TEXT, default null

If populated, overrides solid color and styles the button background with CSS.

Example CSS:

  • linear-gradient(#e66465, #9198e5)
  • radial-gradient(red 5%, yellow 15%, green 60%)
  • conic-gradient(red, yellow, green)
Vertical Padding (px) NUMBER, default 10 Vertical inner spacing of the button.
Horizontal Padding (px) NUMBER, default 16 Horizontal inner spacing of the button.
Button Type SELECT, default Button

Image: Uses backgroundImage, backgroundSize, width, and height from Image Width/Image Height.


Button: Uses solid or gradient CSS backgrounds.
Image URL IMAGE, default CDN URL Source for backgroundImage when Button Type is image.
Image Width (px) NUMBER, default 50 Width of the button image and its background.
Image Height (px) NUMBER, default 50 Height of the button image and its background.
Use Carousel Linkout BOOLEAN, default No If true, click invokes clinchSdk.click to navigate to the carousel item's URL.
  • Yes
  • No 
Button CSS Override TEXT, default // Arbitrary CSS rules applied to the button container.

Example CSS:
  • box-shadow: 10px 5px 5px red;
  • transform: skew(-10deg)
Text CSS Override TEXT, default // Arbitrary CSS rules applied to the text span.

Example CSS:
  • letter-spacing: 2px
  • text-decoration: underline;
  • text-underline-offset: 4px;
  • text-shadow: 2px 2px 2px black;

Section: Idle State

Attributes Type, Default Value Purpose
Text Color COLOR, default #ffffff Default color of the button text.
Background Color COLOR, default #000000 Default solid background color when no gradient is applied.
Border Color COLOR, default #000000 Default border color.

Section: Hover State

Attributes Type, Default Value Purpose
Text Color COLOR, default #000000 Text color applied on hover.
Background Color COLOR, default #ffffff Background color on hover when no gradient applied.
Border Hover COLOR, default #ffffff Border color on hover.
Effect SELECT, default Scale

SHIMMER: Fades in shimmer overlay with keyframes.

SCALE: Scales the button and swaps border/text colors.
Effect Duration (ms) NUMBER, default 500 Timing for transitions and shimmer animation.
Scale (%) NUMBER, default 105 Scale factor when using SCALE effect.
Shimmer Color COLOR, default #ffffff Color used in shimmer gradient.
Shimmer Opacity (%) NUMBER, default 50 Opacity of shimmer overlay.

Section: Alignment

Attributes Type, Default Value Purpose
Horizontal Alignment SELECT, default Center Justifies the button within its parent container.
  • Left
  • Center
  • Right 
Vertical Alignment SELECT, default Center Aligns the button within its parent container.
  • Left
  • Center
  • Right