Banners

This section describes the banner creation process, which can be completed independently or as part of domain configuration. If you arrived here from the domain setup process, complete these steps to create a banner, then return to the "Banner Style" step of your domain configuration to proceed with domain setup.

Note: When creating banners through this standalone process, the banners are configured as global by default. To configure location-based banner display, you must assign banners to domains through the Domain Management workflow (Section 2.2: Location-Based Banner Display).


1.1 Creating a Banner

  1. Click on Privacy Ops in the top navigation menu.

  2. Click on Cookie Consent.

Fig. 1. Click on Cookie Consent

You will be redirected to the Cookie Consent screen, which displays the domains where the Cookie Consent feature is active.

Fig. 2. Cookie Consent Page

In the left-side panel, click on Banners.

3. Click on Create New Banner

Fig. 2. Click on Add New Banner

The banner creation process is divided into two main steps: configuring general settings and consent type, followed by customizing the banner style.

This initial step establishes the basic parameters of your banner.

Basic Information

  1. Enter a descriptive Banner Name in the designated field

  2. Provide an optional Description to help identify the banner's purpose

  3. If you want to allow domain administrators to modify these settings, check the Allow customization option

    Fig. 3. Add details for New Banner - Banner Name and Description

Regulatory Framework Selection

Select the privacy regulation your banner needs to comply with:

  1. Click the dropdown menu to view available options

  2. Choose one of the following regulatory frameworks:

    • GDPR/EU: European Union's General Data Protection Regulation

    • CCPA: California Consumer Privacy Act

    • Others/Custom: For custom regulatory requirements

    Fig 4. Regulation and Consent Options

Consent Type Configuration

Set how visitors will interact with your cookie consent banner:

  1. Select one of the following consent types:

    • Accept All / Reject All: Provides visitors with options to either accept or reject all cookies

    • Reject Only: Allows visitors only to decline the use of cookies

    • Accept Only: Allows visitors only to provide consent for all cookies

  2. If you want domain administrators to be able to modify this setting, check the Allow customization option below the consent type selection

After completing these settings, click the Next button to proceed to style customization.

1.1.2 Styles

The Styles step allows you to customize how your consent banner appears to visitors, with options for layout, colors, and content.

Main Banner Layout

Choose the presentation format for your consent banner:

  1. Classic banner:

This is the traditional banner that appears either at the top or bottom of the webpage. Users have the option to determine its positioning.

Fig. 4. Choose Banner Layout

Fig 5. Classic banner
  1. Floating box: A small box appears at a designated corner of the screen. The position can be adjusted to various sections like bottom-left, center-right, etc.

Fig. 4.1 Choose Banner Layout - Floating box

  1. Pop-up: As the name suggests, a direct window that emerges when the website is accessed. This ensures immediate attention.

Fig. 4.2 Choose Banner Layout - Pop-up

  • Style Customization

    Personalize the visual appearance of your banner:

    1. Color Palette:

      • Set the Background Color for the main banner

      • Choose the Text Color for body content

      • Select the Border Color and adjust border width if desired

      • Set the Title Color for headings

    2. Content and Text:

      • Edit the banner Title text

      • Modify the Description text explaining cookie usage

      • Update the Privacy Policy link text and URL

      • Customize any additional text elements

    3. Button Customization:

      • For each button (Accept All, Reject All, Manage Preferences, etc.):

        • Set the Background Color

        • Choose the Border Color

        • Select the Text Color

        • Edit the button label text

    Fig. 5 Choose Banner Style
Fig. 5 1 Choose Banner Style

Preference Center Configuration

Customize the appearance of the detailed preference center that appears when users click "Manage Preferences":

Fig. 6 Preference Center
  1. Pop-up Title and Description

Customize the appearance of the title and the description text in the preference center.

  • Title Text Colour: Specifies the color of the title text. Input type: color code/ name.

  • Body Text Colour: Specifies the color of the body text. Input type: color code/ name.

  1. Category Level Actions: Defines how the categories are displayed.

  • Toggle: Enables a toggle display for categories.

  • Checkbox: Enables a checkbox display for categories.

  1. Cookie Display Details

Set up how the cookie information is displayed to the users.

  • Show individual cookies in each category: Allows users to view individual cookies under each category. Input type: checkbox.

Fig. 6.1 Preference Center
  1. Categories

Modify the visual aspects of the categories section.

  • Title Text Colour: Specifies the color of the category title text. Input type: color code/ name.

  • Description Text Colour: Specifies the color of the category description text. Input type: color code/ name.

  1. Save Preferences Button

Configure the "Save Preferences" button’s visual attributes.

  • Background Colour: Defines the background color of the button. Input type: color code/ name.

  • Border Colour: Determines the border color of the button. Input type: color code/ name.

  • Title Text Colour: Sets the text color of the button. Input type: color code/ name.

Fig. 6.2 Preference Center
  1. Accept All Button

Customize the "Accept All" button with preferred visual settings.

  • Background Colour: Sets the background color of the button. Input type: color code/ name.

  • Border Colour: Specifies the border color of the button. Input type: color code/ name.

  • Title Text Colour: Configures the text color of the button. Input type: color code/ name.

  1. Reject All Button

Personalize the "Reject All" button with the following settings:

  • Background Colour: Alters the background color of the button. Input type: color code/ name.

  • Border Colour: Adjusts the border color of the button. Input type: color code/ name.

  • Title Text Colour: Modifies the text color of the button. Input type: color code/ name.

Fig. 6.3 Preference Center

1.3 Finalizing Banner Creation and Review

This section outlines the procedures to preview, save, modify, and review your newly created banner.

1.3.1 Previewing the Banner

  • Always start by previewing your banner to ensure that it appears as expected to your audience.

Fig. 7. Previewing the Banner
Fig. 7.1. Previewing the Banner

1.3.2 Save Options and Modifications

  • At the bottom, you'll find two primary options: Save & Close and Cancel.

    • If you're satisfied with the preview, proceed to save.

    • Before saving, feel free to modify any content fields, such as the title, description, or button labels.

Fig. 8. Modifying the Banner

1.3.3 Confirmation Process

  • Once you've made all necessary modifications, click Save.

  • A prompt will appear; confirm your actions by selecting Okay.

  • A success message will subsequently pop up, confirming that the banner has been successfully created.

Fig. 9. Saving the Banner
Fig. 9.1 Saving the Banner

1.3.4 Reviewing Banner Details

  • Navigate back to the main page.

  • Here, you can view details of your banner, including its Name, Consent Type, Date Updated, and Date Created.

1.3.5 Editing and Deleting Banners

  • For further actions, locate the ellipsis(...) icon next to your banner entry.

  • This will provide you with options to Edit or Delete the banner.

Fig. 10. Editing and Deleting Banners

Note: The standalone Banner Creation Workflow ends here. To implement banners on websites, you must use the Domain Implementation Workflow.


For location-based banner configuration see Location-based Banners.

Last updated