> 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/bravarent.md).

# Bravarent

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

## 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) Integration for Bravenet, you can easily integrate SwiftXR Projects into your Bravenet website, enabling you to create immersive  and interactive web experiences.

**Creating a Project in SwiftXR**

* Navigate to the SwiftXR Hub: Begin by visiting the SwiftXR Hub, or alternatively click on this link: <https://swiftxr.io/hub>&#x20;
* Initiate Project Creation: Once on Hub, click the “Create Project” button and enter your desired project name.
* Design or Develop: Utilize the intuitive editor to effortlessly add and customize SwiftXR components, bringing your 3D vision to life

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FzwVW6xnhzMEkNesPP2PJ%2Fimage.png?alt=media&amp;token=72e06421-64ab-407d-abdb-6b3a6cf0c870" alt=""><figcaption></figcaption></figure>

**Publishing your SwiftXR Project**

* Utilize the editor to create your 3D vision using the SwiftXR components. Once satisfied with your creation, press the “Publish” or “Update” button to make your project live.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FrGpUI3sliqZKHxo7L1AR%2Fimage.png?alt=media&amp;token=7e78eed0-d2e8-4c5b-bc98-2d2dd07b8787" alt=""><figcaption></figcaption></figure>

**Copy Embed Code**

* After publishing, click the dropdown button beside the “Update” button and select “Share.” Within the Share modal, click the “Copy Embed” button to copy the embed code for your project.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FryMrN1Egfqv4OUJGcWQH%2Fimage.png?alt=media&amp;token=461bfd0a-a592-4c24-85f9-78a9f4501a81" alt=""><figcaption></figcaption></figure>

**Integrating SwiftXR into Bravenet Website**

* Go to [bravenet.com](http://bravenet.com) and Log in if you already have an account, if not simply create an account.
* From your dashboard, open your website project.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FPZ8SdNnp5kOkV5rckp8y%2Fimage.png?alt=media&amp;token=2dd30ce6-387b-41d3-821a-72963ccbe3d3" alt=""><figcaption></figcaption></figure>

<br>

**Choose a Template to Start With**\
You would see a lot of templates below, simply select one of them you would like to work with.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FS4EVFqtcnwpt4CHisKXR%2Fimage.png?alt=media&amp;token=b48f430f-9a86-45da-9126-ce1d0171403c" alt=""><figcaption></figcaption></figure>

**Add an HTML Element**

* In the left toolbar, find and select “Custom Code”
* Drag and drop it into the section of your page where you want your 3D/AR model to appear.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FitBKzGn4502SVGUlv9ks%2Fimage.png?alt=media&amp;token=db2abfc9-f765-474a-bb50-efb245e0b417" alt=""><figcaption></figcaption></figure>

**Paste your SwiftXR Embed Code**

* Paste your SwiftXR iframe code into the Custom HTML editor box in Bravenet.
* Click on “Save Changes” below

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FhzVGFXmZ6U9iObnUCOjR%2Fimage.png?alt=media&amp;token=57df0542-c842-4026-936c-df832e0640ec" alt=""><figcaption></figcaption></figure>

**Viewing your Product in the Website**

* After pasting your SwiftXR iframe embed code, you would see the result in the website.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FgEHWQDHIBiDwvXaJyHpN%2Fimage.png?alt=media&amp;token=d8d8527a-ce18-4d15-abfc-892da36f8c62" alt=""><figcaption></figcaption></figure>

**Preview Your Live Site**

* Click on “Site” in the left bottom corner of your screen, it would bring a list of options, click on “Site Managers”

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FOs5XwH7WI8DiH0DZ2LZ0%2Fimage.png?alt=media&amp;token=97da295e-763e-410e-8e53-1e3db5481fe9" alt=""><figcaption></figcaption></figure>

* It would bring a link, copy the link and paste it in a different tab to view your live product.
* Click “Done

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FkmcXo38lplONSDkH2bCy%2Fimage.png?alt=media&amp;token=7c06496f-281b-464f-ab6d-c70d0b250e5b" alt=""><figcaption></figcaption></figure>

Viewing your Scene in the Web, AR or VR

* After pasting the link in another tab, your SwiftXR 3D/AR project should now appear embedded on the page.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FJTfoZDiKnclH2F2tZDe0%2Fimage.png?alt=media&amp;token=c88496b8-1852-4d8f-8fda-f459522e6323" alt=""><figcaption></figcaption></figure>

<br>

**Conclusion**

Bravenet allows SwiftXR integration without needing a paid plan. By using the Custom HTML element, you can easily embed interactive 3D and AR projects anywhere on your site. This makes Bravenet a simple and free way to share immersive content online.

<br>