Integration Guides
Platform-specific install guides for Shopify, WordPress, and more.
Integration Guides
Otter A/B runs on the same lightweight SDK, but setup looks a little different depending on how your site is deployed. Pick the guide that matches your platform and Otter A/B will tailor the installation steps after project creation.
Every Otter A/B install boils down to the same idea: paste one script tag into the head of your site. What changes between platforms is where you find “the head of your site.” Shopify hides it in a theme template. WordPress puts it behind a hook (or a plugin). Next.js exposes it via the root layout. Custom builds usually have an index.html or a layout file that ships to every page. We've written platform-specific guides for each so you don't have to figure it out from scratch.
If your platform isn't listed, the Custom JavaScript guide works anywhere you can edit the <head> tag — Webflow, Wix, Squarespace, Framer, Ghost, static sites, custom server-rendered apps, and everything in between.
Custom JavaScript
Site <head>
Paste the Otter A/B snippet into the <head> of any site you control.
Shopify
theme.liquid + Customer events
Use the Shopify theme snippet and custom pixel to install Otter A/B and track commerce events.
WordPress
Header / footer plugin
Install Otter A/B in WordPress via a header and footer plugin such as WPCode.
Webflow
Project Settings > Custom Code
Add Otter A/B in Webflow Project Settings under Custom Code.
Wix
Settings > Custom Code
Use Wix Marketing Integrations or Custom Code to add Otter A/B to your site head.
WooCommerce
WordPress plugin + event helpers
Use the WordPress install flow, then wire Otter A/B into WooCommerce add-to-cart and purchase events.
ClickFunnels
Page / funnel header code
Use ClickFunnels header tracking code to install Otter A/B on the pages you want to test.
Squarespace
Settings > Advanced > Code Injection
Install Otter A/B in Squarespace using Settings > Advanced > Code Injection.
Framer
Site settings > Custom code
Paste the Otter A/B snippet into Framer site settings to load it on every page.
Next.js
app/layout.tsx or _document.tsx
Install Otter A/B in Next.js via `app/layout.tsx` or `_document.tsx` depending on your app structure.
Google Tag Manager
GTM Custom HTML tag
Use a GTM Custom HTML tag with an all-pages trigger to load Otter A/B site-wide.
Platform tips
Find the highest <head> you control. The closer to the top of the document, the earlier the SDK starts. Theme headers and root layouts are ideal; per-page injection works but is fragile.
Use one project per domain or environment. Same code base across staging and production? Swap the API key based on env vars so test traffic stays isolated.
Don't mix in tag managers. Tag managers (GTM, Tealium) load asynchronously and inject scripts after the page renders — that's the worst place for the Otter A/B SDK because variants flash visibly. If you must use a tag manager, mark the Otter tag as the highest priority and load it as a custom HTML tag firing on “Page View — DOM Ready” at minimum.
Frequently asked questions
Quick answers to the questions teams ask most about this part of Otter A/B.