Site-wide custom code

This is where code goes when it has to be on every page: a stylesheet tweak, a chat widget, a tracking pixel, a verification tag. You write it once and ClickWhale puts it on every page of the website.

The four pages load at different moments. They hold the same fields, but General loads for everyone, always. The other three wait until the visitor has agreed to that kind of cookie. Picking the right page is how a pasted snippet stops being a privacy problem. There is nothing else to switch on.

Which page do I put it on?

When in doubt, ask what the snippet does to the visitor's browser. If it stores anything or contacts anyone, it does not go on General.

For the best-known services, don't paste anything at all. Google Analytics, Google tag, Tag Manager, Meta Pixel, Microsoft Clarity, Plausible and search-engine verification all have a field of their own where you paste just the ID, and ClickWhale handles the script and the category for you. See Measuring your visitors. Only use this screen for services that aren't on that list.

The fields

General has four fields. The other three pages have the same fields minus the CSS.

Fill in what you need and click Save. Each page saves on its own, so switching pages before saving loses what you typed.

Custom CSS is only on the General page: a stylesheet rule loads nothing and stores nothing, so there is no category for it to wait on.

When it goes live

This screen is one of the few places in ClickWhale where saving is sometimes enough:

• HTML and JavaScript take effect within a minute of saving. The live site reads them from your website's settings and holds them for up to a minute, so it picks them up without a publish.
• CSS needs a publish. It's baked into your website's stylesheet, and that file is only rebuilt when you publish (or preview).

Custom CSS also doesn't show inside the builder. The editor canvas draws your page from your design settings, not from your stylesheet, so use Preview to see the effect. See Saving, previewing and publishing.

Making your CSS take effect

Your CSS is added after everything ClickWhale generates, which sounds like it should always win. It usually doesn't, because ClickWhale styles each element by its own unique id, and an id beats a class no matter which comes last.

So a rule like .my-class { color: red; } will be ignored on any element whose colour you also set in Display settings. Three ways out, best first:

1. Change it in the builder instead. If the design can be expressed in Display settings or a display set, do it there. See Display sets.
2. Be more specific. body .my-class { … }, or target a page: .page-12 .my-class { … }. Every page's <body> carries a page-<number> class.
3. !important. It works, and it's a promise that nobody will be able to override it in the builder later either.

Use /* … */ comments, never //. When your CSS is published it's flattened onto a single line, so a // comment would comment out everything after it. (// isn't valid CSS anyway.)

Adding a "cookie settings" link

Put data-cw-open-consent on any link or button and clicking it reopens the cookie dialog:

<a href="#" data-cw-open-consent>Cookie settings</a>

Add one to your footer. ClickWhale already puts a small cookie button in the corner of the page, but a footer link is what most visitors look for, and being able to change your mind easily is part of what the cookie rules ask for.

To make a script of your own wait for consent, see Checking cookie consent from your own code.

Common issues