Styling the Kontomatik Widget

The Kontomatik Widget comes with default styling that is well-tested and recognized by end-users. However, you may want to customize the widget to match your brand’s color scheme. This guide will walk you through the process of customizing the Kontomatik Widget.

Customizing the Colors

Customizing the colors of the Kontomatik Widget is achieved by passing the styling: { /* ... */ } to the embedKontomatik() function. You’ll find the full list of supported properties in our documentation.

The color values use a subset of standard CSS color definitions. You can use both the hexadecimal (#123456) as well as the standard RGB (rgb(12, 34, 56)) notations. Please note that RGBA, HSL, and HSLA notations are not supported, and predefined HTML and CSS color names cannot be used. The properties that take size values accept standard CSS units like px, em, and so on.

Is it possible to remove the Kontomatik logo?

Due to Kontomatik’s role as the administrator of PSU data in the AIS process, removing the Kontomatik logo from the widget is not possible. It is crucial for end-users to know who is providing AIS services and processing their data. The same applies to the frame of the widget and the content of the consents, which cannot be modified.

Why no CSS overrides?

The Kontomatik widget team still improves the widget to optimize conversion rate, security, and usability. Allowing for arbitrary CSS overrides would potentially hinder our team’s ability to maintain and improve the widget over time. This is because accommodating various client-specific styles could lead to complications in widget development. Addressing a bug or making improvements in one particular styling could inadvertently disrupt the layout or functionality of another client’s customized widget.Therefore, the Kontomatik widget only offers easy customization of colors.