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

# Teleporthq

**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 TeleportHQ, you can easily integrate SwiftXR Projects into your TeleportHQ 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="/files/HkTeXzHQSKV3fC94Xl5x" 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="/files/aNfucml8cJddKvtPvLzO" 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="/files/BOCvBbjLI1UWRwX8oSlY" alt=""><figcaption></figcaption></figure>

**Integrating SwiftXR into TeleportHQ Website**

* Go to <https://play.teleporthq.io/> and create an account or log in if you already have one.
* In the TeleportHQ homepage, choose the project that says “Blank(Start from scratch)”

<figure><img src="/files/zjpEJW4C5TPjAAan6OfH" alt=""><figcaption></figcaption></figure>

**Add an HTML Element**

* After selecting the blank project, you would be taken to the page editor.
* In the top left corner of your page, click on the “plus icon (+)”, and scroll down and click on the “code embed (<>)” in the “Elements” drop down

<figure><img src="/files/ys66jzDdtzOlVFgW5kWP" alt=""><figcaption></figcaption></figure>

**Insert Your SwiftXR Embed Code**

* After clicking on the “Code Embed (<>)” icon, a code editor page would appear on your screen.
* Paste your SwiftXR iframe embed code in the code editor and click on the “Save” button below.

<figure><img src="/files/fbTFmizFL21bmpDS05Pg" alt=""><figcaption></figcaption></figure>

**Viewing your Product in the Website**

* After clicking the “Save” button in the code editor, your product would be live on your website.
* Resize and position the embed element as needed to fit your design

<figure><img src="/files/rBVQbUrdbMOXOjPZK0WJ" alt=""><figcaption></figcaption></figure>

**Publishing your Website**

After clicking on the “Publish” button, you would be taken to a page where you would copy the link to your website.
\
Click on the copy to clipboard icon beside the link and paste the link in a different tab.

<figure><img src="/files/fsINwCCwrjK3qT0YmUGF" alt=""><figcaption></figcaption></figure>

* After pasting the link in a different tab, a page would show up asking you for a password authentication.
* Below the link you copied earlier, you would see below the “Password Protection” password, copy and paste it inside and click on the “Unlock” button right beside it.

<figure><img src="/files/fVWwNNXz4Bwonnk71Fn1" alt=""><figcaption></figcaption></figure>

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

* After clicking on the “Unlock” button, you would see you live product and explore it immersively.

<figure><img src="/files/EGKAsX54QrWNEmGk6HcP" alt=""><figcaption></figcaption></figure>

**Conclusion**

Integrating SwiftXR into TeleportHQ is a simple and effective way to add immersive 3D, AR, and VR experiences to your projects. By creating and publishing your SwiftXR project, then embedding the generated code into TeleportHQ through the Embed element, you can seamlessly combine SwiftXR’s interactive content with TeleportHQ’s flexible, no-code website builder. This allows you to enhance your site’s design with engaging, responsive, and futuristic experiences, all without writing complex code

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide.swiftxr.io/plugins/teleporthq.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.