SwiftXR Documentation
Get StartedGitHubCommunity
  • 👉 Introduction
  • 🍭 Creating a Project
  • 🧭 Navigate the Interface
    • Left Panel
      • Layers Panel
      • File Manager (Files)
      • Project Settings
      • Video Tutorials
    • Working Area
  • 🎨 Templates
    • 3D
    • Augmented Reality
    • Virtual Reality
    • Face Tracking
    • Image Tracking
  • 🗃️ Components
    • 3D Viewer
      • Actions
      • Postion
      • Size
      • Layout
      • Background
        • Background Image
      • Effects
    • Augmented Reality (AR)
      • Properties (AR)
    • Virtual Reality (VR)
      • Properties (VR)
      • VR Editor
    • 3D Carousel
      • Carousel Options
    • Image Tracking
      • Image Tracking
    • Face Tracking
      • Face Tracking
      • Face Tracking Editor
    • Customizable 3D Viewer
      • Customization Options
      • Variants
    • 3D Text
      • 3D text
      • Generate 3D Text
    • Indexable 3D Viewer (Developers)
      • Indexing Options
    • AR Artwork Viewer
      • Artwork Settings
    • AI Artwork Viewer
      • AI Artwork
      • AI Generator
    • ReadyPlayerMe
      • Avatar Settings
  • 🔌 Plugins
    • WiX
    • Squarespace
    • Shopify
    • WordPress
    • WooCommerce
    • Framer
    • Webflow
    • GoDaddy
    • Zoho
    • Blender
      • Version 4.1 or Below
      • Version 4.2 or Above
    • Canva
    • Figma
    • HubSpot CMS
    • Clo3d
    • Style3d
    • Daz3d
    • Weebly
    • Concrete CMS
    • Dorik
    • Format
    • UCraft
    • Brizy
    • Bubble
    • Tinkercad
  • 🪢 Integrations
    • HTML
    • React and Next.js
    • Svelte
    • Angular
    • Vue
    • Swift
  • 🎮 3D Content Creation
    • 3D Modelling Softwares
      • Blender
      • Maya
      • Sketchup
    • 3D Asset Stores
      • Sketchfab
      • Free 3D
    • 3D Scanning/Capture
      • Luma AI
      • Kiri Engine
  • 💡 How To
    • Image Tracking
    • Best Practices For Image Tracking on SwiftXR
    • Face Tracking
    • Indexable Model Viewer
    • How to Enable Animation in AR on IOS Devices
Powered by GitBook
On this page
  • Introduction
  • Install the Plugin
  • Install the SwiftXR Plugin
  • Integrating SwiftXR into Bubble Website
  • Viewing your Scenes in the Web, AR or VR
  • Conclusion

Was this helpful?

  1. 🔌 Plugins

Bubble

Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Bubble Website

PreviousBrizyNextTinkercad

Last updated 3 days ago

Was this helpful?

Introduction

SwiftXR is a powerful platform for creating and sharing interactive 3D, augmented reality (AR), and virtual reality (VR) experiences on the web. With the SwiftXR (3D/AR/VR) plugin for Bubble, you can easily integrate 3D scenes and models into your Bubble websites, enabling you to create immersive and interactive web experiences.

Install the Plugin

  1. Open your Bubble Project

Launch Bubble and open the editor for your desired project.

  1. Go to Plugins

Click on the Plugins icon in the left-hand sidebar. This opens the list of plugins currently installed in your project.

Install the SwiftXR Plugin

Click the “Add plugins” button, search for “SwiftXR”, and click install to add it to your project.

You can now return to your editor to start implementing the plugin

Integrating SwiftXR into Bubble Website

Start by creating a Project on the SwiftXR platform to bring your 3D vision to life;

  • Design and Develop: Utilize the intuitive editor to effortlessly add and customize SwiftXR components, bringing your 3D vision to life

  • Publish your Project and copy the project link

  • Return to your editor on Bubble.

  • In the left side bar, under “Visual Elements”, drag and drop the SwiftXR Viewer plugin into your workspace.

Then paste your project link in the Published Project Link field

Viewing your Scenes in the Web, AR or VR

You can now preview, explore and publish your project— interacting with your 3D/AR/VR environment in an immersive way.

Conclusion

By integrating SwiftXR with Bubble, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users

See guide:

Step-by-step guide to creating a Project