How to add a cookie consent banner to a Carrd site

Where to paste the snippet in Carrd

Carrd adds custom code through the Embed element, which is available on the Pro Standard plan and above.

1. In the builder, click Add Element and select Embed.
2. Set Type to Code and paste the snippet in the Code field. A Label such as "Cookiequiet" helps you find it later.
3. Set Style to Hidden and Location to Head, then click Done.
4. Publish. Carrd documents that a hidden embed produces no output in the builder; you only see the result on the published site.

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>

Hidden embeds placed in the Head are published in the page's head section regardless of where the element sits in the layout, so you can keep the element wherever is convenient. When you have several head embeds, keep the Cookiequiet one first in the element list and check the published page source once: cq.js must come before your tags.

How to handle the tags you add

Carrd itself sets no analytics cookies on your site; everything that needs consent comes from embeds you add. Two ways to wire them, both in a second hidden Head embed placed after the Cookiequiet one:

Marked (nothing loads before consent). Change the opening tag of each script:

html
<script type="text/plain" data-cq-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-cq-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

The Meta Pixel base code gets data-cq-category="marketing", and its noscript image must be removed; details in the Meta Pixel guide.

Consent Mode (the Google tag loads with denied defaults). Put Google's default consent block above the Google tag in the same embed, as in the Google Analytics 4 guide. Cookiequiet sends the update after each choice.

Videos and maps. Carrd's Video element prints a player iframe; for a video that must wait for consent, use an inline Embed with the iframe written with data-cq-src instead of src, and Cookiequiet loads it after consent. Forms connected to Mailchimp or similar services send data only when the visitor submits them and need no marking.

How to add the Cookie preferences link

Add an Embed element to your footer section with Type set to Code and Style set to Inline, containing:

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

An inline embed prints the HTML where the element sits, so the link appears in the footer; style it with a small inline style attribute to match your text. Alternatively, turn on the floating preferences button in the banner settings.

How to test

1. Publish, then open the published site in a private window and click Reject all.
2. Check the cookies in the developer tools: cq_consent and nothing else.
3. Clear the cookies, click Accept all, reload: the marked tags run and their cookies appear.
4. Check the consent log in the Cookiequiet dashboard.

What is specific to Carrd

• Plan. Embeds need Pro Standard or higher; the free plan and Pro Lite cannot add code. Advanced settings (Pro Plus) are not needed for a head embed.
• One-page sites. A Carrd site is one document; the banner loads once and the choice applies to every section.
• Custom domains and carrd.co addresses both work; the banner does not care about the host.
• Several embeds. Each hidden Head embed is printed separately; keep tags that depend on each other, such as the Google tag and its event snippets, in the same embed so their order is fixed.
• Republishing. Any change to an embed reaches visitors only after a new publish; reload the private window after publishing before you test again.
• Geo-targeting on every plan lets a landing page show the banner only to visitors in regulated countries; see do I need a cookie banner.