Webflow
A Webflow product configurator in one embed
Add a 3D product configurator to Webflow with an Embed element, on a static page or a CMS template. Publishing, placement, CMS fields and pitfalls explained.
No plugin to installWorks with your themeRequests land in your pipeline
Set it up
Add it to Webflow in a few minutes
- Build your product, or open it in your admin, and copy its embed line.
- In the Webflow Designer, open the Add panel and drag an Embed element (called Code Embed in some versions) into the section where the configurator belongs.
- Paste the line into the code editor and save.
- Set the parent section to full width and leave its height on auto.
- Publish to your webflow.io staging domain, test, then publish to your own domain.
Webflow does not run custom scripts inside the Designer, so you see a placeholder there. That’s expected. Custom code features depend on your Webflow plan; check yours before you start.
<script src="https://store.nextconfigurator.com/static/embed.js" data-calipy="https://store.nextconfigurator.com/p/YOUR-STORE/embed/YOUR-PRODUCT"></script>Example. Your own line is on the product page in your admin, under "Embed on other websites", and on the page you see after building.
To add a 3D product configurator to Webflow, drop an Embed element onto the page or CMS template, paste the one-line embed, and publish; the configurator shows on the published site, not in the Designer. Quote requests land in your Next Configurator pipeline.
What it is
A Webflow product configurator is a 3D designer inside your Webflow layout where buyers size a product, choose options and send a request. Webflow sites are often built with care by a designer, so the embed is a good fit: one element inside your own section, styled around it as you like, with no change to the rest of the build.
Publishing
Test on the staging domain first. If you limited the product’s embed to your own websites, add the webflow.io address as well as your own domain, or the staging test shows nothing. After publishing, open the page logged out and send a test request.
Placing it on CMS templates
If you keep products in a CMS Collection, for example one item per pergola model, put the Embed element on the Collection template page. The Embed editor on a template page can insert CMS fields into the code. Add a plain text field with the product’s embed URL to the collection and insert it into the data-calipy attribute, so every item loads its own configurator from one template.
Leave the field empty for items that have no configurator, and use conditional visibility to hide the section for them.
What the buyer sees
The configurator sits inside your design. The buyer sets the width and projection of the pergola, chooses louvres or a fixed roof, a RAL colour and lighting, sees the model in 3D and in AR on their phone, and sends a request. Prices show live, as “from” or not at all, per product.
Where requests arrive
Requests land in your Next Configurator pipeline, not in Webflow form submissions. You turn each into a numbered quote with options and an online quote page, and follow-ups keep track of open requests.
Things to check
- Fixed heights. A section with a fixed height or hidden overflow cuts the configurator off. Use auto height.
- Consent banners. Allow the configurator as a functional script.
- Several pages. One Embed per configurator; on CMS templates, one field per item.
Questions, answered
Still deciding? We'll walk you through it with your own product.
Book a walkthroughWhy can't I see the configurator in the Designer?
Webflow doesn’t run custom scripts in the Designer. Publish and check the staging or live site.
Can one CMS template serve all my products?
Yes. Store each product’s embed URL in a CMS field and insert it into the Embed code on the template page.
Does it affect my Webflow interactions?
No. The configurator runs in its own frame inside the element and leaves your interactions alone.
Can I style the configurator in Webflow?
Style the section around it in Webflow. Colours and fonts inside the configurator come from your Next Configurator store settings.
Live in three minutes. Yours for €499 a month.
14 days free, then one plan with everything in it. Live in about three minutes. Cancel any month.