How Our 3D Configurator Integrates with Your Tech Stack

Adding a 3D configurator to your website or workflows shouldn’t be complicated. Every business has unique systems and processes, and our goal is to make integration simple, flexible, and seamless, so your customers (or internal users) can explore, customize, and buy products in 3D without friction.

Below is an overview of the integration options and how the VividWorks 3D configurator connects with websites, eCommerce platforms, CRM systems, or CPQ workflows.

Plugin-based integration

For popular eCommerce platforms like Shopify, WooCommerce, Adobe Commerce/Magento we offer ready-to-use free plugins .

Our eCommerce plugins allow you to:

• Connect the configurator directly into your eCommerce store
• Display real-time pricing as users make changes
• Add configured products automatically to the cart
• Store configuration details for orders, quotes, and production

If your platform is less common, we will work with you to determine the best approach.

API-based integration for custom websites, CRM, CPQ, or ERP

For more advanced setups, we provide a JavaScript based integration API. Integrations are performed by your team or integration partner using the VividWorks API and public documentation, supported by our technical guidance as needed. This gives your team full control and flexibility while keeping implementation lightweight.

What the API provides

The configurator can send your system all the data needed to keep your workflows connected:

• BOM (Bill of Materials)
• Optional configuration metadata for CRM, CPQ, ERP, or quoting needs
• High-resolution images
• Optionally, the gLTF model of the configured product

How your system can use this data:

• Update prices in real time
• Sync configurations directly into CRM/CPQ projects
• Store customer-specific configurations
• Pass data into manufacturing or production systems
• Handle quotes, carts, or order processing

This makes the configurator a fully integrated part of your business ecosystem.

Typical integration structure:

• The configurator is embedded on your website (this could be a separate page within the site or for example the product detail page)
• User authentication (login, accounts, project storage) is handled by your website
• The configurator communicates with your website through the front-end API
• Prices are maintained solely in your systems
• You decide how to handle the data sent by the VividWorks 3D Configurator

This approach keeps integrations:

✅ Flexible

✅ Fast to adapt

✅ Under your team’s full control

eCommerce integration using the same API

If you want to enable online purchases now or later the API allows you to:

• Push the configured product into your shopping cart
• Transfer all configuration details to the order
• Handle quoting, checkout, or request-for-quote (RFQ) steps

Since the integration pattern remains the same, adding eCommerce functionality requires no architectural changes.

Embedding the VividWorks 3D Configurator

For most websites, embedding the configurator is as simple as:

• Including one JavaScript file (the Embed Tag)
• Adding a single HTML tag with attributes for your product

Why the embedding method works so well

• Safe and isolated: The configurator runs independently and won’t affect your site layout.
• No style conflicts: Your site’s CSS won’t interfere, and the configurator won’t overwrite your styles.
• Simple communication: Data flows easily between your website and the configurator (pricing, products, projects, etc.).
• Automatic updates: Improvements are handled by VividWorks - no action required from your team.

Most teams complete this step pretty quickly.

What you need to integrate

If you use Shopify, WooCommerce, or Adobe Commerce/Magento:

• No coding required
• Plugin installation + basic setup
• Typical time: 1–3 hours

If you use other eCommerce platforms, a custom website, or a backend:

• A developer familiar with JavaScript
• Access to your product data (PIM/ERP/CRM)
• SKUs for all product items if pricing or cart integration is needed
• Typical time: 1–2 days for base-level integration

Minimum tech requirements:

• Modern web framework or standard HTML/JS
• Ability to insert one JS script + one HTML tag
• HTTPS-enabled site

Support at every step

We don’t just provide tools - we partner with you to ensure a smooth process.

You’ll receive:

✅ Help choosing the right integration approach

✅ Technical documentation

✅ Guidance for CRM/CPQ/eCommerce connections

✅ Ongoing support and updates

Ready to boost your sales with 3D? Let's connect to explore your optimal setup and integration path!