> For the complete documentation index, see [llms.txt](https://guide.swiftxr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.swiftxr.io/plugins/bubble.md).

# Bubble

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

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FiLLmsQmLkFs5l3Qpczn7%2FWhatsApp%20Image%202025-05-16%20at%2002.46.13%20(1).jpeg?alt=media&amp;token=896aa084-ccf4-4430-96bd-4167e28d580f" alt=""><figcaption></figcaption></figure>

## 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.

2. Go to Plugins

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

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FV1VS3zl3NzEJ1qFXX6WL%2FWhatsApp%20Image%202025-05-16%20at%2002.46.14%20(1).jpeg?alt=media&amp;token=5e51dc1c-bd1f-40a9-83fc-ecbb0545b423" alt=""><figcaption></figcaption></figure>

## Install the SwiftXR Plugin

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

<br>

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FnJ5C5eIg0NIhLxxg7BJi%2FWhatsApp%20Image%202025-05-16%20at%2002.46.15.jpeg?alt=media&amp;token=1ae0dc00-8a34-474c-b912-88b884fe5865" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2Fl9YNokMlVQ4IxkVuD5LD%2FWhatsApp%20Image%202025-05-16%20at%2002.46.14.jpeg?alt=media&amp;token=aeb06d10-4edb-4af2-91d8-94a6e4552fcc" alt=""><figcaption></figcaption></figure>

## Integrating SwiftXR into Bubble Website

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

* See guide:  [Step-by-step guide to creating a Project](https://guide.swiftxr.io/creating-a-project)
* 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

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FFN2aXtfa6WeTxEeEvAge%2FWhatsApp%20Image%202025-05-16%20at%2002.46.13.jpeg?alt=media&amp;token=a7873345-1f9e-452e-8175-171ff3c5b724" alt=""><figcaption></figcaption></figure>

* Return to your editor on Bubble.
* In the left side bar, under “Visual Elements”, drag and drop the SwiftXR Viewer plugin into your workspace.&#x20;

Then paste your project link in the Published Project Link field

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FtyTjpKYjlQij4E4Rlk6a%2FWhatsApp%20Image%202025-05-16%20at%2002.46.14%20(2).jpeg?alt=media&amp;token=8973a2b9-671b-4365-aee1-1148c8d93b1f" alt=""><figcaption></figcaption></figure>

## 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.

<br>

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FYVYCNepx4Yp4cQTFNbgO%2FWhatsApp%20Image%202025-05-16%20at%2002.46.13%20(1).jpeg?alt=media&amp;token=84b78474-5d04-45c8-a2b6-e1e95b69c036" alt=""><figcaption></figcaption></figure>

## 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