Analytics

How to add a cookie consent banner

September 15, 2026
How to add a cookie consent banner

TeleportHQ has a built-in Cookie Consent element: a bar at the bottom of the page that reads "We use cookies to measure visits to this site.", with a link to your terms page and the Accept and Decline buttons. On your published site, Google Analytics and Google Tag Manager wait until the visitor clicks Accept. To add the banner, open Elements, find Cookie Consent in the Interactive group and click it, or drag it onto a page. It works on every project: adding it doesn't turn a website into a web app. If you need cookie categories, use a banner from a cookie consent tool instead.

Before you start

  • You need a role that can edit components.
  • The TeleportHQ banner makes Google Analytics and Google Tag Manager wait for Accept (Google's consent mode). It doesn't hold back other scripts, like ad pixels pasted into custom code. If those need to wait too, or your site needs cookie categories, use a consent tool (see the last section).
  • This article explains how the banner works, not which banner the law requires for your site. Ask a legal advisor.
  1. Open the page where the banner should appear.
  2. In the left sidebar, click Elements. The Primitives tab opens.
  3. Scroll to the Interactive group, or type Cookie in the search box.
The Interactive group of the TeleportHQ Elements panel, with the Cookie Consent card highlighted
  1. Click Cookie Consent, or drag it onto the page. The banner is added at the bottom of the page and selected.
A TeleportHQ page in the editor with the new Cookie Consent banner at the bottom, showing its message, the terms and conditions link and the Accept button
  1. Repeat for every page where visitors can land. Add the banner once per page.
  2. Publish your site. See How to publish your site.

TeleportHQ also links the banner to a legal page, and the link shows that page's name, for example Terms & Conditions. It uses an existing page named Terms & Conditions, Terms and Conditions, Privacy Policy, Terms of Service, Legal or Privacy. If there's none, it creates a Terms & Conditions page with your navigation, footer and template legal text. Review and edit that text before you publish.

What visitors see

On your published TeleportHQ site, the banner reads "We use cookies to measure visits to this site.", followed by a link named after your legal page, and the Accept and Decline buttons. The banner shows until the visitor clicks one of them.

When a visitor clicks Accept:

  • the banner hides and stays hidden on their next visits,
  • their choice is saved in the browser's local storage (not in a cookie),
  • TeleportHQ visitor analytics starts recognizing them as a returning visitor,
  • Google Analytics and Google Tag Manager, if your site uses them, switch on at once, on the same page.

When a visitor clicks Decline:

  • the banner hides and stays hidden on their next visits, and their refusal is saved in the browser's local storage,
  • TeleportHQ visitor analytics still counts their visits anonymously, without a saved ID, like a visitor who doesn't answer,
  • Google Analytics and Google Tag Manager stay in consent mode and set no cookies.

See Does TeleportHQ analytics use cookies?.

On a site with several languages, the other languages show the banner's message in your main language until it's translated, for example with Translate everything missing in Manage Content. See How to review and edit translations.

Banners you added before the Decline button

A TeleportHQ Cookie Consent banner added before the Decline button existed is updated the first time you open the project in the editor:

  • If its message is still the earlier default, for example "By continuing to visit this site you agree to our terms and conditions", it becomes "We use cookies to measure visits to this site.", and its link takes your legal page's name. A message you wrote yourself stays.
  • It gets a Decline button next to Accept, unless you changed the banner's workflows.
  • On a site with several languages, the other languages get the new message in your main language, still to translate. In Manage Content it's marked Still in your main language, for example Still in English, and listed under Untranslated only.

The update is one step you can undo. Publish your site so your visitors get the updated banner.

Edit the banner in the editor

The TeleportHQ Cookie Consent banner only shows to visitors who haven't answered yet, so on the canvas it's hidden by default, out of your design's way. It shows right after you add it. The next time you open the project, it's hidden again. To show it:

  1. At the bottom of the canvas, click the pill that counts hidden elements, for example 1 hidden element. The Hidden Elements list opens.
  2. Next to Cookie Consent, click Show. To hide it again, click Hide.
The Hidden Elements list at the bottom of the TeleportHQ canvas, with Cookie Consent highlighted next to its Show button

You can also click See all conditionally rendered nodes next to the pill, to show every hidden element at once. Then select the banner's text, its Accept button or its Decline button and change them like any other element. See How to show or hide elements based on a condition.

Check that it worked

Open your published site in a private browser window. The banner shows at the bottom. Click Accept or Decline, then reload the page. The banner doesn't come back. To see it again, open the site in a new private window.

Troubleshooting

"Cookie consent can only be placed at the root level. It has been added to the root of the page/component." You dropped the banner inside another element. TeleportHQ moved it to the page level, where it belongs. Nothing else to do.

"Your current role does not have permission to edit components" Ask a workspace owner or admin for a role that can edit.

I can't see the banner in the editor anymore It's hidden on the canvas until you show it. Click the hidden elements pill at the bottom of the canvas, then Show next to Cookie Consent. It always shows on the published site to visitors who haven't answered.

"Could not save your cookie preferences. Please try again." A visitor sees this when their click on Accept or Decline couldn't be saved, for example because their browser blocks site storage. The banner stays visible for that visitor. Ask them to try again or allow site data for your site.

Where TeleportHQ adds the banner automatically

When AI builds a TeleportHQ web app, the banner is added for you to its AI-generated pages, sign-in pages, store pages and Terms & Conditions page. It's never added by itself to a website, to admin panel pages or to blank pages you create. Add it to those pages by hand if they're public.

Use a third-party consent tool when you need cookie categories, or when ad pixels and other code you paste into custom code must wait until visitors agree.

  1. Create a banner in your consent tool and copy its install code.
  2. In the editor, click the Project settings cog at the bottom of the left sidebar.
  3. Under Data & code, click Custom code.
  4. Click Body, or Head if the tool asks for the head, and paste the code. It saves itself: there's no Save button.
The TeleportHQ Custom code settings with the Body tab selected above the code box
  1. Publish your site.

TeleportHQ visitor analytics only counts returning visitors if the tool also saves cookieConsent with the value accepted in the browser's local storage when a visitor accepts. Most tools don't do this on their own. The Google consent mode that TeleportHQ adds only comes with the TeleportHQ banner: with another tool, set up Google's consent in that tool or in Google Tag Manager. See How to add code to every page (head and body).

Good to know

  • Google waits on every page. With the TeleportHQ banner on your site, Google Analytics and Google Tag Manager wait for Accept on all its pages. A visitor who lands on a page without the banner can't accept there, so add it to every page visitors can land on.
  • Code downloads. The banner works on your published site and in the Next.js code download. The other code downloads, such as HTML, leave it without its behaviour, so its buttons don't hide it. The download window tells you so when you pick one of them.
Share

Related Articles

Does TeleportHQ analytics use cookies?

No. TeleportHQ's built-in visitor analytics never sets cookies and, apart from recent order numbers on store sites, stores nothing in visitors' browsers unless they accept your cookie banner; it records anonymous page views and clicks, doesn't keep IP addresses with visit records, and deletes detailed visit records after 90 days.

How to see who visits your site (Analytics)

In TeleportHQ, click Growth in the left sidebar, then Analytics, to see your published site's visitors, page views, traffic sources, countries, devices, most-viewed pages, clicks and returning visitors, for the last 24 hours, the last 7, 30 or 90 days or a custom range.

How to add Google Analytics or Google Tag Manager

To add Google Analytics 4 to a TeleportHQ site, open the project's Project Settings page from its card on the dashboard, click Custom Code, paste your measurement ID (starting with G-) into Analytics or your container ID (starting with GTM-) into Tag Manager, click Save Changes and publish.

How to add code to every page (head and body)

In the TeleportHQ editor, click the Project settings cog at the bottom of the left sidebar, open Data & code → Custom code, choose Head or Body and paste your script, style, meta or link tags; the code saves itself and runs on every page of your published site, but not on the editor canvas.

How to add interactive elements (calendars, kanban, countdowns and more)

In TeleportHQ, you add interactive elements such as calendars, kanban boards, countdowns, tabs, QR codes and drag-and-drop lists from Elements → Primitives and set them up in the right panel; they run in the visitor's browser, so they work in websites too, and only Autocomplete, Site Search, Newsletter Signup and Upload Asset ask to make the project a web app.

How to show or hide elements based on a condition

In TeleportHQ, you show an element only when a condition is true, such as "stock equals 0" or "the menu is open", by selecting it, turning on the Conditional Rendering switch near the top of the right panel and building the condition from a value, an operator and a comparison value; it works in every project, website or web app.