To configure the theme of your widgets, there are two levels of customization:

Looking for additional customization options? Contact us.

Global CSS reset rules can unintentionally affect IntelliProve web components. This commonly happens when a project includes a reset or normalization stylesheet (such as a custom CSS reset or Tailwind’s Preflight), which applies baseline styles to all HTML elements using broad selectors (for example the * selector).

To prevent conflicts, global reset styles should be reverted for IntelliProve components. Make sure this reset override is applied after any global reset or Preflight styles, so it properly restores the component’s intended styling.

Simple example:

Tailwind example:

IntelliProve Widgets follow the global styling settings you configure via the IntelliProve admin console. The layout of each widget remains consistent, but you can modify colors and fonts. For more information on how the customer theming is configured, refer to the web plug-in documentation.

IntelliProve web components render using the font families configured in your admin console. The components reference those fonts by name, they don't load the font files themselves.

This means the fonts need to already be loaded on the page where you embed the components (through your own @font-face rules or a font provider). We deliberately don't import fonts from inside the components, so we never inject anything into your page or cause font conflicts or duplicate imports. The face scan works differently: it runs inside an iframe on a page we build, so there we load the fonts ourselves.

You can override the fonts set in the admin console with two CSS variables. Set them on :root or any element that wraps the components, and they'll cascade into every component:

In addition to configuring theming through the global settings in the admin console, you can style individual web components when importing them directly.

Widgets are self-contained components that are designed to function as standalone building blocks. They are visually recognizable by their card-like appearance and can be styled to fit your design. 

To maintain design consistency, widgets use a shared set of CSS variables. By adjusting these variables, you can update the styling across all widgets simultaneously.

Each widget can be styled individually. Since our custom web components use the Shadow DOM, external styles do not penetrate the internal structure of the component.

If you need to style nested elements, please contact us. We can expose additional CSS variables (which are accessible within the Shadow DOM) or define ::part selectors for more granular control.