Salesforce

Customizing the Banner Template

Printable View
« Go Back
Information
Customizing the Banner Template
UUID-4e8b9f7c-08c8-b118-ff41-010b97554465
English
Checked
Content

You can customize the layout, styling, content, and behavior of your banner template. This allows you to create a look and feel that matches your organization's branding style and behavior preferences.

To customize a banner template

  1. On the Cookie Consent menu, select Templates. The Templates screen appears.

  2. Click on the name of the template you want to customize. The Template Details screen appears.

  3. Select the Web Browser button for the Platform.

  4. Go to the Banner tab.

  5. Complete the fields. For more information, see Layout, Styling, Content, and Behavior.

  6. Click the Save Template button.

Banner Template Details Screen References

Layout

banner_layout.png

Layout

Description

Position Options

Center Rounded

Displays a banner with rounded corners in the center of the screen.

Default

Choices Banner

Displays a banner that features the categories of your site's cookies and allows the user to configure their preferences.

Default

Flat

Displays a banner across the full width of the screen.

Bottom

Top

Floating Flat

Displays a half-width banner on one side of the screen.

Bottom Left

Bottom Right

Floating Rounded

Displays a half-width banner with rounded corners on one side of the screen.

Bottom Left

Bottom Right

Floating Rounded Corner

Displays a third-width banner with rounded corners on one side of the screen.

Bottom Left

Bottom Right

Floating Rounded Icon

Displays a banner with rounded corners and an icon across the bottom of the screen.

Default

No Banner

Displays the Preference Center at the first layer without a banner.

Default

Styling

banner_styling.png

Field

Description

Accept & Reject Button Color

Select the color for the buttons on the banner.

Continue Without Accepting Link Color

Select the color for the Continue Without Accepting link text.

Button Text Color

Select the color of the text on the buttons.

Text Color

Select the color of the text on the banner.

Background Color

Select the background color for the banner.

Link Text Color

Select the Cookie Policy link color.

Accordion Background Color

Select the color for the accordion background.

Manage Preferences Button Color

Select the color the Preference Center button.

Manage Preferences Link Color

Select the color for the Preference Center link.

Focus Border Color

Select the color for the border of an in-focus element.

Your Logo

Click the Upload button to upload a custom logo image.

Remove Logo

Click to remove your logo file.

Company Logo Screen Reader Value (aria-label)

Enter screen reader text for your custom logo.

Custom CSS

Enter custom CSS for additional styling of the banner.

Note

Custom CSS does not appear in the banner preview. It will appear when the banner script is implemented on your site.

Content

Title & Description
banner_title.png

Field

Description

Banner Title

Enter the title of the banner.

Notice Description

Enter a short description of the Privacy Notice.

Cookie Policy Link
banner_policy.png

Field

Description

Show Cookie Policy Link

Enable to show the Cookie Policy link.

Show Cookie Policy Link

Enter the text to appear on for the Cookie Policy link.

Cookie Policy Link

Enter the URL for the Cookie Policy.

To open the policy in a new tab, use the target="_blank" argument in the URL.

"www.example-policy.com" target="_blank"

Note

When configured for a CTV banner, the Cookie Policy Link will display as a QR code.

CTV_QR_banner.png

For more information, see Customizing the CTV Banner Template.

Imprint Link
banner_imprint.png

Field

Description

Show Imprint Link

Enable to display an imprint link on the banner.

Imprint Link URL

Enter a URL for the link.

Imprint Link Screen Reader Value (aria-label)

Enter a value for the imprint link aria label.

Partners Link
banner_partners.png

Field

Description

Partners Link

Display name for a link to the vendor list.

Button Set
banner_buttons.png

Field

Description

Show Allow All Button

Enable this setting to show a button on the banner that accepts all cookies and then closes the banner.

Allow All Cookies Button

Enter the text that will appear on the Allow All button.

Show Cookie Settings Button

Enable this setting to show a button on the banner that opens the preference center to allow for the granular selection of cookie preferences.

Cookie Settings Button

Enter the text that will appear on the Cookie Settings button.

When using the button in a web page to access the Cookie's Preference Center

Display the same Button Text as in batter or Show other text

Cookie Setting Button Style

Choose display the Cookie Settings as a Link or a Button

Show Reject All Button

Enable this setting to show a button to reject all cookies.

Reject All Button Text

Enter the text that will appear on the Reject All button.

Show Close Button

Enable this setting to show a close button on the banner.

Screen Reader Value (aria-label)

Enter the value for the close button aria label.

Note

Aria labels are metadata for page elements without text. When a site visitor is using a screen reader or similar assistive technology, the aria label is used to identify the element.

Opt Out Signal
opt_out_notif.png

Field

Description

Enable Opt-Out Signal Notification

Enable the setting to display a notification on cookie banners and preference centers that the opt-out preference signal has been honored.

Notification

Enter the notification text to display to your end users.

Behavior

banner_behavior.png

Field

Description

Banner Focus

Enable to define the initial focus upon banner load by one of the options found below.

Disable to allow the focus to follow the natural order for the elements as they appear on the page.

  • Initial Focus - Banner

    Select this option to direct the initial focus when the banner is loaded to the banner. After the banner is closed or interacted with, the focus will be the body of the page.

  • Initial Focus - Link, Button

    Select this option to direct the initial focus to the cookie policy or privacy policy link when the banner loads. After the banner is interacted with or closed, the focus will be the first tabbable element.

Require Banner Interaction

Enable to prevent access to the site until a user accepts cookies or changes settings.

Banner Animation

Select an animation option to determine how the banner appears.

  • Slide In

  • Fade In

  • Remove Animation

Use Relative Font Sizes

Enable to make the font sizes on the banner and preference center relative to your base HTML defined font size.

To manage Banner languages

Tip

In your banner script, you can define language codes using underscores or hyphens.

Example: en-US or en_US.

  1. On the Cookie Consent menu, select Templates. The Templates screen appears.

  2. Click on the name of the template. The Template Details screen appears.

  3. Click the Manage Languages button. The Manage Languages modal appears.

    banner_languages.png

  4. Select the checkboxes for the languages you want to enable. You can select a new default language by selecting the check box in the Default column.

    Note

    If you want to select languages based on locality, enable the Show Advanced Languages setting.

  5. Click the Save button.
 
Powered by