Layouts Overview

Transitioning to Layouts

Layouts is a new feature released in 2025 that alters how a banner is constructed in CSS. If you have previous customizations as a current DataGrail customer, you can follow this migration guide to help with transitioning to Layouts. Your current banner will not have any style alterations until your next publish event.

You can construct the notice "banner" that appears on your website to data subjects using the Layouts feature. This guide provides an overview of how to use the layout builder tool.

If you want to customize the layout to match your brand's design patterns, including using custom fonts and colors, you can follow our CSS customization guide. And if you need to localize the banner, you can check out our localization guide.

Layers

A layout can have one or more layers which you can use to progressively disclose more privacy controls to data subjects, such as setting individual category preferences to disable specific sets of trackers and cookies.

When you first open the layout editor, you'll be able to review the default layout that we've defined for you. This default layout is based on past customer implementations and verified by our own legal teams. It features two layers:

1. First Layer: This provides data subjects a notice of intent to track them and provide a personalized browsing experience. They are given three options to proceed on your website. This is the first layer that will be visible to data subjects if the banner is set to show on load (or what will appear as default if you set an anchor link to trigger the banner notice).
2. Categories Layer: This layer reveals the specific categories of trackers/services they will consent to, along with the ability to enable/disable specific categories to customize their consent choices.

You can create, delete, and exclude layers from the layout. Excluding layers should be used if you are still working on the layer as a draft, or want to only allow its reveal using a link or button on your website.

Assets

Each layer is constructed with a specific set of assets which have their own customization capabilities to make the layout unique to your brand's needs.

You can add assets to a layer by dragging and dropping the asset onto the visible layer:

If you want to delete an asset, you can do so by scrolling to the bottom of the asset.

Text Asset

Text assets can be used to title the layout, create headers to separate content, or write out body copy to inform data subjects on their privacy rights for your website. All text can be localized in the languages enabled using our localization feature.

Link Asset

Links are typically used to share additional information that would be too verbose for this notice that appears to all visitors of your website, like your full privacy policy, the offline opt-out form, or other information related to building trust with your users. You can add and localize as many links as you want in for each link asset.

Button Asset

Buttons are used to map actions that generally either accept categories of trackers/cookies from running on your website or to link to other layers you have created as part of the layout.

Category Asset

You can allow data subjects to make granular choices on which categories of trackers/cookies they want to opt in to. You must have the button asset with the action to save custom choices on the same layer for the choices to be saved.

By default, we will reveal all categories/services that DataGrail Consent has built into the product for selection. In the future, you'll be able to create additional category purposes that can map to category selections within this asset.

Appearance

You have a few additional appearance options within the layout builder, which can be augmented with CSS customization.

Position

You can uniquely define how the layer appears when loaded on the website. For example, the first layer can appear on the bottom left, but the second layer (with category selections) can be a full screen modal takeover.

Themes

The neutral theme has a black and white color scheme, while the blue theme features blue accent colors.

Close Behavior

You can add an "X" button on the top right of the notice which acts as an implicit acceptance of the defined tracking behavior for that region based on the policy settings within DataGrail Consent.

Linking to a Specific Layer or Layout

Developers can use a simple javascript function to add a link or button to your website, which will bring up a specific layer within the layout available for that region. Certain regions allow for companies to simply display a "notice of tracking" on load, but then providing an affordance to opt out of tracking elsewhere.

To do this, set the first layer to only have text and an "X" option, and create an unlinked second layer within the layout. After doing this, you can define a button or link on your website (such as the "your privacy choices" link at the footer of your website) which calls the following function:

window.DG_BANNER_API.showLayer('[banner_api_id]')

The banner_api_id can be found in the layer details section, as seen below:

This field cannot be changed after the layer is created, to ensure that your website links do not break when publishing updates made to a layer.