Rubens Knowledge Base

Once your product is set up in Rubens Admin, the final step is to integrate the interactive 360° experience into your website. As a headless solution, Rubens provides the flexibility to embed 3D and AR into any e-commerce platform or CMS.

We provide two primary ways to embed the viewer, allowing for either a quick setup or a more seamless, integrated experience.

This is the most efficient way to get your 3D products live quickly.

Similar to embedding a video, Rubens Admin generates a unique Iframe code for each product. Your web team can simply paste this snippet into your product page template. This method is highly reliable, requires no custom programming, and ensures that the 3D viewer remains isolated from your site's internal code for maximum stability.

For a more "built-in" look and feel, we recommend our standard embedding method.

This involves adding a small script to your website and using a dedicated HTML tag. While both methods are responsive, this approach allows the viewer to integrate more seamlessly with your site’s CSS and layout. It offers finer control over how the viewer interacts with other elements on the page, making it the preferred choice for professional e-commerce implementations.

For developers looking for detailed implementation guides, configuration parameters, and code samples, please visit our technical documentation: Getting Started with Rubens 3D Viewer & AR

To maximize user engagement, the placement of the 3D viewer should be intuitive and prominent within your page layout.

Primary Gallery Position: Integrating the 3D viewer as the first or second item in your product gallery ensures that users encounter the interactive experience early in their journey. This bridges the gap between seeing a static photo and understanding the product's physical form.

Dedicated Interactive Section: For complex or high-design products, placing the viewer in a larger, dedicated section further down the page allows users to explore the details in a focused environment after they have seen the initial marketing photography.

Fullscreen Engagement: Ensure the "fullscreen" option is easily accessible within your layout. This allows users to remove website distractions and focus entirely on the product’s materials and craftsmanship – especially important for mobile experience.

Above the Fold: On mobile devices, the 3D viewer should ideally be visible without significant scrolling. Since mobile users are the primary audience for Augmented Reality, having the viewer immediately available reduces friction.

Seamless 2D to 3D Transition: The transition from a static image to the 360° viewer should feel fluid. Using a consistent aspect ratio for both your images and the viewer container prevents the page layout from "jumping" during interaction.

Mobile-First Interaction: Because the Rubens engine is optimized for touch, ensure the container provides enough space for comfortable rotation and zooming on smartphone screens, avoiding accidental page scrolls.

See how the Rubens 3D Viewer behaves in real-world environments. The following video showcases various integration examples, from standard product galleries to full-screen interactive discovery and the seamless step into Augmented Reality.

Whether you have questions about your 3D model quality, need assistance with data preparation, or want expert support in optimizing your assets – we are here to help.

Roomle offers support, consulting, and 3D data optimization services tailored to your project requirements. We handle the technical complexity and strategic planning so you can focus on delivering a high-quality experience to your customers.

Reach out to our service team to discuss your 3D project: service@roomle.com