Customization

To customize the user interface of the CookieHub dialogs, you can click the Customize button located in the top right corner or next to each region.

Regions

You can easily switch between multiple regions that you have configured by using the region dropdown box located at the top. However, please keep in mind that certain customization options are exclusive to the Default region and will remain consistent across all regions.

Cookie banner

The first tab of the CookieHub dashboard is the Cookie banner/notice section, where you can customize the initial cookie consent dialog. This includes options for the theme, position, action buttons, and color scheme. Below is a list of the available customization options:

• Theme: Choose from one of the four themes available.
• Position: Control the placement of the dialog on the screen. The available position options differ depending on the selected theme.
• Close icon: Show a close icon and choose the action taken when it's clicked. The options include Dismiss (closing the dialog without setting any consent), Deny all cookies, or Allow all cookies.
• Colors: Choose the accent color for primary buttons and checkboxes. The text color is automatically detected based on the contrast to the accent color, but you can override it with the second color picker.
• Block user interface: Show a semi-transparent overlay over your website to prevent the user from clicking on anything until they have made their choices.
• Dark mode: Use dark background colors instead of light colors.
• Compact: Make all elements slightly more compact.
• Enhanced accessibility: Make changes to the code to ensure the CookieHub dialog is fully WCAG compliant.
• Learn more link: Set the URL where the user is taken when they click the Learn more link in the dialog. If you have multiple languages enabled, you can also set different learn more links for each language in the Content tab for your domain.
• Learn more target: Choose whether to open the learn more URL in a new window/tab or the same one. When "Automatic" is selected, CookieHub will automatically open external links in a new window/tab but internal links in the same window/tab.
• Actions: Drag and drop actions between the visible and hidden containers to control which actions are shown and in what order.

Preference center

The Preference Center tab allows you to customize the user interface for the preference center/cookie settings dialog, giving you control over how consent actions are presented, which tabs are shown, and what actions are available.

The following options are available:

• Show services for each category: Displays a list of services belonging to each category, including information about the cookies used by each service and the vendor assigned to the service.
• Show Vendor tab: Displays a list of vendors that set cookies on the site and allows the user to allow and deny specific vendors.
• Show cookie declaration tab: Shows the cookie declaration tab with detailed information about the cookies in use on the site.
• Show "Your choices": Displays information on which categories the user has consented to, the unique token used to look up action from the consent log, and timestamp.
• Hide CookieHub branding: Hides the CookieHub branding in the bottom left corner.

Please note that the available actions in this tab may differ based on the version you are using. If you do not see some of these options, updating to the latest version is recommended.

Icon

In the Icon tab, you can control the visibility, style and position of the cookie settings icon used to resurface the preference center dialog and make changes to consent.

The following options are available:

• Style: You can choose to hide the icon completely or select one of the 3 styles available
• Position: You can choose to position the icon either on the bottom left or bottom right
• Dark mode: Inverse the color scheme of the settings icon

Please note that if you choose to hide the icon, you should considder adding a custom link to resurface the preference center dialog as described here: Resurface dialog

Custom CSS

To further customize the CookieHub user interface, you can provide CSS code to override the default styles. This option is available in the CSS tab of the customization section. Here you can enter your own CSS code, which will be applied to the CookieHub dialogs.

This option allows for more advanced customization, such as changing the font family, size and color of the text, changing the background color and adding your own images or logos. However, please note that modifying the CSS requires some technical knowledge and should be done with caution to avoid breaking the functionality of the CookieHub dialogs.