Add augmented reality features to your Bubble app by embedding AR.js or 8th Wall via HTML elements. AR.js provides free marker-based and location-based AR using the device camera, while 8th Wall offers more advanced surface tracking. Users point their phone camera at a marker or their environment and see 3D models or information overlays — all embedded within your Bubble app pages.
Adding Augmented Reality Features to Your Bubble App
Augmented reality lets users overlay digital content on the real world through their phone camera. This tutorial shows you how to embed AR experiences in your Bubble app — from simple marker-based AR (scan a logo to see a 3D model) to location-based AR (see information anchored to real-world places). You will use open-source libraries like AR.js that work in any mobile browser, no app store installation needed.
Prerequisites
- A Bubble account with an app open in the editor
- A 3D model file in GLB or GLTF format (for 3D AR)
- Basic understanding of HTML elements in Bubble
- A mobile device for testing (AR requires camera access)
Step-by-step guide
Add the AR.js library scripts to your page header
Add the AR.js library scripts to your page header
Go to Settings → SEO / metatags → Script/meta tags in the header. Add the A-Frame and AR.js scripts. A-Frame provides the 3D rendering engine, and AR.js adds the augmented reality tracking on top. These libraries load on the page and enable camera-based AR in the browser without any app installation.
1<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>2<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>Expected result: The A-Frame and AR.js libraries are loaded on your pages.
Create a marker-based AR experience using an HTML element
Create a marker-based AR experience using an HTML element
On the page where you want AR, add an HTML element and size it to fill the page (set width and height to 100%). Paste the A-Frame AR scene code. This creates a camera-based AR view that detects the Hiro marker pattern (a standard AR test marker) and displays a 3D box on top of it. Print the Hiro marker from the AR.js documentation to test.
1<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>2 <a-marker preset='hiro'>3 <a-box position='0 0.5 0' material='color: #4CC3D9;' scale='0.5 0.5 0.5'></a-box>4 </a-marker>5 <a-entity camera></a-entity>6</a-scene>Pro tip: Replace <a-box> with <a-entity gltf-model='url(YOUR_MODEL_URL)'> to display a 3D GLB model instead of a basic shape.
Expected result: When users point their phone camera at the Hiro marker, a 3D blue box appears floating above it.
Create a custom marker for your brand
Create a custom marker for your brand
Instead of the default Hiro marker, create a custom marker from your logo. Go to ar-js-org.github.io/AR.js/three.js/examples/marker-training/examples/generator.html and upload your logo image. The tool generates a .patt marker file. Upload this file to Bubble's File Manager and copy its URL. In your HTML element, replace 'preset=hiro' with 'type=pattern; url=YOUR_PATT_FILE_URL'. Now your AR experience triggers when users scan your logo.
Expected result: Scanning your custom branded marker triggers the AR experience instead of the default Hiro pattern.
Build a location-based AR experience with GPS coordinates
Build a location-based AR experience with GPS coordinates
Location-based AR shows content anchored to real-world GPS positions. Add the AR.js location-based script to your header. Then modify your HTML element to use GPS-based placement instead of markers. Replace the marker-based code with a scene that uses 'gps-entity-place' components with latitude and longitude attributes. For example, place a label or 3D model at your store's GPS coordinates so users can see it through their camera when nearby.
1<a-scene vr-mode-ui='enabled: false' embedded arjs='sourceType: webcam; debugUIEnabled: false;'>2 <a-text value='You are here!' look-at='[gps-camera]' scale='15 15 15'3 gps-entity-place='latitude: 40.7128; longitude: -74.0060;'>4 </a-text>5 <a-camera gps-camera rotation-reader></a-camera>6</a-scene>Expected result: When users open the page on their phone near the specified coordinates, they see AR text floating at the GPS location through their camera.
Connect AR content to your Bubble database
Connect AR content to your Bubble database
Make AR content dynamic by pulling data from your Bubble database. Create a Data Type called 'ARMarker' with fields: name (text), latitude (number), longitude (number), model_url (file), description (text). On your AR page, use Bubble's dynamic data in the HTML element. Use 'Insert dynamic data' inside the HTML content to inject latitude, longitude, and model URLs from your database records. This lets you manage AR content through your Bubble admin panel without editing HTML.
Pro tip: For multiple AR objects, generate the HTML dynamically using a Repeating Group that outputs A-Frame entities, or build the scene HTML in a backend workflow.
Expected result: AR content is driven by your database, so you can add, edit, or remove AR markers from your Bubble admin panel.
Complete working example
1AUGMENTED REALITY IMPLEMENTATION2==================================34Page Header Scripts:5 A-Frame: https://aframe.io/releases/1.4.0/aframe.min.js6 AR.js: AR-js-org AR.js aframe build78Marker-Based AR (HTML element):9 <a-scene embedded arjs>10 <a-marker preset='hiro' OR type='pattern' url='custom.patt'>11 <a-entity gltf-model='url(model.glb)' scale='0.5 0.5 0.5'>12 </a-entity>13 </a-marker>14 <a-entity camera></a-entity>15 </a-scene>1617Location-Based AR (HTML element):18 <a-scene vr-mode-ui='enabled: false' embedded arjs>19 <a-entity gps-entity-place='latitude: X; longitude: Y;'>20 <a-text value='Label' look-at='[gps-camera]'></a-text>21 </a-entity>22 <a-camera gps-camera rotation-reader></a-camera>23 </a-scene>2425Dynamic AR Content (Bubble database):26 Data Type: ARMarker27 Fields: name, latitude, longitude, model_url, description28 29 HTML element uses Insert dynamic data to inject:30 - GPS coordinates from ARMarker records31 - 3D model URLs from ARMarker's model_url field32 - Labels from ARMarker's description field3334Custom Marker Generation:35 Tool: ar-js-org marker training generator36 Input: Logo image → Output: .patt file37 Upload to Bubble File Manager38 Reference in HTML: type='pattern' url='patt_file_url'Common mistakes
Why it's a problem: Testing AR on a desktop browser instead of a mobile device
How to avoid: Always test AR features on a real mobile device. Use Bubble's Preview mode and open the URL on your phone.
Why it's a problem: Not requesting camera permissions before loading the AR scene
How to avoid: AR.js automatically prompts for camera access, but ensure your app is served over HTTPS (Bubble does this by default) as camera access requires a secure connection.
Why it's a problem: Loading very large 3D models in AR scenes
How to avoid: Compress 3D models to under 2MB for AR. Use lower polygon counts and compressed textures for mobile AR experiences.
Best practices
- Use marker-based AR for controlled environments (stores, packaging) and location-based for outdoor experiences
- Keep 3D models under 2MB for smooth AR performance on mobile devices
- Always serve your app over HTTPS — camera access requires a secure connection
- Test on multiple mobile devices and browsers to ensure compatibility
- Provide a fallback for users without camera access — show a static 3D viewer instead
- Store AR content data in Bubble's database so you can manage it without editing HTML code
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add augmented reality to my Bubble.io app. How do I embed AR.js in an HTML element for marker-based and location-based AR? Show me the A-Frame scene code and how to connect AR content to my Bubble database dynamically.
Add augmented reality to my product pages. Embed an AR.js scene in an HTML element that shows a 3D model when users scan a marker with their phone camera. Use the product's model_url field to load the correct 3D model dynamically.
Frequently asked questions
Does AR work in all mobile browsers?
AR.js works in Chrome and Firefox on Android and Safari on iOS. Marker-based AR has the widest compatibility. Location-based AR works best on Chrome for Android and Safari for iOS.
Do users need to install an app for AR?
No. Web-based AR (using AR.js or 8th Wall) runs entirely in the browser. Users just open the page and grant camera permission.
Can I use AR without markers?
Yes. Location-based AR uses GPS coordinates instead of visual markers. For surface-tracking AR (placing objects on tables and floors), use 8th Wall or WebXR — these offer markerless AR but may require a paid license.
How accurate is location-based AR?
GPS accuracy is typically 3-5 meters on mobile devices. This works well for large-scale experiences (city tours, outdoor navigation) but is not precise enough for indoor use.
Is AR.js free to use?
Yes. AR.js is fully open source and free for commercial use. 8th Wall is a paid service with better tracking quality, starting at $99/month for commercial projects.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation