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

# Cargo

Add or embed 3D, Augmented Reality (AR) and Virtual Reality (VR) content/design to your Cargo 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 Cargo, you can easily integrate SwiftXR Projects into your Cargo 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>
\
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%2FrTx8z8kZMQhDCCuHwR8G%2Fimage.png?alt=media&amp;token=9ac3f90c-3854-4a40-95e8-487b79715272" 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%2F7W5EOaAyU915nARdZIRo%2Fimage.png?alt=media&amp;token=d5ff71e3-f253-40cc-b314-d61d2a4d9283" 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%2FeWSsOrH9LEOAG6tv4TEi%2Fimage.png?alt=media&amp;token=f8846311-c668-4078-9501-974a439ddd81" alt=""><figcaption></figcaption></figure>

**Integrating SwiftXR into Bravenet Website**

* Go to <https://cargo.site> and sign in (or create a free account).
* Choose one from the below templates you wish to work with.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FewBJezSxLmyIRJUFVptO%2Fimage.png?alt=media&amp;token=fce70f70-fb29-4953-9fe2-c97e2528124a" alt=""><figcaption></figcaption></figure>

**Editing your Cargo Website**

* After you have chosen a template, you would be directed to the page below
* Click on “Edit” in the top left corner of your page to enter Cargo’s editing mode.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FDVTvXELiqNOehdcQwUyN%2Fimage.png?alt=media&amp;token=6e274c5b-9944-486a-8710-2ea31121bc67" alt=""><figcaption></figcaption></figure>

**Add an HTML Element**

* In Cargo’s edit mode, you would see in the top right corner the HTML tag (\</>).
* Click on it.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2Fs1NY8dlDDXYyE0xeU9ZQ%2Fimage.png?alt=media&amp;token=d5bf9231-4eb6-4c26-b253-52ffd76f3656" alt=""><figcaption></figcaption></figure>

**Paste your SwiftXR Embed Code**

* Paste your SwiftXR iframe code into the Custom HTML editor box in Cargo.
* Click outside the editor to save the code

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2F627Kig2DY7IgSWIWTt26%2Fimage.png?alt=media&amp;token=4d8922a6-dc56-4271-b9c9-23bc01f167a7" 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%2FS0t5vx0D0Y9LSkof7FhS%2Fimage.png?alt=media&amp;token=92415487-2719-4949-8aea-aa1d824c8b44" alt=""><figcaption></figcaption></figure>

**Copying the URL to your Live Site**

* Click on the URL icon in the right hand side of your page and click on “Cargo URL”
* Copy the URL and click on “OK”.

<figure><img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2F75d2E3TWtTuqGvuHBdm9%2Fimage.png?alt=media&amp;token=17a9a362-9d89-405f-9d76-cbe7ff5fb8d6" alt=""><figcaption></figcaption></figure>

**Viewing your Scene in the Web, AR or VR**

* Paste the link you copied in a different tab and 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%2FFW0wSvDKjjBmUpCPD0Lr%2Fimage.png?alt=media&amp;token=4485b796-dc31-47cc-9dec-5aa9d7f49cb8" alt=""><figcaption></figcaption></figure>

**Conclusion**

Integrating SwiftXR with Cargo makes it easy to embed immersive 3D and AR content into your site. This combination enhances your design with interactive experiences, giving visitors a more engaging and modern way to explore your work.

<br>