# Integration Guides Platform-specific install guides for Shopify, WordPress, and more. Otter 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 will tailor the installation steps after project creation. Every Otter 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 `` tag — Webflow, Wix, Squarespace, Framer, Ghost, static sites, custom server-rendered apps, and everything in between. | Platform | Setup location | Summary | | --- | --- | --- | | Custom JavaScript | Site `` | Paste the Otter snippet into the `` of any site you control. | | Shopify | theme.liquid + Customer events | Use the Shopify theme snippet and custom pixel to install Otter and track commerce events. | | WordPress | Header / footer plugin | Install Otter in WordPress via a header and footer plugin such as WPCode. | | Webflow | Project Settings > Custom Code | Add Otter in Webflow Project Settings under Custom Code. | | Wix | Settings > Custom Code | Use Wix Marketing Integrations or Custom Code to add Otter to your site head. | | WooCommerce | Official WordPress plugin | Install the official Otter WooCommerce plugin to load the SDK and track purchases (with revenue), product views, add-to-cart, and checkout — no theme edits. | | ClickFunnels | Page / funnel header code | Use ClickFunnels header tracking code to install Otter on the pages you want to test. | | Squarespace | Settings > Advanced > Code Injection | Install Otter in Squarespace using Settings > Advanced > Code Injection. | | Framer | Site settings > Custom code | Paste the Otter snippet into Framer site settings to load it on every page. | | Next.js | app/layout.tsx or _document.tsx | Install Otter 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 site-wide. | > **Platform tips** > > **Find the highest `` 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 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 ### Which platform should I pick? Pick the one that matches where you edit your site's HTML. If you use a CMS like Shopify, WordPress, or Webflow, choose that. If you maintain a custom codebase, pick the matching framework guide (Next.js is listed; for anything else, choose Custom JavaScript). The install snippet is the same everywhere — only the location of the tag differs. ### What if my platform isn't listed? Use the Custom JavaScript install — paste the snippet into the of every page. Any platform that lets you edit the tag works, including Webflow, Wix, Squarespace, Framer, Ghost, static sites, custom server-rendered apps, and anything in between. If you'd like a tailored guide for your platform, email us and we'll write one. ### Do I need to remove my old A/B testing tool first? No. Otter doesn't conflict with other testing tools running on the same page. That said, running two tools simultaneously can pollute your data — if you're switching, finish or pause your old tests before launching with Otter. ### Does it work with single-page apps? Yes. The SDK watches the browser's history events and re-evaluates active tests whenever the URL changes. You don't need to call anything manually. Any SPA that uses standard browser navigation — which is nearly all of them — will work without configuration. ### Do I need to install differently in dev vs production? No. The snippet is the same in every environment. We recommend using a separate Otter project for staging so test traffic and reporting stay clean. Each project has its own API key, so swap the key based on environment. ### Will the snippet break if my site uses a strict Content Security Policy? You need to allow https://www.otterab.com as a script-src and connect-src origin. The SDK also injects a single