Choose where the cookie banner appears and whether it covers your page

TermsFeed Free Cookie Consent shows its cookie banner in 1 of 4 layouts, chosen with the notice_banner_type option: headline, simple, interstitial, or standalone. The layout decides where the consent banner sits and whether visitors must answer before they use the page. The text, the buttons, and the Preferences Center stay the same in every layout.

Set the layout in the configuration object you pass to cookieconsent.run(). The value ignores case. A missing value gives headline, and an unknown value gives headline with a warning in the console when debug is on.

<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "simple",
  "consent_type": "express",
  "palette": "light",
  "language": "en"
});
});
</script>

The headline and simple layouts leave the page usable, and the interstitial and standalone layouts cover it until the visitor answers. Pick a covering layout when visitors must answer before anything else. Pick an open layout when visitors read your content first.

The positions in the table apply to screens wider than 600 pixels.

notice_banner_type Where the consent banner sits Covers the page Keeps the keyboard focus inside
headline (default) A full-width bar at the top of the page, in the page flow, which pushes the content down No No
simple A fixed box at the bottom right, at most 50% of the screen width Part of it No
interstitial A box over a dark overlay that dims the whole page, set 3% of the screen in from the top and sides, which scrolls inside only when its text runs longer than the screen Yes Yes
standalone A fixed panel that fills the whole screen Yes Yes

No layout has a close button, and the Escape key does nothing on the consent banner. Every layout stays on screen until the visitor clicks the "I agree" or "OK" button, clicks the "I decline" button, or saves in the Preferences Center.

The screenshots show each layout on a sample page with the light palette.

The headline layout of the consent banner as a gray full-width bar above the site header, with the “I agree”, “I decline”, and “Change my preferences” buttons

The simple layout of the consent banner as a gray box over the bottom right of the page, with the page content visible around it

The interstitial layout of the consent banner as a gray box over a dark overlay that dims the whole page

The standalone layout of the consent banner as a gray panel that fills the whole screen and hides the page

How the headline consent banner pushes your page content down

The headline layout is a bar inside the page, inserted as the first element of <body>, so it pushes everything below it down while it shows. The content moves up again once the visitor answers and the consent banner hides. Visitors see the bar at the top of every page until they answer, and it scrolls away with the page.

The notice_banner_append option places the consent banner first in <body> with the default "afterbegin", or last with "beforeend". Set it to beforeend, and the headline bar shows after your site footer, where visitors find it only by scrolling to the bottom.

<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "headline",
  "notice_banner_append": "beforeend",
  "language": "en"
});
});
</script>

The other layouts stay fixed on screen with either value. Decide whether to move the consent banner with How to move the consent banner to the end of the page.

How the interstitial and standalone layouts block the page

The interstitial and standalone layouts cover the page and act as modal dialogs, which keep the keyboard focus inside the consent banner while the Preferences Center is closed. The focus moves to the first link or button of the consent banner. The interstitial and standalone layouts carry aria-modal="true" for assistive technology. The headline and simple layouts are dialogs too, but they leave the rest of the page reachable.

In express consent with notice_banner_reject_button_hide off, a layout that covers the page shows the "I decline" button next to the "I agree" button. The visitor refuses with 1 click and continues to your content. A layout that blocks the page and does not offer a way to refuse is a cookie wall. Implied consent and notice_banner_reject_button_hide both remove the "I decline" button, so a covering layout with either one leaves the visitor no 1-click refusal. Check how to keep a 1-click refusal on a covering layout in Reject All Button and Cookie Walls.

On a screen 320 pixels wide or less, or 480 pixels high or less, every layout becomes a fixed panel 200 pixels high at the bottom right. The panel has its own scroll bar. These sizes match small phones and phones held sideways. The interstitial overlay still dims the page behind the panel.

The simple box grows from 50% to 80% of the screen width on screens 600 pixels wide or less. On screens 480 pixels wide or less, the buttons of every layout take the full width of the consent banner, one above the other.

Turn on notice_banner_insert_legal_urls to add links to your Privacy Policy and your Impressum after the consent banner text. An Impressum is the legal notice page that German law requires on most business websites. The links open in a new tab, separated by a vertical bar, and either link shows alone when only one address is set. Put the addresses in website_privacy_policy_url and website_impressum_url.

<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "simple",
  "language": "en",
  "notice_banner_insert_legal_urls": true,
  "website_privacy_policy_url": "https://www.example.com/privacy-policy",
  "website_impressum_url": "https://www.example.com/impressum"
});
});
</script>

Both addresses must be absolute http: or https: URLs. Cookie Consent rejects a relative address such as /privacy: the link does not show, and the console prints a warning when debug is on. The Privacy Policy link appears in the "More information" tab of the Preferences Center whenever website_privacy_policy_url holds a valid address, with or without notice_banner_insert_legal_urls.

The simple consent banner with the Privacy Policy and Impressum links after its text, underlined and separated by a vertical bar

Check the layout, the small-screen panel, and the legal links in about 5 minutes.

  1. Deploy the new notice_banner_type, close every private window, open a new one, and load your site. The consent banner appears in the new layout.
  2. Open Chrome DevTools, select the Elements tab, find div#termsfeed-com---nb in <body>, and confirm its class list holds termsfeed-com---nb-<layout>, such as termsfeed-com---nb-simple.
  3. Turn on the device toolbar, set the width to 320 pixels, and confirm the consent banner becomes the 200-pixel panel at the bottom of the screen.
  4. Set website_privacy_policy_url or website_impressum_url to an absolute address, turn on notice_banner_insert_legal_urls, and deploy the change. Close every private window, then open your site in a new one, and click each legal link to confirm it opens the right page in a new tab.