Rubens Knowledge Base
Customize the Standard Rubens Configurator UI
Rubens comes with a ready-to-use, high-performance standard interface – fully optimized for desktop, mobile, and large touch screens. It's used in over 20 million product configurations per year, enabling seamless product experiences across industries.
Benefits of the standard Rubens UI:
- Ready-to-use interface – no extra costs or dev time
- Bi-weekly updates and low maintenance
- Mobile-first and touch-optimized
- High-quality visualization with HD 3D rendering
- Smooth integration into any website or platform
The Rubens interface is designed for speed, flexibility, and scalability out of the box. But it’s also built to adapt. Whether you want to embed it seamlessly into your online shop, match your corporate design, or create a custom user journey – Rubens gives you the tools to modify the UI according to your needs.
This tutorial shows you how to customize the Rubens standard UI – step by step – to better fit your brand and website integration.
Overview of Rubens Standard UI Elements & Customization Options
)
Parameter Types: Defined during the scripting phase of the configurator setup. Once implemented, they cannot be customized later on. However, during the project phase, it is possible to define labels, translations, and thumbnail images for these parameters to ensure they align with the brand language and user expectations. Additionally, tooltips can be added to parameters and options to provide users with more detailed information. It is also possible to link relevant content from your website, either via embedded iframes or links to PDFs, enhancing the user experience with contextual help and resources.
Parameter Groups: Organize the options within the configurator and can be named according to your preferences – please ensure to inform us about the wording you want to use during configurator setup. The button color can also be adapted to match your brand’s visual identity, providing a seamless and recognizable experience for your users.
Standard UI Elements: The standard user interface elements, such as zoom controls, AR view, or fullscreen mode, can be selectively displayed or hidden. This allows for a streamlined interface, tailored to your use case, removing any unnecessary features that could distract from the core configuration experience. While the button images themselves cannot be changed, the labels on these buttons can be overwritten to better match your branding or terminology.
3D Scene: ou can customize the 3D scene to match your brand and product presentation needs. This includes setting a custom background color and deciding whether or not to display a floor. If a floor is shown, you can choose from one of our pre-defined floor styles that best fits your visual goals. During the project phase, we also define lighting and shadow settings, which can be further customized upon request to ensure the best visual outcome. Additionally, the initial camera angle, zoom level, and perspective can be set to create the perfect first impression when the scene loads.
Call-to-Action Buttons: The buttons displayed on the bottom right of the configurator can be customized in terms of their labels and button color. You can choose to show both buttons, only one, or hide them entirely, depending on your preferred user flow. Alternative button styles – such as square buttons instead of the default rounded design – are not natively supported. However, this can be achieved by hiding the standard CTA buttons and implementing custom-styled buttons directly on the webshop side to maintain design consistency.
Bottom Bar: The bottom bar of the configurator can be customized to align with your branding and user experience goals. The displayed name of the configurator can be freely adjusted, and the call-to-action buttons can be configured as described above. If preferred, the entire bottom bar can be hidden with just a few clicks. This makes it possible to shift all interaction elements directly into the webshop interface for full visual and functional integration.
Custom Font & Button Color
)
🛠 These customizations can be easily managed via Tenant Settings in the Rubens Admin Platform. Thanks to integrated feature flags, these options can be enabled and adjusted without the need to change your website integration or touch any frontend code.
3D Scene Customization Options
Background Color
)
3D Scene with Floor
)
Camera Angle / Custom Perspective
)
🛠 These customizations can be easily managed via Tenant Settings in the Rubens Admin Platform. Thanks to integrated feature flags, these options can be enabled and adjusted without the need to change your website integration or touch any frontend code.
Labels, Text in Overlays & Languages
Customizing Text in Overlays and UI Buttons
You can easily override and customize any text in information overlays or configurator UI buttons through embedding settings, allowing you to tailor the interface to your brand’s voice and user experience.
Please note: You can also customize the color of the CTA buttons shown on overlays as described in the section above.
)
🛠 You can also easily manage this through the tenant settings in the Rubens Admin platform. Simply switch to advanced mode and add the translation details to the JSON as described in the technical documentation.
Setting Localization to Control Configurator Language
Define the configurator’s language explicitly by setting localization parameters to match your webshop’s supported languages. This ensures your configurator is available only in those languages, providing a consistent user experience across your platform. Without localization settings, the configurator automatically detects the user’s language via IP or browser settings, which may result in UI labels and texts appearing in a different language than your webshop.
🛠 If you offer the configurator in only one language, you can set this language via Tenant Settings in the Rubens Admin platform. If you need the configurator for different language versions of your webshop, we recommend setting it via integration.
Sharing Experience
Customize Shareable Links
By default, configurations shared via Rubens are published under a Roomle-branded URL. These shareable links should be customized to match your own domain in order to ensure a consistent brand experience across all touchpoints.
Webhook for Email Customization
)
With our webhook feature, you can fully customize the process of sending saved configurations via email. Instead of using default email settings, the webhook allows you to send configuration data from your own target email address and tailor the entire email template to match your branding and communication style.
This flexible approach ensures that your customers receive personalized, on-brand emails containing their saved configurations, enhancing the overall user experience.
Supporting Users with Additional Information
Tool Tips
)
Tool tips provide users with brief, relevant information exactly when and where they need it. These can explain complex parameters, offer helpful product details like dimensions or compatibility, give insights about materials such as durability or maintenance, or include links to your webshop and related resources. This real-time guidance helps users understand key features and make informed choices without interrupting their workflow.
Helpcenter & Custom Tutorials
)
The Helpcenter offers a centralized resource for users to access detailed documentation, FAQs, and custom tutorial videos. You can create and embed tutorial content tailored to your configurator, guiding users step-by-step through specific features or workflows, which enhances learning and reduces support requests.
Customizing the Parts List & PDF Output
Enhance your configurator experience by tailoring the parts list and PDF output to suit your specific needs. Roomle allows you to customize what gets included in the generated parts list – whether that's adjusting formatting, displaying extra information, or modifying the print layout.
Full Custom Integration with External Controls
Roomle offers extensive flexibility to customize the configurator UI, enabling a seamless fit within your corporate identity and website design. Beyond the standard interface, your website can listen to all events happening within the 3D scene and fully control the configuration externally.
This means every button and control available inside the configurator – such as the "Add to Cart" or "Request Product" buttons – can be recreated and managed completely outside of the Roomle container. This empowers you to build a fully tailored user experience that matches your branding and workflows precisely.
Examples of Custom UI Integration
)
Biohort has hidden the standard bottom bar and implemented custom buttons for key functions such as the part list, sharing options, and the add-to-cart feature. Additionally, Biohort developed a custom PDF generation for the part list, resulting in a smooth and highly efficient user workflow.
)
Frama has also hidden the bottom bar and integrated custom UI elements including a tailored price display, as well as save-to-draft and add-to-cart buttons that are fully aligned with the webshop’s design and branding.
)
Highlite chose to hide the standard bottom bar and introduced custom buttons throughout their interface. Notably, Highlite added a custom button in the top-right corner to open the help center, enhancing user support directly within their branded UI.