Configure the look and feel of your frontend integration with Catch's JavaScript SDK.
Before reading this page...
We recommend reading the Catch.js SDK Overview first.
Overview
This document expands on stylistic configurability of the widgets provided by the Catch.js JavaScript SDK. This page is your guide to configure the look and feel of the widgets on your site to align them with your brand.
Atoms
We use the term “atom” to describe the individual components within each of the widgets. In other words, widgets are comprised of one or more atoms. To provide stylistic control of the widgets, atoms inherit styles from the styles set on the parent element. Most styles are configurable at the widget level, some styles are also configurable at the atom level.
Benefit Text
The benefit text highlights the primary consumer benefit within the context of a widget. This can vary based on the user (defined at the widget level). In some cases, the benefit text is a link that opens up the earnings breakdown modal.
The following widgets include the benefit text atom:
Filler Text
Filler Text connects the benefit with the intended action to complete the thought. The filler text is not interactive.
The following widgets include the filler text atom:
Info Button
The info button is used to indicate that the consumer can interact with the content to learn more.
The following widgets include the Info Button atom:
Action Button
The action button is a button that communicates the primary action of a widget.
The following widgets include the action button atom:
CSS Variables
Style configurations are available for each of the Catch.js widgets via CSS variables. To configure your widgets, add rules to your CSS stylesheets with selectors that target a widget’s root element. All atoms within your widget will inherit the styles you set on the root element. For example, your selector would look like this to style the Callout widget:
catch-callout {
...
}
Listed below are each widget’s available CSS variables and what style attributes each of those variables configures.
What is configurable at the widget level?
Callout includes these Atoms:
| CSS Variable Name | CSS Property Set | Description |
|---|---|---|
| --font-size | font-size | Applies to all elements - benefit text, filler text, Catch logo, and info button. |
| --font-family | font-family | Applies to text elements - benefit text and filler text. |
| --text-color | color | Applies to the filler text. Benefit text is controlled separately. |
| --line-height | line-height | Applies to all elements. |
| --text-transform | text-transform | Applies to text elements - benefit text and filler text. |
| --border-color | border-color | Applies to the border around the Callout element. |
| --border-radius | border-radius | Applies to the border around the Callout element. |
To configure the font-size to be 10px and make text lowercase in a Callout widget, add this rule to your CSS:
catch-callout {
--font-size: 10px;
--text-transform: lowercase;
}
Express Checkout Callout includes these Atoms:
| CSS Variable Name | CSS Property Set | Description |
|---|---|---|
| --font-size | font-size | Applies to all elements - benefit text, filler text, and info button. |
| --font-family | font-family | Applies to text elements - benefit text and filler text. |
| --text-color | color | Applies to the filler text and info button. Benefit text is controlled separately. |
| --line-height | line-height | Applies to all elements. |
| --text-transform | text-transform | Applies to text elements - benefit text and filler text. |
| --border-color | border-color | Applies to the border around the Express Checkout Callout element. |
| --border-radius | border-radius | Applies to the border around the Express Checkout Callout element. |
To configure the text color to be red be 10px and make the line height 12px in an Express Checkout Callout widget, add this rule to your CSS:
catch-express-checkout-callout {
--text-color: #ff0000;
--line-height: 12px;
}
Payment Method includes these Atoms:
| CSS Variable Name | CSS Property Set | Description |
|---|---|---|
| --font-size | font-size | Applies to all elements - benefit text, filler text, and info button. |
| --font-family | font-family | Applies to text elements - benefit text and filler text. |
| --text-color | color | Applies to the filler text and info button. benefit text is controlled separately. |
| --line-height | line-height | Applies to all elements. |
| --text-transform | text-transform | Applies to text elements - benefit text and filler text. |
To configure the font family to be red be Arial and make the font-size 16px in a Payment Method widget, add this rule to your CSS:
catch-payment-method {
--font-size: 16px;
--font-family: Arial;
}
Purchase Confirmation includes these Atoms:
| CSS Variable Name | CSS Property Set | Description |
|---|---|---|
| --font-size | font-size | Applies to all elements - benefit text, filler text, and info button. |
| --font-family | font-family | Applies to text elements - benefit text and filler text. |
| --text-color | color | Applies to the filler text and info button. Benefit text is controlled separately. |
| --line-height | line-height | Applies to all elements. |
| --text-transform | text-transform | Applies to text elements - benefit text and filler text. |
| --border-color | border-color | Applies to the border around the Purchase Confirmation element. |
| --border-radius | border-radius | Applies to the border around the Purchase Confirmation element. |
To configure the border radius 20px and the border color blue in a Purchase Confirmation widget, add this rule to your CSS:
catch-purchase-confirmation {
--border-radius: 20px;
--border-color: #0000ff;
}
Campaign Link includes these Atoms:
| CSS Variable | CSS Property Set | Description |
|---|---|---|
| --font-size | font-size | Applies to all elements - benefit text, filler text, and info button. |
| --font-family | font-family | Applies to text elements - benefit text and filler text. |
| --text-color | color | Applies to the filler text and info button. Benefit text is controlled separately. |
| --line-height | line-height | Applies to all elements. |
| --text-transform | text-transform | Applies to text elements - benefit text and filler text. |
| --border-radius | border-radius | Applies to the border around the Campaign Link element. |
| --border-radius | border-radius | Applies to the border around the Campaign Link element. |
To configure the text color green in a Campaign Link widget, add this rule to your CSS:
catch-campaign-link {
--font-size: #00ff00;
}
What is configurable at the atom level?
The benefit text and action button atoms offer CSS variables that specifically control these two atoms. These variables take precedence over widget level CSS variables.
Benefit Text
The font weight and color of the benefit text atom are configurable with specific CSS variables listed below.
| CSS Variable Name | CSS Property Set | Description |
|---|---|---|
| --benefit-text-earn-color | color | Styles the benefit text in the case of the consumer earning credits. Example: “Earn x% credit.” |
| --benefit-text-redeem-color | color | Styles the benefit text in the case of the consumer redeeming credits. Example: “Redeem x% credit.” |
| --benefit-text-font-weight | font-weight | Sets the font-weight of the benefit text. |
To configure the font weight to 500 and the color of the benefit text in the case of redeeming credits to blue in a Callout widget, add this rule to your CSS:
catch-callout {
--font-weight: 500;
--benefit-text-redeem-color: #0000ff;
}
Action Button
The action button offers many style configurations.
| CSS Variable Name | CSS Property Set | Description |
|---|---|---|
| --action-trigger-font-size | font-size | Sets the font-size of the action button text. |
| --action-trigger-color | color | Sets the color of the action button text. |
| --action-trigger-height | height | Sets the height of the action button. |
| --action-trigger-line-height | line-height | Sets the line height of the action button. |
| --action-trigger-font-weight | font-weight | Sets the font weight of the action button text. |
| --action-trigger-letter-spacing | letter-spacing | Sets the letter spacing of the action button text. |
| --action-trigger-box-shadow | box-shadow | Sets the box shadow of the action button. |
| --action-trigger-border-radius | border-radius | Sets the border radius of the action button. |
| --action-trigger-background-color | background-color | Sets the background color of the action button. |
| --action-trigger-text-transform | text-transform | Sets the text transform of the action button text. |
To configure the height to be 40px and the border-radius to be 12px of the action button in a Campaign Link widget, add this rule to your CSS:
catch-campaign-link {
--action-trigger-height: 40px;
--action-trigger-border-radius: 12px;
}
Filler Text & Info Button
The filler text and info button atoms do not offer any CSS variables that are specific to them; these atoms inherit the styles defined at the widget level.
Other Frontend Configuration Options
The CSS variable approach is our recommendation for frontend configurability. If that doesn’t fit your use case, we have a couple other options.
Default themes are available to configure each widget’s base colors. There are four options available - a light and dark mode version using a color and monochrome color scheme. The options are “light-color”, “light-mono”, “dark-color”, and “dark-mono”. This approach is a lightweight solution to style the base colors used in a widget but offers less atom-level control. The Live Demo has options to view each theme for each widget.
A custom theme offers stylistic configurations over more Catch surface areas than a default theme. The theme values take effect in Catch.js widgets as well as other consumer-facing Catch applications. This approach requires coordination with Catch.
Unsupported Styling
We do not support configurations outside of using the CSS variables listed above. It’s possible you’ll come across variables the widgets use that are not explicitly documented on this page. Those variables are subject to change (in either name or where they are applied) or removal altogether. We recommend you only use the variables listed on this page.
Additionally, note that Catch requires styling to comply with our Brand Guidelines in order to keep the core experience of Catch consistent.