Install the Optimize JavaScript snippet

Learn how to copy and add the Optimize snippet to your site pages.

The JavaScript snippet activates Optimize on your site pages. The snippet must be added to every site page where you want Optimize to run (i.e., run variations and/or track visitor engagement). Optimize will be disabled for any page where the snippet is not added properly or if the page's domain/subdomain is not on your allowed domains list. 

Special handling for some websites

• Shopify — integrate with Shopify to automatically install the snippet on your site
• Single-page app (SPA) — add the snippet to your site and implement activate() in your SPA code
• CloudFlare Rocket Loader — use these instructions to modify the snippet
• Content Security Policy (CSP) — if your site uses a CSP, you'll need to update the CSP to work with Optimize

Installing the snippet

The snippet includes a unique ID for every website. Make sure to use the snippet from your Optimize account settings.

Copy the snippet from site settings

Open your Optimize site in Webflow, then:

1. Click Account Settings in the Navigation panel
2. Go to Javascript snippet
3. Click Copy Snippet to copy the code to your computer's clipboard

Add the snippet to your website

For the best results, add the snippet to every page on your site. This future-proofs your site for launching optimizations anywhere and ensures the most comprehensive site analytics. To do this at scale, add the snippet to a base page template.

At a minimum, you must add the snippet to any page where optimizations will run and any page where conversions occur.

Avoid These Common Pitfalls

To ensure Optimize works properly:

• Do NOT remove any white spaces from the snippet — the intentional spacing is required
• Do NOT use a tag manager (e.g., Google Tag Manager) to inject the snippet
• Do NOT wrap the snippet with a CDN
• Do NOT bundle the snippet into a Single Page Application (SPA)
• Do NOT implement lazy loading or defer the snippet’s loading
• Do NOT apply custom caching methods — caching is already handled internally

About modifying the snippet code

In most cases, you should not modify the Optimize snippet. Doing so can prevent it from functioning correctly. If you’re a developer considering changes, please review the following key points.

Do not change the class name

The snippet uses a specific class, .anti-flicker, to temporarily hide the page and prevent flicker. This class name is hardcoded in the client-side JavaScript and must not be modified.

Changing this class name will result in the page remaining hidden until the timeout expires — creating a poor user experience.

Sitewide performance considerations

The snippet is optimized to handle multiple responsibilities efficiently without significantly impacting page speed.

For pages running variations:

Do not modify the snippet or implement it through a tag manager. Doing so may lead to:

• Unforeseen issues
• Potential race conditions — you must ensure the CDN script loads after these functions are defined
• Loss of core functionality — the snippet defines critical push() and ready() functions required by Optimize APIs. Removing or altering these will cause silent data loss.

For pages not running variations:

• It’s still best to use the snippet as documented
• However, to improve perceived performance on these pages, you may change the anti-flicker timeout value to 0

How to change the anti-flicker timeout

The snippet includes a default timeout of 4000 milliseconds as a failsafe. This value sets the maximum duration the page may be hidden to prevent flicker. In most cases, the page is revealed much sooner — typically once:

• The snippet successfully loads from the CDN
• Or if the snippet fails to load (via the onerror handler)

You can fine-tune how long the page remains hidden before fallback logic kicks in.

Customizing the timeout value:

If your developers want to adjust the timeout duration, they can simply replace the value in the code.

Look for this portion in the snippet:

(window, 4000, 'anti-flicker')

Examples of a custom timeout value:

To increase the timeout to 5000ms, the updated line would be:

(window, 5000, 'anti-flicker')

To decrease the timeout to 0ms, the updated line would be:

(window, 0, 'anti-flicker')

Cloudflare Rocket Loader snippet

Rocket Loader optimizes page speed by prioritizing the loading of your base page while delaying other scripts. However, this can cause the Optimize snippet to run too late, leading to visible flicker as variations are applied after the page renders.

If your site uses Rocket Loader, you can prevent this issue by customizing the Optimize snippet with an attribute that Rocket Loader provides. The following attribute tells Rocket Loader not to deprioritize whichever script you add it to.

data-cfasync="false"

Customize the snippet for your website:

1. Copy the snippet from your site settings
2. Edit the snippet code to add the data-cfasync="false" attribute within both <script> tags

For example:

<script data-cfasync="false">
// existing Optimize snippet code goes here
</script>