Create a 3D product viewer in Bubble by embedding Google's model-viewer web component inside an HTML element. Upload your 3D model file (GLB or GLTF format) to Bubble's file manager, reference it in the model-viewer tag, and configure touch-and-drag rotation, auto-rotate, and AR preview for mobile users — all without writing backend code.
Adding a 3D Product Viewer to Your Bubble App
Interactive 3D product views boost customer engagement and reduce return rates for e-commerce apps. This tutorial shows you how to embed a 3D model viewer in your Bubble app using the model-viewer web component — an open-source library by Google that works in any browser. No plugins needed, just an HTML element with a few lines of configuration.
Prerequisites
- A Bubble account with an app open in the editor
- A 3D model file in GLB or GLTF format (free samples available at poly.pizza or sketchfab.com)
- Basic understanding of Bubble's HTML element
Step-by-step guide
Upload your 3D model file to Bubble
Upload your 3D model file to Bubble
Go to the Data tab → File manager. Click 'Upload a file' and select your 3D model in GLB format (GLB is preferred because it packages textures into a single file). Once uploaded, right-click the file in the File manager and copy its URL. You will need this URL in the next step. If your model is hosted externally (such as on a CDN), you can use that URL directly instead.
Pro tip: Keep 3D model files under 5MB for fast loading. Use tools like gltf.report to compress models before uploading.
Expected result: Your GLB file is uploaded to Bubble's file manager and you have its URL copied.
Add the model-viewer script to your page header
Add the model-viewer script to your page header
Go to Settings → SEO / metatags → Script/meta tags in the header. Add the model-viewer script tag that loads the library from a CDN. This loads the model-viewer web component globally so it can be used in any HTML element on your pages. Alternatively, you can add this script only to specific pages by placing it in an HTML element at the top of the page.
1<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>Expected result: The model-viewer library is loaded on your pages and ready to use.
Embed the 3D viewer using an HTML element
Embed the 3D viewer using an HTML element
Go to the Design tab on the page where you want the 3D viewer. Click the '+' icon → search for 'HTML' → drag an HTML element onto the page. Resize it to fit your desired viewer dimensions (e.g., 400x400 pixels). In the HTML element's content, paste the model-viewer tag with your model URL, camera controls for drag rotation, and auto-rotate for a spinning preview.
1<model-viewer2 src="YOUR_GLB_FILE_URL_HERE"3 alt="3D product view"4 camera-controls5 auto-rotate6 shadow-intensity="1"7 style="width: 100%; height: 100%;"8></model-viewer>Expected result: A 3D model appears in the HTML element that users can rotate by clicking and dragging.
Make the model URL dynamic for multiple products
Make the model URL dynamic for multiple products
To display different 3D models for different products, add a 'model_url' field (type: file or text) to your Product Data Type. On your product detail page, set the HTML element to use dynamic data. In the HTML content, use Bubble's dynamic data insertion: click 'Insert dynamic data' inside the HTML editor and reference 'Current Page Product's model_url.' This replaces the hardcoded URL with the product-specific model file.
Pro tip: Not all products will have 3D models. Wrap the HTML element in a group with a conditional: 'When Current Page Product's model_url is empty → This element is not visible.' This hides the viewer for products without models.
Expected result: Each product page displays its own 3D model dynamically, and products without models hide the viewer.
Enable AR preview for mobile users
Enable AR preview for mobile users
Add the 'ar' attribute to your model-viewer tag to enable augmented reality on supported mobile devices. When a user visits the page on their phone, they will see an AR button that lets them place the 3D model in their real environment using their camera. Add 'ar-modes' to specify which AR methods to support.
1<model-viewer2 src="YOUR_GLB_FILE_URL_HERE"3 alt="3D product view"4 camera-controls5 auto-rotate6 ar7 ar-modes="webxr scene-viewer quick-look"8 shadow-intensity="1"9 style="width: 100%; height: 100%;"10>11 <button slot="ar-button" style="background: #4285f4; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">12 View in AR13 </button>14</model-viewer>Expected result: Mobile users see a 'View in AR' button that opens the camera and places the 3D model in their real environment.
Complete working example
1{2 "page_header_script": "<script type='module' src='https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js'></script>",3 "html_element_content": "<model-viewer src='DYNAMIC_MODEL_URL' alt='3D product view' camera-controls auto-rotate ar ar-modes='webxr scene-viewer quick-look' shadow-intensity='1' style='width: 100%; height: 100%;'><button slot='ar-button' style='background: #4285f4; color: white; border: none; padding: 8px 16px; border-radius: 4px;'>View in AR</button></model-viewer>",4 "data_model": {5 "Product": {6 "fields": {7 "name": "text",8 "description": "text",9 "price": "number",10 "images": "list of images",11 "model_url": "file (GLB format)",12 "has_3d_model": "yes/no"13 }14 }15 },16 "conditional_visibility": {17 "3D_viewer_group": {18 "condition": "Current Page Product's model_url is not empty",19 "action": "This element is visible"20 }21 },22 "model_viewer_attributes": {23 "camera-controls": "enables drag-to-rotate",24 "auto-rotate": "spins model automatically",25 "ar": "enables AR on mobile",26 "shadow-intensity": "adds ground shadow (0-2)",27 "exposure": "controls brightness (default 1)",28 "field-of-view": "controls zoom level"29 }30}Common mistakes when creating a 3D product viewer in Bubble
Why it's a problem: Using an OBJ or FBX file instead of GLB format
How to avoid: Convert your model to GLB format using a free tool like Blender or the online converter at gltf.report before uploading to Bubble.
Why it's a problem: Forgetting to add the model-viewer script to the page header
How to avoid: Add the model-viewer script tag in Settings → SEO/metatags → Script in header, or at the top of your HTML element.
Why it's a problem: Using very large 3D model files (over 10MB)
How to avoid: Compress your GLB files to under 5MB using tools like gltf-pipeline or Draco compression. Remove unnecessary textures and reduce polygon count.
Best practices
- Use GLB format for 3D models as it packages geometry, textures, and animations into a single file
- Keep model files under 5MB for fast loading, especially on mobile devices
- Add the 'ar' attribute to enable augmented reality preview on supported mobile devices
- Use conditional visibility to hide the 3D viewer for products that do not have model files
- Add a loading poster image that displays while the 3D model loads
- Test on both desktop and mobile browsers to ensure touch controls work correctly
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a 3D product viewer to my Bubble.io e-commerce app. How do I embed Google's model-viewer web component in an HTML element, load GLB files dynamically per product, enable drag-to-rotate and auto-rotate, and add AR preview for mobile users?
Add a 3D product viewer to my product detail page. Use an HTML element with Google's model-viewer component. Load the 3D model from the current product's model_url field. Enable camera controls, auto-rotate, and AR preview for mobile devices.
Frequently asked questions
Where can I get free 3D model files for testing?
Poly Pizza (poly.pizza), Sketchfab, and the Khronos Group sample models repository offer free GLB models. Google also provides sample models in the model-viewer documentation.
Does the 3D viewer work on all browsers?
Yes. The model-viewer component works on Chrome, Safari, Firefox, and Edge on both desktop and mobile. AR features require mobile devices with ARCore (Android) or ARKit (iOS).
Can I animate the 3D model?
Yes. If your GLB file contains animations, model-viewer plays them automatically. Add the 'autoplay' attribute to start animations on load, or use the 'animation-name' attribute to play a specific animation.
How do I add hotspot annotations to the 3D model?
Use model-viewer's hotspot feature by adding div elements with the 'slot=hotspot' attribute inside the model-viewer tag. Position them using data-position and data-normal attributes to anchor them to specific points on the model.
Will the 3D viewer slow down my page?
The model-viewer library is lightweight (about 100KB). Performance depends on your model file size. Keep models under 5MB and use the 'loading=lazy' attribute to defer loading until the viewer is in the viewport.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation