On this page · 6 sections
- An embed is one snippet pasted into an existing page; no replatforming.
- Iframe plus a small bridge script gives isolation and working ad tracking.
- Check that quote requests fire your host page's Google Ads and Meta pixels.
- An own-domain storefront is the alternative if you're replacing your site anyway.
Embedding a configurator on WordPress, Shopify or Webflow means pasting one snippet into a page, so the 3D configurator sits inside your existing design without a new website. The main decisions are iframe or script, and whether your ad pixels still see the quote request from inside the embed. This guide explains both approaches, the tracking bridge, the steps per platform, the own-domain alternative and what to test before you go live.
What “embed” means here
An embed is a snippet of code you paste into an existing page (a WordPress post, a Shopify product page, a Webflow page) that loads the configurator inside that page, styled to sit within your existing layout. The customer never notices they’ve left your site, because they haven’t: the configurator runs inside a frame on your page. This is different from an own-domain storefront, where the configurator is the entire site on its own domain or subdomain (covered below).
Iframe vs script: what’s actually different
Two technical approaches get called “embed.”
An iframe loads the configurator as a page-within-a-page: you paste a <iframe src="..."> tag and the browser renders an independent document inside that rectangle. It’s simple, isolates styling conflicts (the configurator’s CSS can’t clash with your theme’s CSS and vice versa), and is the more common approach for a 3D application. The trade-off: by default, an iframe is a sandboxed context, so anything that needs to know about the surrounding page, like firing a tracking pixel that’s supposed to look like it came from your site, needs an explicit bridge.
A script embed injects a <script> tag that then builds the configurator’s UI directly into a container element on your page, using your page’s own DOM. It can feel more “native” to the page and makes some tracking integrations simpler since the code runs in the same context as your site’s own scripts. The trade-off: it has more surface area for conflicting with your theme’s CSS or JavaScript, so a well-built script embed needs to scope its styles carefully.
Most configurator platforms, Next Configurator included, default to an iframe for the 3D canvas itself (for isolation and performance) with a small companion script (embed.js) that handles the bridge. Passing configuration events and conversion data back out to the host page so your existing analytics and ad pixels still fire correctly. You don’t need to choose between the two; the vendor’s embed snippet should handle both parts for you.
Tracking across the embed
This is the part that gets missed. If a customer configures a pergola and requests a quote inside an iframe, and your Google Ads or Meta pixel lives on the host page (your WordPress or Shopify site), that pixel needs to know the conversion happened. Otherwise your ad platforms never see the “lead” event and your campaigns look like they’re not converting, even though requests are coming in.
A properly built embed handles this with a messaging bridge: the configurator, running inside the iframe, reports events (view → customize → add → lead/request → signup) to the embed script, which then fires the host page’s own pixels using the attributes you’ve set on the embed tag (for example, a data-google-ads="AW-.../label" attribute carrying your conversion label). This way the ad platform’s pixel fires as if it happened directly on your page, because for tracking purposes, it did.
Before embedding anywhere, confirm with your vendor: does the embed snippet forward conversion events to my existing pixels, or do I need to set up tracking twice (once for my site, once inside their platform)? If it’s the latter, your ad campaign reporting will undercount.
Steps per platform
WordPress. Add a Custom HTML block (block editor) or a Custom HTML widget to the page or post where you want the configurator, paste the embed snippet, publish. If your theme restricts raw HTML in some areas, a plugin that allows arbitrary HTML/script blocks solves it. No server access needed.
Shopify. Edit the relevant template (commonly a product page template or a standalone page) in the theme editor, add a “Custom Liquid” or “Custom HTML” section, paste the snippet. Because Shopify product pages carry their own pricing and cart logic, most sellers point the configurator at a dedicated page rather than replacing the product page entirely, then link to it from product listings.
Webflow. Add an Embed element to the page, paste the snippet into its HTML panel, publish. Webflow’s embed element behaves like a sandboxed container, so this is a straightforward drop-in.
In all three cases, the steps are the same shape: find the page, add a raw-HTML/embed block, paste one snippet, publish. No code changes elsewhere on the site, no new hosting, no DNS changes.
The own-domain storefront alternative
Instead of embedding on an existing site, some sellers run the configurator as the whole storefront on its own domain or subdomain (for example, shop.yourdomain.com, or the main domain itself if the configurator platform supports a full storefront with page builder, not just a configurator widget). This is a different decision than iframe-vs-script. It’s “do I want a widget on my existing site, or a full storefront that is my site.”
Own-domain makes sense if you’re replacing an outdated site anyway, want the platform’s built-in pages (page builder, quote pages, reviews, project gallery) rather than just the configurator widget, or want one system handling everything from the homepage through the quote. Embedding makes sense if your existing site already works for brand and content and you only need the configurator itself added to it.
Next Configurator supports both: an embed snippet for an existing WordPress, Shopify or Webflow site, or a full storefront on your own domain built in the page builder. See how embeds work and the 3D configurator.
What to check before you embed
Tick these off on a test page before you go live:
- The 3D canvas lazy-loads, so it doesn’t slow down the rest of the page.
- It works on a phone: most configurator traffic is mobile.
- Tracking scripts wait for your site’s cookie consent.
- A test quote request shows up as a conversion in your ad platform.
- Multiple embeds on different pages (one per product) work if you sell more than one product line.
For the broader buying decision this sits inside, see the 3D configurator buyer’s guide. To try an embed on a test page, build your configurator and you have a snippet in minutes; the embed is included in the one plan.
