Understand how the snippet activates and applies variations.
The snippet works with your optimizations to apply eligible variations and record goal events. It’s a script you add to your webpages that loads core logic and your configuration from Webflow Optimize.
API readiness
The snippet defines intellimize.ready(), which lets you register callbacks that are triggered once the APIs are available. Always wrap API calls like activate() in a ready() block to avoid errors. Learn more about intellimize.ready().
Activation
The snippet must activate to download code from Webflow Optimize and begin the process outlined in this doc.
- Traditional websites — the snippet activates automatically when the page loads
-
Single-page apps (SPAs) — add an
activate()call in your SPA code after each state transition. Learn more aboutactivate().
Selecting and applying variations
Good to know
One variation per optimization can be applied for each webpage viewed.
(Flowchart showing the tasks that the snippet runs in sequential order)
1. Global code
Global code is the global JS and/or CSS that you can add in your Optimize account settings. This code runs on every page where the snippet runs, before other Optimize logic runs and before the DOM is ready.
2. Page eligibility
Optimize checks if the page is eligible for one of your live optimizations. All of these criteria must be true:
- The page URL matches the optimization's page definition
- All audience code conditions execute and return true
- Optimization inclusion is evaluated. For example:
- Optimize checks if elements defined by preconditions/selectors are present in the DOM
- Visitor eligibility must return true
If these conditions aren’t met, no variation is applied.
3. Campaign code
Campaign code is a legacy feature that's no longer possible to apply. The snippet still checks for this code, however, in case you have an older variation that relies on this code. If legacy campaign JavaScript or CSS is present for an eligible optimization, it's injected into the page — once per campaign.
4. Holdout group selection
For AI Optimize specifically, visitors are now randomly assigned to the optimization group or the holdout group.
- Optimization group assignment — the visitor continues to the next step in the process
- Holdout group assignment — the visitor sees the base page in perpetuity and skips all following steps
Note
The holdout group assignment is browser-specific and resets if the cache is cleared.
5. Variation eligibility
Optimize checks which live variations are eligible to run. All audience code conditions must execute and return true.
6. Variation selection
Once the eligible optimizations and variations are identified, the variation selection logic depends on the optimization type.
- Test — section is based on traffic allocation configuration
- Personalize — first matching rule determines selection
- AI Optimize — best variation selected dynamically
7. Variation execution
Optimization-level conditions
If the optimization contains at least one code-based variation, the optimization will have conditions (i.e., preconditions, dependencies, or selectors) defined by the coded variation that must be met in order for any variation to run — including visual editor variations. Optimize checks if required DOM elements are present and all conditions are met.
- If any conditions fail, no variation runs
- If all conditions pass, Optimize attempts to run variations
Visual editor variation execution
Optimize applies each visual change in sequence, asynchronously. The page is continuously monitored for changes, like visual editor selectors being present, so that variations can be applied ASAP. A MutationObserver is used to reapply changes if needed (e.g., on DOM re-render — like in React). If a variation fails to run, no other variations are selected in its place.
Code-based variation execution
Optimize verifies that all variation-level conditions are met, then applies variation code in this order:
- CSS is injected into the page’s
<head> - JavaScript executes in the order that their preconditions pass and their selectors are present on the page
8. Viewability
Optimize waits for the browser tab to be in focus for at least one continuous second before continuing.
9. Variation persistence
Once a variation is successfully applied, the visitor continues to see that variation for 3.5 days by default. This gives returning visitors a consistent experience. After that time period, a new decision can be made.
Note
Variation stickiness is browser-specific and resets if the cache is cleared.
10. Record variation
Once applied, the variation is recorded by Optimize and sent to any connected analytics platforms (e.g., GA4).
11. API callbacks
If you're using onVariationRecorded() to track variation data with in-house tools, this callback fires each time a variation is recorded — not just once per page. Learn about this API.
Good to know
onVariationRecorded() replaces getSelectedVariationIds() and getSelectedVariationNames(). These legacy API callbacks won't include variations that take longer than 3 seconds to be recorded.
Recording goal events
After the snippet activates, Optimize records goal events when visitors complete desired actions and sends the data to Optimize and any integrated analytics tools.
Event eligibility
When the snippet activates, Optimize checks whether the page URL matches any goal event page definition.
View events
For a view event to be recorded, any event code present must execute and return true. Events are sent as soon as the page loads — often before the DOM is ready.
Click events
For a click event to be recorded, Optimize watches for clicks on specified DOM selectors. If the click event has event code, it must execute and return true after the click. Click events are sent after the click and optional code runs, typically after the DOM is ready.
Record goal event
Goal event data is sent asynchronously to Optimize and any integrated analytics tools (e.g., GA4).