Widgets

Widget Appearance

Customize the look and feel of Elements to match the design of your site.

IntelliProve Widgets support visual customisation, which allows you to match the design of your site with the themeOverrides option. The layout of each Widget stays consistent, but you can modify colors and fonts.

1

Configure your customer theming

2

If needed, fine-tune individual widgets by overriding theming variables



Customer Theming



Document image


The widgets share the same customer theming as configured for the Plug-in.

By default they will visually match with the rest of the design.

For more information on how the customer theming is configured, refer to the web plug-in documentation.

Document image


Theming variables

The appearance of each individual widget can be fine-tuned by overriding the customer-level theming variables.

Colors

Each individual color in the customer theme can be overridden for an individual widget by passing the themeOverrides object when creating the widget.

Set the color value for a theme variable to the color HEX code, prefixed with "#".

Dark-themed widgets are made possible by setting the dark_mode flag and swapping the Brand Secondary and Brand Tertiary.

JS


Transparent Background Color

The IntelliProve Widgets have a transparent background. The color of the enclosing container shines through. Color changes only apply to the foreground colors.

Fonts

The IntelliProve widgets automatically inherit the font family from the CSS of the enclosing container.

This script configures the font family for the whole website body. 👉

Set global font