Styling the Kontomatik Widget
The Kontomatik Widgets come with default styling that is well-tested and recognized by end-users. However, you may want to customize it to match your brand’s color scheme.
This guide will cover the topic of customizing the SignIn Widget, however styling the PDF Widget is done in a very similar way.
Customizing the colors and sizes
Customizing the colors of the Kontomatik Widget is achieved by passing the styling: { /* ... */ } object 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, #FFF) and the standard RGB (rgb(12, 34, 56)) notations. 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 the Kontomatik’s role as the administrator of the PSU’s data in the Account Information Service process, removing the Kontomatik logo from the SignIn Widget is not possible. It is crucial for end-users to know who is providing the AIS services and processing their data.
Similarly, the Widget’s outer frame, also essential for identifying the AIS service provider, cannot be changed or removed.
The same rule applies to the content of the consents, which are collected by Kontomatik and cannot be modified.
Why no CSS overrides?
The Kontomatik team still improves the widgets 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 the 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 widgets offer only basic customization and we can’t allow any external modifications.
