Introducing the Cookie Banner Builder: Design, Preview & Install in Minutes

Configuring a cookie banner by editing raw JavaScript and then refreshing your browser to check the result is tedious at best. You tweak a colour, save, reload, scroll to the corner, decide it is wrong, and repeat. We built the Zeraki Banner Builder to eliminate exactly that loop. Every change you make in the configurator is reflected instantly in a live preview — no save, no reload, no guessing.

The Banner Builder lives at /install and replaces what used to be a static code-copy page. It is a full-page visual configurator: you fill in the fields on the left, watch the banner update on the right, then click Install to get a ready-to-paste script. Here is a walk-through of every section.

The Configuration Panel

The left side of the builder is divided into clearly labelled sections. You do not need to touch them all — only the ones that matter for your site. The rest have sensible defaults that work out of the box.

Brand & Appearance

The first section covers the visual identity of your banner. Set your company name (it appears in the banner headline and the preferences modal), pick a primary colour using the colour picker or type a hex value directly, and choose a banner position. Positions include bottom-bar, top-bar, bottom-left, bottom-right, and center. The preview updates in real time as you cycle through them.

Floating Cookie Button Position

After a visitor gives or declines consent, a small floating cookie icon stays on screen so they can always revisit their preferences. The builder includes a dedicated position picker for this button — a simple 3 × 3 grid showing the four corners and centre options. Click a cell and the preview moves the floating button to that position immediately. This is the kind of detail that is impossible to judge without a real preview; now you can.

Banner Text

The default banner text is written to satisfy GDPR and CCPA wording requirements, but you can override both the heading and the body copy to match your brand voice. The changes appear in the preview iframe as you type, so you can proof-read the final copy before you ever touch your website.

Policy Links

Most privacy regulations require your cookie banner to link directly to your Privacy Policy and Cookie Policy. Paste both URLs into the policy link fields and they are wired into the generated script automatically:

privacyPolicyUrl: 'https://yoursite.com/privacy',
cookiePolicyUrl:  'https://yoursite.com/cookies',

Consent Expiry

You can control how long a visitor's consent decision is remembered before the banner re-appears. The default is 365 days, which is the standard for most deployments, but you can lower it to 180 days, 90 days, or 30 days if your policy or legal team requires more frequent re-consent. This maps directly to the consentExpiryDays option in the generated script.

The Live Preview

The right side of the builder is a live preview iframe rendering the actual Zeraki Cookie Consent library — not a mockup, not a screenshot, but the real thing running in a sandboxed frame. Every option you change in the panel is applied to that iframe within milliseconds. You see precisely what your visitors will see: the banner animation, the button colours, the text, the floating icon position, all of it.

Domain Preview — See It on Your Own Website

The live preview takes things one step further with the Domain Preview feature. Enter your website URL into the domain field and the preview iframe loads your actual site inside it, with the Zeraki banner overlaid on top. You are no longer previewing a blank white canvas — you are previewing your banner on your real homepage, with your real colours, images, and layout in the background.

This makes colour and position decisions dramatically easier. A dark primary colour that looks fine on white may clash with your hero image; a bottom-bar position that feels right in isolation might obscure your site's footer CTA. The domain preview surfaces these conflicts before you publish a single character of code.

Analytics Integration

The Banner Builder has dedicated sections for both Google Analytics 4 and Google Tag Manager. Filling in either field generates the full consent-aware initialisation snippet — you do not need to write it yourself.

Google Analytics 4

Paste your GA4 Measurement ID (the G-XXXXXXXXXX format) into the GA4 field. The builder generates a complete snippet that initialises gtag with Google Consent Mode v2, defaulting all consent signals to denied, and then updates them when the visitor makes a choice on the banner:

window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('consent', 'default', {
  analytics_storage:    'denied',
  ad_storage:           'denied',
  ad_user_data:         'denied',
  ad_personalization:   'denied',
  wait_for_update:      500,
});
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');

Zeraki then calls gtag('consent', 'update', ...) automatically when the visitor accepts or rejects categories, keeping your analytics data clean and your consent signals accurate.

Google Tag Manager

If you manage your scripts through GTM, enter your Container ID (GTM-XXXXXXX format) instead. The builder generates the standard GTM dataLayer push that fires consent defaults before any tags run, then wires Zeraki's consent callbacks into the same dataLayer so your GTM consent triggers fire correctly:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'consent_default',
  analytics_storage:  'denied',
  ad_storage:         'denied',
});

// GTM snippet injected here by the builder
// Zeraki updates dataLayer on consent change

You do not need both GA4 and GTM — fill in whichever one matches how your site is set up. If you use neither, simply leave both fields empty and the generated script will omit the analytics block entirely.

The Install Modal & Generated Script

Once you are happy with the preview, click the Get Install Code button. An overlay opens showing the complete, ready-to-paste script — every option you configured baked in, including your colours, policy URLs, analytics IDs, consent expiry, and button position. It looks like this:

<!-- Zeraki Cookie Consent -->
<script src="https://cdn.jsdelivr.net/npm/@zerakicreative/cookie-consent/dist/zeraki-cookie-consent.iife.js"></script>
<script>
  ZerakiCookieBanner.init({
    companyName:       'Acme Corp',
    primaryColor:      '#7C3AED',
    position:          'bottom-bar',
    floatingBtnPos:    'bottom-right',
    privacyPolicyUrl:  'https://acme.com/privacy',
    cookiePolicyUrl:   'https://acme.com/cookies',
    consentExpiryDays: 365,
    googleAnalytics:   'G-XXXXXXXXXX',
  });
</script>

The modal has a single Copy button. One click copies the entire snippet to your clipboard. Paste it before the closing </body> tag on every page of your site — or into your layout component if you are using Next.js, Nuxt, or a similar framework — and you are done.

It Is Completely Free

The Banner Builder, like everything else in the Zeraki Cookie Consent toolkit, is free with no account required. There are no page-view limits, no domain limits, no analytics features locked behind a paywall. The visual configurator, domain preview, GA4 and GTM integration, and the generated script are all available to anyone, right now, at /install.

The only thing you need is your brand colour and a couple of URLs. Everything else the builder either generates for you or leaves at a sensible default. Open it, spend three minutes configuring, paste the script, ship. That is the whole workflow.