Adding a product configurator to a website is not as complex as it sounds. The configurator does not need to be rebuilt into your existing site from scratch. In most cases, it gets embedded. Your website stays the same. The configurator loads inside a designated area of your product page and communicates with your store via an API.
Quick answer: A product configurator is added to a website via a JavaScript snippet, iframe embed, or API-driven headless integration. The configurator application runs on its own infrastructure and loads into your product page. Your website platform (WordPress, Shopify, Webflow, custom) does not need to change. The embed method depends on how much control you need over the integration.
This guide covers every embed approach, the technical requirements you need to plan for, and when a headless/API-first setup beats an all-in-one solution.
What a Product Configurator Website Feature Looks Like
From the customer’s perspective, a product configurator on a website is a section of the product page where they can interact with the product. They select options. The product visual updates in real time. When they are done, they add it to the cart.
Under the hood, that section is not part of your main website’s code. It is a separate application embedded into your product page. This is important because it means:
- You can add a configurator to any website without rebuilding the site
- Updates to the configurator do not require changes to your main site
- The configurator can be maintained and updated independently
- Performance issues in the configurator do not crash your site
This separation of concerns is how all serious configurator deployments work.
The Three Embed Methods
Method 1: JavaScript Widget Embed
A small JavaScript snippet is added to your product page. The script loads the configurator into a <div> element on the page. The configurator renders inside that container.
This is the most flexible approach. The embed code looks something like this:
<div id="configurator-container"></div>
<script src="https://cdn.yourconfigurator.com/embed.js"
data-product-id="YOUR_PRODUCT_ID"
data-container="configurator-container">
</script>The JavaScript handles everything: loading the 3D assets, rendering the interface, managing user interactions, and communicating configuration data back to your website.
Advantages: Full control over placement, styling, and interaction. The configurator can communicate with your page’s JavaScript (add to cart, update price display). Works on any website that allows custom scripts.
Best for: Custom websites, Webflow, most CMS platforms where you can add HTML and JavaScript to a page.
Method 2: iframe Embed
An <iframe> element points to the configurator’s hosted URL. The configurator runs inside the iframe, isolated from your main page.
<iframe
src="https://configurator.example.com/products/YOUR_PRODUCT_ID"
width="100%"
height="600"
frameborder="0">
</iframe>Advantages: Simplest implementation. No script management on your end. The iframe is fully isolated, so there is no risk of the configurator’s JavaScript conflicting with your site’s JavaScript.
Disadvantages: Communication between the iframe and your parent page requires the postMessage API, which adds complexity for cart integration. Styling the iframe border and sizing requires CSS work. Mobile responsive sizing can be tricky.
Best for: Situations where you need a sandboxed embed with minimal integration between the configurator and the surrounding page.
Method 3: API-First / Headless Integration
Your website calls the configurator’s API to fetch product data, configuration rules, and 3D model references. Your frontend renders the configurator UI using its own components. The API handles the logic and data.
This approach is more complex to build but gives you complete control over the visual presentation. The configurator logic lives in the backend. The UI is entirely yours.
Advantages: Complete design freedom. The configurator looks and feels like a native part of your site. Best performance because you control every asset.
Disadvantages: High development effort. Your team builds and maintains the frontend UI. Any changes to the configurator’s API affect your implementation.
Best for: Enterprise brands with dedicated frontend engineering teams who want a seamless, brand-native experience.
Technical Requirements to Plan For
Hosting and Infrastructure
The configurator application needs to be hosted somewhere. For SaaS configurators, this is handled for you. For custom-built configurators, the hosting needs to be planned.
3D assets (models, textures) should be served from a CDN, not your origin server. CDN delivery reduces latency for global users and takes load off your primary server. Cloudflare, Fastly, and AWS CloudFront are standard options.
3D Asset Pipeline
Your products need 3D models. Those models need to be in the right format (glTF/GLB for web), optimized for web delivery (Draco-compressed, reasonable polygon counts), and organized with correct material assignments.
This is often the most time-consuming part of a configurator deployment. If your products do not already have 3D models, budget for model creation or photography-based 3D reconstruction.
Cart and Order Integration
When a customer finishes configuring, the configuration data needs to reach your order management system. This requires integration work:
- For Shopify: use the Storefront API or the cart API to add a product with custom attributes
- For WooCommerce: use the WooCommerce REST API to add a product with meta data
- For custom platforms: build a webhook or API endpoint that receives configuration payloads
The configuration data should include: selected options, SKU or product code, price, any custom specifications, and a configuration ID that can be referenced later.
Performance Budget
Adding a 3D configurator to a product page adds weight. Set a performance budget before development starts:
- Configurator JavaScript bundle: under 200KB gzipped
- Initial 3D model load: under 3 seconds on a standard broadband connection
- Total page weight increase: under 10MB
Use lazy loading to avoid loading the configurator until the user scrolls to it or clicks a “Configure” button. This keeps your product page’s initial load time fast.
Headless vs. All-in-One Solutions
All-in-One SaaS
Platforms like Zakeke, Expivi, and Threekit provide everything: the configurator application, hosting, 3D rendering pipeline, and integrations with major ecommerce platforms. You configure your products in their dashboard, install their plugin or embed their script, and the configurator is live.
Advantages: Fast time to deployment, no infrastructure to manage, support included.
Disadvantages: Monthly subscription, vendor lock-in, limited customization of the experience, your product data lives on a third-party platform.
Headless / Custom Build
The configurator application is built specifically for your products and hosted under your control. ConfiguraThor takes this approach. The configurator is custom-built to your product logic, visual requirements, and integration needs. It embeds into any website via JavaScript and communicates with your platform via API.
Advantages: Full ownership, no recurring license fee, configurable to any integration, brand-native experience.
Disadvantages: Higher initial investment, longer time to deployment.
For a detailed breakdown of when each approach makes financial sense, see our product configurator cost guide.
Examples of Configurator Website Implementations
Furniture and Home Decor
A furniture brand adds a ConfiguraThor embed to their product pages on a custom-built website. The customer selects frame finish, fabric, leg style, and cushion firmness. The 3D model updates in real time. On mobile, the options appear in a bottom drawer. The configured product is added to the cart with all specifications attached to the line item.
Industrial Equipment
A manufacturer’s website runs on WordPress. A JavaScript-embedded configurator loads on the product page for their modular conveyor systems. The customer selects belt width, drive type, frame material, and length. Invalid combinations are greyed out. At the end, the customer requests a quote rather than checking out directly. The configuration data emails the sales team with a complete spec sheet attached.
Automotive Aftermarket
An aftermarket wheel and tire brand uses an iframe embed that loads a vehicle-specific fitment configurator. The customer enters their car’s year, make, and model. The configurator filters to compatible products. The customer sees the selected wheel rendered on a 3D model of their specific vehicle. The postMessage API sends the selected part numbers back to the parent page cart.
Step-by-Step: Adding a JS Configurator Embed to Any Website
- Get the embed code from your configurator provider or developer. It will be a
<script>tag or<div>plus<script>combination. - Identify the placement on your product page. Most configurators go below the product title or replacing the product images section.
- Add the embed HTML to your product page template. In WordPress, use a Custom HTML block or add it to your theme’s product template. In Webflow, use an Embed component. In Shopify, edit the product.liquid or product-template.json.
- Pass product data to the embed if required. Some configurators need a product ID or SKU passed as a data attribute to load the correct product.
- Set up the cart callback. When the customer clicks “Add to Cart,” the configurator fires a JavaScript event. Your site listens for that event and submits the cart with the configuration data. Your configurator provider documents the event format.
- Test on mobile. Open the product page on a real phone, not just a browser emulator. Check that the configurator loads, the 3D model rotates correctly, and the Add to Cart flow completes.
- Check performance. Run the product page through Google PageSpeed Insights or WebPageTest to confirm load time is within your budget.
For broader context on 3D configurators and how they work, see our 3D Product Configurator Guide.
Frequently Asked Questions
How do I add a product configurator to my website?
You add a product configurator to a website via a JavaScript snippet, iframe, or API integration. The configurator application is hosted separately (by you or a SaaS provider) and loads into a designated area of your product page. Most SaaS platforms provide a one-line embed code. Custom-built configurators require a developer to set up the embed and configure the cart integration.
Does adding a configurator slow down my website?
It can if not implemented carefully. Use lazy loading so the configurator only loads when a user scrolls to it. Compress 3D models to glTF/GLB format. Serve assets from a CDN. A well-implemented configurator adds under 3 seconds to the time-to-interactive for the configurator section without affecting the rest of the page load.
Can I add a product configurator to Webflow, Squarespace, or Wix?
Yes. Any website that allows custom HTML and JavaScript can embed a configurator via a script tag or iframe. Webflow supports custom embed components. Squarespace and Wix have code blocks for custom HTML. ConfiguraThor specifically supports custom integrations with all major website platforms.
What is a headless product configurator?
A headless configurator separates the configuration logic and data (the backend) from the visual interface (the frontend). Your website consumes the configurator’s API to fetch rules and product data and builds the UI independently. This gives complete design control but requires frontend development. Most brands use an all-in-one or JavaScript embed approach instead.
How does the configurator communicate with my shopping cart?
Via JavaScript events (for JS embeds) or postMessage (for iframe embeds). When a customer finishes configuring, the configurator dispatches an event containing the configuration data: selected options, price, product code. Your website listens for that event and submits the data to your cart API. SaaS platforms handle this automatically for Shopify and WooCommerce. Custom platforms need a developer to build the listener and cart submission logic.