How to embed a 3D product configurator on your website

Embedding a 3D product configurator on your website comes down to five steps. The exact tools and effort vary depending on whether you use a ready-made platform or build your own, but the steps are the same either way.

Step 1: Get your 3D model into a web-ready format

Most configurator platforms use GLB or glTF files. If you have CAD files (STEP, SolidWorks, Rhino), you need to convert and optimise them first. Web 3D models should typically be under 10 MB per scene for acceptable load times on mobile. Polygon count, texture size, and draw calls all affect performance.

Options for conversion:

• Blender (free, widely used) can import most formats and export GLB.
• If your manufacturer or designer works in CAD, ask them for a simplified mesh export. Most are familiar with this request.
• Some platforms handle optimisation for you after upload.

Step 2: Choose a platform or build your own renderer

If you are building: you need a WebGL renderer (Three.js and Babylon.js are the common choices), a rules engine for valid combinations, and a hosting layer. Expect several months of development for anything non-trivial.

If you are using a platform: most let you upload your 3D model, configure the options (colours, sizes, materials), and generate an embed code. Setup time is usually measured in hours, not months. Common platforms in this space include Expivi, VividWorks, Hive CPQ, and CPQ3D, each with different pricing models and target use cases.

Step 3: Add the embed script to your website

Most platforms give you an iframe or a JavaScript snippet. The snippet approach is more flexible because it lets the platform control loading behaviour and pass configuration data through attributes or URL parameters.

A typical script-tag integration looks like this:

<script src="https://platform-url/widget/your-id.js"></script>

You drop that into your product page HTML, and the configurator renders inside a container element. Some platforms need a few lines of configuration (API key, product ID); others read everything from the script URL itself.

CPQ3D, for example, uses a single script tag that identifies your account via the URL. No separate initialisation code required.

Step 4: Route quote requests to your inbox or CRM

A configurator without a lead output is a visualisation tool, not a sales tool. Before going live, decide where configured quote requests go:

• Email to your sales inbox (simplest to start).
• Webhook to your CRM (HubSpot, Salesforce, Pipedrive, custom).
• Both, with the email as a backup.

Most platforms handle this through a settings page. You provide the endpoint or email address; the platform sends the configured specification and customer details when the visitor submits.

Step 5: Test on mobile before you launch

3D in a browser is heavier than a static page. Test on a real mid-range Android device and an iPhone before you announce the feature. Check:

• Load time on a 4G connection (aim for under 5 seconds to first interaction).
• Touch controls for rotating and selecting options.
• The quote submission form on a small screen.
• Whether the configurator fits inside your page layout without horizontal scroll.

Most platforms have tested their renderer on mobile. If you built your own, this testing phase will surface issues that are expensive to fix after launch.

How long does it take?

With a ready-made platform and an existing 3D model in a compatible format, the full process from sign-up to live embed can take as little as a few hours. The 3D model preparation step is usually where time is actually spent, particularly if you are starting from CAD files or need to reduce polygon count.

If you want to go from zero to a live configurator without a build project, CPQ3D is designed for that: bring your own GLB model, paste one script tag, and your first 10 quote requests are free.