Rubens Knowledge Base

E-Commerce integration - How does it work?

With the Rubens Configurator you can sell highly customizable products via your web shop online or simply trigger product requests for lead generation on your website. Rubens´s 3D product configurator & AR functionality is designed to be embedded seamlessly into all web and e-Commerce platforms.

We explain in this article how the communication between your web shop and the Rubens 3D Configurator works top level and how the shop can calculate prices based on the individual customer configuration.

Set the stage - Integration Success Criteria

Before you get started with the technical implementation of the Rubens 3D Configurator with your team or agency you have to pay attention on the following areas to make to make the Sales Configurator project a success.

We strongly recommend to prepare a clear concept on your side on the following questions at an early stage:

  • where you are going to offer the product customization option during the customer journey on your website
  • how the 3D configurator is presented on your website (iFrame in-page integration, fullscreen integration, etc.)
  • where to visualize prices (inside or outside the configurator)

    💡Once you have a clear picture on how the 3D Product Configurator will be presented to your customers online your technical implementation team can get started with the technical integration.
How to integrate the Rubens Configurator online

Integrate the Rubens Configurator into your e-Commerce System of choice

The Rubens Configurator is completely API-based, which makes it possible to implement it with any e-Commerce system of choice. Whenever the user clicks on the call-to-action button the website gets notified and the configurator delivers the complete parts list with an auto generated image and all the stuff a shop system needs for calculating the price and creating an order.

We have prepared below an example of a 3D Configurator integration in a customer web shop with the aim to explain the areas of responsibility between the customer and Roomle during an integration project. With our state-of-the-art technology approach and platform we give our customers maximum flexibility for integrating the Rubens Configurator into their shop environment. And finally enabling the setup of world-class 3D & AR configuration shopping experiences in the customer owned channels.

How to integrate the Rubens Configurator online

Ready for all e-Commerce systems

The Rubens 3D configurator is fully API based and can be integrated seamlessly with live price calculation into any e-commerce platform & system landscape via the powerful Roomle API.

Compatible with all shop systems

Embed the Rubens Configurator into your web shop

  1. Define an area in your shop
  2. Add the Roomle code (API)
  3. Enable 3D product customization, visualization
  4. Calculate prices via the shop system and place orders
  5. And finally measure success
How to integrate the Rubens Configurator online
Fast shop integration with 3 lines of code
Fast shop integration with 3 lines of code

Through the API you get access to the following data:

  • ProductLabel

  • ConfigurationPartList (art. numbers, selected configuration values)

  • ConfigurationImage which can be handed over to the shopping basket

  • ConfigurationID (Unique Rubens configurationID that allows you to access an individual configuration at any time)

  • Tracking events to gain insights of the most important configuration analytics events

💡Explore the Rubens Configurator Embedding documentation and learn how to embed the Configurator and how to extract relevant data from the configurations which can be further used in your sales processes.

Rubens Configurator partlist - all order details in one place

Once the configurator is embedded online the online shop has real-time access to the partlist of the customer configuration. The partlist basically contains all order relevant product information like article numbers, element counts as well as selected product options (e.g. material information, product dimensions and parameter details). This is the basis for calculating prices real-time via the online shop on the customer side.

Rubens 3D Configuration partlist / bill of material example
The Rubens configuration part list as the basis for live price calculation via the shop system

How to calculate prices live via the online shop?

As you have learned above the web shop communicates live with the Configurator via Roomle API. This way the shop gets a real-time update on all article numbers and order relevant information during the live configuration session and can calculate prices live within milli-seconds.

The graphic below provides a schematic overview on which basis the calculation is handled on the shop side and finally manages the handover to the shopping cart.

💡 Explore the technical documentation for calculating prices here.

The web shop calculates prices live based on the configuration part list
The web shop calculates prices live based on the configuration part list
Fast shop integration with 3 lines of code
Handover to shopping cart

Rubens Configurator customization options

The Rubens 3D Configurator comes equipped with a powerful & awarded User Interface (UI) for all platforms and devices used by millions of users. The interface is continuously further developed by our Roomle product expert team and you benefit from any updates ongoingly.

In addition we offer 2 different approaches in further customizing the UI on your side.

  1. Basic skinning options of the standard configurator UI
  • Interface buttons can be shown or hidden (e.g. AR, part list, show product dimensions, product request button, ....)

  • Basic skinning of the interaction elements: customization of colors of navigation elements (buttons, boxes)

  • Configurator background: You can either go with our standard background or use our pre-defined 3D scene with an endless floor. Learn more in our short guide about changing floor materials within the configurator.

    Overview of our UI Customization options
    Visit our technical documentation


  1. Individual Configurator UI development on customer side (Roomle SDK)

If you have special needs and want to integrate fully customized and seamlessly into your web shop / website you can realize such a scenario with the powerful Roomle SDK kit. This approach allows you to design and implement your individual configurator UI based on our building blocks. You can either start with the existing Rubens Configurator UI template or completely start from scratch. You have full flexibility here.

We have developed some useful information for you on and what you have to consider as we are developing the configurator at fast speed on a bi-weekly basis.

Learn more about the options here

Custom Configurator UI Reference
Custom Configurator UI Reference

E-Commerce Customer References