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

# Webflow

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-cover.png" alt=""><figcaption></figcaption></figure>

### Introduction <a href="#introduction" id="introduction"></a>

SwiftXR is a robust platform designed for building and sharing engaging 3D, augmented reality (AR), and virtual reality (VR) encounters on the internet without writing a single line of code. Using the SwiftXR (3D/AR/VR) Integration for Webflow, you can seamlessly incorporate SwiftXR Projects into your Webflow prototypes/websites, allowing the smooth creation of immersive and interactive web experiences.

### Create a Project in SwiftXR <a href="#create-a-project-in-swiftxr" id="create-a-project-in-swiftxr"></a>

* Navigate to the SwiftXR Hub: Begin by visiting the [SwiftXR Hub](https://swiftxr.io/hub).
* Initiate Project Creation: Once on Hub, click the "Create Project" button and enter your desired project name.
* Design and Develop: Utilize the intuitive editor to effortlessly add and customize SwiftXR components, bringing your 3D vision to life.

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-step-1.png" alt=""><figcaption></figcaption></figure>

### Import your 3D asset <a href="#import-your-3d-asset" id="import-your-3d-asset"></a>

* Navigate to the side menu bar, click on the "Files" button and click on the "Import Files" button to import your 3D model.

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-step-2.png" alt=""><figcaption></figcaption></figure>

* Alternatively, you can navigate to the side menu bar, click on the "Components" button and click on the "Stores" button to import your 3D model from our 3D marketplace.

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-step-3.png" alt=""><figcaption></figcaption></figure>

### Publish Your SwiftXR Project <a href="#publish-your-swiftxr-project" id="publish-your-swiftxr-project"></a>

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

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-step-4.png" alt=""><figcaption></figcaption></figure>

### Copy Embed Code <a href="#copy-embed-code" id="copy-embed-code"></a>

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://docs.swiftxr.io/img/plugins/webflow/webflow-step-5.png" alt=""><figcaption></figcaption></figure>

### Integrate SwiftXR into Webflow Websites <a href="#integrate-swiftxr-into-webflow-websites" id="integrate-swiftxr-into-webflow-websites"></a>

* Go to Webflow Dashboard: Open your website where you want to integrate your 3D/AR/VR project.
* Add Embed Component: Locate and add the embed component from Webflow's Elements library.

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-step-6.png" alt=""><figcaption></figcaption></figure>

* Paste Embed Code: First, click on the "Settings" button to change the tag from "div" to "iframe". Then integrate your SwiftXR project by pasting the copied embed code into the "Attributes" field within Webflow.
* **NOTE**: Add each attrribute by clicking the plus button, enter the left hand side of the embed code lines in the **name** field and the right hand side of the embed code lines in the **value** field.

For example:

```
  <iframe 
  title="SwiftXR" 
  frameborder="0" 
  allowfullscreen 
  mozallowfullscreen="true" 
  webkitallowfullscreen="true" 
  allow="fullscreen; autoplay; xr-spatial-tracking; camera; midi; encrypted-media" execution-while-out-of-viewport 
  execution-while-not-rendered 
  web-share 
  width="100%" 
  height="100%" 
  src="https://aquatic-porcupine.swiftxr.app">
  </iframe>
</div>
```

* In the above code snippet:
  * The left-hand side of each line represents the attribute name before the '**=**' sign.
  * The right-hand side of each line represents the attribute value after the '**=**' sign.

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-step-7.png" alt=""><figcaption></figcaption></figure>

### Viewing your Scene in the Web, AR or VR <a href="#viewing-your-scene-in-the-web-ar-or-vr" id="viewing-your-scene-in-the-web-ar-or-vr"></a>

Save and publish the Webflow website and view the link on any device to explore it immersively.

<figure><img src="https://docs.swiftxr.io/img/plugins/webflow/webflow-step-8.png" alt=""><figcaption></figcaption></figure>

### Conclusion <a href="#conclusion" id="conclusion"></a>

Integrate SwiftXR with Webflow to effortlessly integrate 3D elements into your web prototypes, delivering heightened engagement and interactivity for your users. Uncover the potential of leveraging SwiftXR to elevate your Webflow prototypes, transforming your concepts into immersive and interactive realities.


---

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