Basiq's Customise UI

Partners can use the Layout tab within ConsentUI customise to adjust the fonts, colors, text size and appearance of other elements of ConsentUI.

The changes are instantly applied to any screen under consent.basiq.io domain (includes Consent Manage, Extend, Connect etc. screens)

Note: This does not apply to the AuthUI (connect.basiq.io) project screens.

The changes can be previewed live when editing via Dashboard.

In case of an error (e.g. the configuration values failing to load), ConsentUI will fall back to default values.

Some elements cannot be customised in order to keep compliance (e.g. CDR logo will always remain on a white background).

Other UI elements such as shadows, divider lines, loaders etc. aren’t customisable, but are using a neutral black color with opacity, making them fit in stylistically with any other color values.

Icons inherit the color of their parent div. (e.g. the ‘info’ button on home screen inherits the color of paragraph text its related to)

Input fields inherit the ‘accent’ and ‘inactive’ color values, being dynamic elements with multiple states.

Customisable fields

• Header image
  Same as before (logo at the top of ConsentUI homepage), has been moved to Layout tab.

• Font family
  Partners can select from one of many open-source Google Fonts. Setting a font family once applies the change on all elements. Text is set to bold or regular by default, if the selected font supports it.

• Font size
  Both heading and paragraph sizes can be configured. Heading size applies to the title present on most screens (e.g. 'Select institution'), while paragraph size applies to all other text, including buttons, subtext, popups etc.

• Heading color
  Changes the font-face color of all heading text elements.

• Paragraph color
  Changes the font-face color of all paragraph text elements, which are not disabled or a link.

• Inactive color
  Changes the font-face color of all disabled elements, subtext and disclaimers.

• Links
  Changes the font-face color of all clickable elements (links), back buttons and active inputs.

• Buttons
  Buttons can have their background color, text color and border radius customised. These can be configured differently for Primary and Secondary buttons.

• Background
  Partner can set the background color of the entire page (container)

• Accreditation (only for Open Banking enabled applications)
  Changes the background and text colors of CDR accreditation badge.

• Consent Policy - Data we will collect
  You can select different pre-configured scopes to fetch from the Data Holders. Read more here Consent Scopes

You can get started here