Rubens Knowledge Base
Best Practice: Customized Integration Biohort
Biohort demonstrates a masterclass in handling high-complexity modular products through a deeply customized Rubens integration. By separating "Standard Quick-Buy" options on the Product Detail Page (PDP) from "Full Technical Personalization" within the configurator, they cater to both casual shoppers and professional retailers. Their integration is notable for its hybrid UI, which wraps the standard 3D engine with bespoke brand-aligned controls and enhanced data-export functionalities.
The PDP Launchpad: Balancing Simplicity and Power
Two-Tiered Product Selection: Biohort deals with highly technical outdoor storage solutions. To prevent "choice paralysis," their Product Detail Pages offer a limited set of standard options for customers who want a pre-validated solution. For those requiring a precise fit, a "3D Configurator" button acts as the gateway to the full Rubens suite. This dual approach ensures that the webshop remains clean for standard buyers, while the power of the configurator is reserved for deep personalization and professional planning.
Hybrid UI: Custom Controls & Seamless Navigation
One of Biohort’s strongest technical choices is the decision to move core UI elements out of the standard 3D scene and into the native website environment. This creates a perfectly aligned brand experience where the configurator feels like an integral part of the site rather than an external plugin:
Custom Function Bar: A bespoke button set is placed directly under the configurator UI, designed in Biohort’s signature style. These buttons provide enhanced functionality that bridges the gap between the 3D scene and the e-commerce platform: - Back to Product Page: A "safe exit" that returns the user to the previous PDP, retaining the context of their search and the standard purchase options. - Add to Cart: A direct e-commerce trigger for seamless checkout of the custom configuration. - Search Dealers: A strategic link to their partner and retailer overview page, supporting their omnichannel sales model.
External Price Display: To match strict design requirements, the price is displayed outside the configurator UI. It remains fully reactive, updating in real-time as the user adds accessories or changes dimensions, ensuring the font and styling stay consistent with the rest of the webshop.
Branded Data Export & Lead Capture
Enhanced PDF and CSV Logic: Biohort has customized the standard Rubens export functions to act as a professional planning and lead-generation tool.
- Lead Generation Overlay: When a user clicks the Print/PDF/CSV button, a custom overlay appears, inviting the customer to enter their personal data before generating the document. This turns a simple "save" action into a high-quality lead for the sales team.
- Tailored Document Layouts: Biohort has customized the standard PDF output to match their specific brand identity and layout needs. This ensures that the technical parts list and configuration summary the customer receives feel like a high-end, branded brochure.
- Hidden Standard UI Elements: To maintain a clean visual interface, the standard "Part List" button is hidden within the 3D scene. Instead, users access the part list via the branded PDF export or through a dedicated "Show part list" link positioned conveniently under the price display.
Multi-Channel Utility: Share & Save
A Tool for Professionals and Partners: The Biohort configurator is a vital tool for their internal service teams, retailers, and end-consumers alike.
Customized Sharing: The "Share" button opens a custom overlay for saving drafts, allowing users to pause their design and return to it later or share it with a consultant for a final review.
Retailer Support: Because the configurator handles complex technical dependencies automatically, retail partners can use the tool in-store to ensure every customer order is technically error-free and complete before it ever reaches production.
Deep Dive: The Biohort Success Story
Proven Impact: The collaboration with Biohort showcases how the Rubens engine can be extended with a fully custom UI to handle extreme product complexity. This implementation has not only streamlined the online buying process for consumers but has also become an indispensable tool for their global network of retail partners. For a detailed look at the hybrid integration and the professional features of this project, visit our official Success Story.
💬 We Are Here to Help
Strategic Implementation Assistance: Crafting a high-converting digital experience requires a blend of intuitive user journey design and robust technical integration. Our professional services team is available to support you through every stage of your project — from initial consultation on customer flow and UI strategy to the technical setup of your Bill of Materials (BOM) and product logic. Whether you are defining complex variants or optimizing your integration for various entry points, we are here to ensure your 3D ecosystem is built for success.
Contact us at: service@roomle.com