Optimizely

Optimizely is a third-party experimentation vendor, and it is a separate product from Webflow Optimize, the testing and personalization add-on we build into Webflow. Optimize runs A/B/n tests and rules-based personalization from the Insights panel in Webflow. Optimizely runs on your published site through a JavaScript snippet you add as custom code, and you build its experiments in Optimizely's own app.

The one-line snippet pasted into Head code starts Optimizely Web Experimentation and Personalization on every published page. You change headlines, buttons, and images in Optimizely's Visual Editor without touching the Webflow design. URL targeting with substring or regex matching covers collection pages that share a template. Audiences built on browser, location, cookie, or query parameter conditions decide who sees each variation.

Growth marketers use the setup to test landing-page variants by traffic source and headline. CRO specialists use it for multivariate tests, segment targeting, and conversion tracking. Developers extend it with custom events, the REST API, and webhook middleware that writes experiment data into the Webflow CMS.

How to integrate Optimizely with Webflow

What is Optimizely? Optimizely sells content management, experimentation, personalization, and customer data products, and its Opti ID service manages user sign-in across them. Its Web Experimentation and Personalization products run through a single JavaScript snippet, while Feature Experimentation uses SDKs inside your own application code.

Teams add Optimizely to a Webflow site when the site is the main conversion surface and the test program needs more than single-page A/B tests. For a SaaS marketing team, landing-page tests cover hero messaging and signup forms. Ecommerce teams test cart layouts and checkout progress indicators, while content teams use personalization campaigns to change editorial modules by category affinity.

The one-line snippet in custom code runs Web Experimentation and Personalization on every published page without writing code. Zapier, Make, or n8n connect Webflow form and order events to Optimizely Campaign, the email product. The Webflow Data API and Optimizely APIs cover custom events, experiment creation, and CMS sync, and they require server-side development. Most implementations combine two or more of these methods depending on the complexity of the setup.

Add the Optimizely snippet with custom code

The snippet route is the one our Optimizely tutorial documents, and it needs no code beyond a paste. Copy the one-line snippet from Optimizely, paste it into Head code, and publish. After that, Optimizely's Visual Editor, URL targeting, audiences, and results all work on the published site. You need a paid Site plan or a Core, Growth, Agency, or Freelancer Workspace plan to add custom code. The tutorial linked from this page covers the same steps.

Install the snippet site-wide in Head code

Site-wide Head code applies the snippet to every page on the site, including collection pages. Optimizely's snippet article says to place it as high as possible in the <head>, before analytics or tag-manager code, and to leave it unmodified. Webflow places Head code before the closing </head> tag, so pasting the snippet at the top of that field puts it ahead of any analytics scripts you add there.

To install the snippet site-wide:

1. In Optimizely, go to Settings > Implementation and click Copy to Clipboard.
2. In Webflow, open Site settings > Custom code.
3. Paste the snippet at the top of Head code, above any analytics or tag-manager scripts.
4. Click Save changes, then publish the site.
5. Open the published page and type optimizely in the browser console. If it returns "optimizely is undefined", the snippet is not loading.

Once the snippet loads, you configure these in the Optimizely interface without further code:

• Visual Editor: You change text, buttons, backgrounds, and images on the page.
• URL targeting: You choose Simple, Exact, Substring, or Regular expression match types.
• Audiences: You target visitors by browser, location, cookie, query parameter, or ad campaign conditions.
• Events: You use clicks and pageviews as experiment metrics.
• Personalization: Campaigns show the original page to a 5% holdback by default.

Keep the snippet synchronous. Optimizely's loading guidance says asynchronous loading can cause flicker, where the original page shows before the variation, so skip async and defer even though Webflow's custom code article suggests them for head scripts in general. The cost is load time: the browser waits for a synchronous head script before it shows the page, which is why Optimizely's performance guidance recommends preconnect and preload hints for cdn.optimizely.com. Run only one snippet per site. Optimizely says separate domains and subdomains, such as the yoursite.webflow.io staging subdomain and your custom domain, likely need separate projects, and events only target changes on the same origin by default. The custom code article also warns that scripts affecting DOM events such as onClick or onHover can behave unexpectedly, so test variations on interactive elements on the published site.

Add the snippet to a single page

Page-level head code limits the snippet to one page, which suits an isolated landing-page or checkout test. Page code appears after site-wide code in the HTML, so remove the site-wide snippet first if you take this route, because Optimizely says never to run more than one snippet on a site at a time.

To add the snippet to one page:

1. In Webflow, open the Pages panel, hover over the page, and click the Page settings icon.
2. Scroll to Custom code and paste the snippet into Inside <head> tag.
3. Save, then publish the site.

A Code Embed element can also hold the script, but it sits in the body, so content above it can render before the snippet runs. Optimizely calls that page flashing: the original page shows before the variation replaces it. Page-level head code is the better page-scoped option.

Connect Webflow forms to Optimizely Campaign with Zapier, Make, or n8n

The connectors in this section work with Optimizely Campaign, the email marketing product, rather than Web Experimentation or Personalization. Zapier publishes a pairing page with Webflow triggers and Campaign actions. Make lists a verified Optimizely Campaign app from Optimizely GmbH alongside its Webflow modules. n8n has a partner-maintained Optimizely Campaign node and a Webflow Trigger node. You assemble each workflow from triggers and actions like these:

• Form to recipient: Zapier's Webflow New Form Submission trigger feeds the Campaign Create a Recipient action.
• Order to message: Zapier's Webflow New Order trigger feeds the Campaign Send Transactional Message action.
• Bounces back to the CMS: Zapier's Campaign New Unsubscribe or New Bounce trigger feeds the Webflow Update Item action.
• Form sync in Make: Make's Webflow List Form Submissions module feeds the Campaign Create a Recipient module.

These connectors move contact and message data only, so experiments themselves still run through the snippet.

Build with the Webflow and Optimizely APIs

The API path covers what the snippet cannot do on its own. That includes server-side conversions, experiments created from Webflow page data, form submissions written into Optimizely Data Platform, and experiment metadata synced into the Webflow CMS. Neither company publishes a joint integration API, so each workflow below combines documented endpoints from both sides in your own middleware. Expect server-side development, token handling, and webhook signature verification.

These APIs are available:

• Web Experimentation: The REST API handles projects, pages, experiments, events, audiences, and results at https://api.optimizely.com/v2.
• Event API: The Event API accepts server-side and offline conversions at https://logx.optimizely.com/v1/events and "does not require an authorization token".
• Optimizely Data Platform: The ODP REST API stores events and customer profiles, authenticated with an x-api-key header.
• Optimizely webhooks: Web Experimentation sends an HTTP callback when a project changes and a new snippet is available.
• Webflow Data API: Webflow's Data API handles CMS collections and form submissions.
• Webflow webhooks: Webflow webhooks send real-time events to your endpoint.

Optimizely authentication uses a personal token from Profile > API Access > Generate New Token, or OAuth 2.0 with the all scope. Webflow uses a bearer token; site tokens authenticate one site, while OAuth apps serve multi-site integrations and are the only clients allowed on the custom code endpoints.

Track Webflow form submissions as custom events

A Webflow form shows a success message on the same page unless you set a redirect, so there is no thank-you page for a pageview event to count. Optimizely's custom events record the submission from the page instead. Optimizely lists form submissions, including AJAX submissions that do not generate a new URL, as a use case, and the snippet must be on the page where the event fires.

To track a form submission:

1. In Optimizely, create a custom event and note its API name, which becomes eventName.
2. In Webflow, add a script to the page's Before </body> tag that calls window['optimizely'].push({ type: "event", eventName: "eventName" }) when the submission succeeds, with eventName replaced by the API name.
3. Add the event as a metric on the experiment, then confirm it fires on the published page before you click Start Experiment.

Custom events accept up to 15 event properties each, so you can attach the form name or a CMS field value. To read CMS fields inside the script, place a Code Embed inside a Collection List or on a Collection page, where dynamic data is supported. Target stable attributes such as id or data-test-target in variations rather than styling classes, because renaming a Webflow class breaks any selector that used it.

Send form submissions to Optimizely Data Platform with webhooks

A Webflow form_submission webhook posts each submission to your endpoint, and your endpoint forwards it to ODP as an event and a profile update. The base ODP JavaScript tag tracks page views only, so form data needs this server-side route or the ODP Web SDK.

To forward submissions to ODP:

1. Obtain a Webflow OAuth token with sites:write and forms:read, then call POST https://api.webflow.com/v2/sites/{site_id}/webhooks with triggerType: form_submission, your url, and an optional filter.name to watch one form.
2. In your receiver, verify x-webflow-signature by computing a SHA-256 HMAC over timestamp + ":" + JSON.stringify(body) with your OAuth app's client secret as the key. Treat requests whose x-webflow-timestamp is older than 5 minutes as possible replays.
3. Map payload.data and submittedAt into an ODP event, then POST https://api.us1.odp.optimizely.com/v3/events and POST .../v3/profiles with your x-api-key. EU accounts use api.eu1.odp.optimizely.com and APAC accounts use api.au1.odp.optimizely.com.

ODP returns 202 Accepted for event uploads. Webhooks created with a site token after April 14, 2025 each have their own secret, so store one secret per webhook. The browser-side alternative is zaius.event('web_form', { action: 'submission', form_name: ..., campaign: ... }) through the ODP Web SDK, which needs no middleware.

Create experiments that target Webflow URLs

The REST API lets you create Optimizely pages and experiments from Webflow page data, so a new landing page gets a test scaffolded as soon as it exists. Webflow's page_created webhook and the Pages endpoint both return publishedPath, which becomes the URL condition in Optimizely.

To scaffold an experiment from a Webflow page:

1. Call GET https://api.webflow.com/v2/sites/{site_id}/pages with the pages:read scope, or subscribe to the page_created webhook, to read slug and publishedPath.
2. Call GET https://api.optimizely.com/v2/projects to find the project_id, then POST /v2/pages with name, project_id, edit_url, and a conditions string holding conditions in the form {"type": "url", "match_type": <match_type>, "value": <value>}.
3. Call POST /v2/experiments against that page, then PATCH /v2/experiments/{experiment_id}?action=publish followed by ?action=start.

Use regex or substring match types for collection pages; Optimizely's page activation docs recommend regex for parameterized routes. Results come back from GET /v2/experiments/{experiment_id}/results, and GET /v2/experiments/{experiment_id}/timeseries returns them over time. The CSV export lives at /v2/export/experiments/{experiment_id}/results/csv.

Sync experiment data into the Webflow CMS with webhooks

Optimizely webhooks plus the Webflow CMS API can feed an experiment library or results dashboard inside the Webflow CMS. A Web Experimentation webhook fires when a project changes and a new snippet is available, so your receiver reads current experiment details from the REST API. Feature Experimentation webhooks are more granular, with create, update, archive, and delete events for flags, audiences, variations, and other objects.

To push Optimizely changes into a collection:

1. In Optimizely, go to Settings > Webhooks > Create New Webhook, or call POST /projects/{project_id}/webhooks with description, events, name, and url.
2. In your receiver, read the payload and fetch any extra detail from the REST API. Feature Experimentation documents the project.datafile_updated payload as project_id, timestamp, event, data.revision, data.origin_url, data.cdn_url, and data.environment.
3. Write the item with POST https://api.webflow.com/v2/collections/{collection_id}/items, where fieldData needs name and slug, then call POST .../items/publish. Use PATCH for an existing item.

Verify Feature Experimentation deliveries with the X-Hub-Signature header, a sha1= SHA1 HMAC of the payload using a secret you can view only once. POST .../items/live creates and publishes an item in one call when you want to skip the staged step.

What you can build with the Optimizely Webflow integration

Integrating Optimizely with Webflow lets you run multivariate tests, segment-targeted experiments, and personalization campaigns on published pages without rebuilding the site elsewhere or waiting on a developer for each variation.

• Traffic-source landing page tests: A SaaS team targets a paid-campaign landing page with a query parameter audience and tests two hero headlines and a shorter signup form in the Visual Editor. Each variant ships without a Webflow publish.
• Collection page template experiments: A substring match on /post/ applies one experiment to every blog post generated from a collection template, so a sidebar CTA test runs across the whole archive at once.
• Checkout flow experiments on Ecommerce sites: A page-level snippet on the cart page tests layout and a progress indicator. Added scripts on Ecommerce sites are the site owner's PCI responsibility, and Optimizely's PCI Mode swaps cdn.optimizely.com for cdn-pci.optimizely.com.
• Experiment library in the CMS: An Optimizely webhook triggers a sync that writes each experiment's name and status from the REST API into a collection, and a Collection page renders an internal dashboard per experiment.

The API integration path gives you control over conversion tracking, the experiment lifecycle, and ODP profiles built from form data.

For the behavior analytics side of conversion work, read our guide to Hotjar ecommerce optimization.