Webstudio

Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Webstudio 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 Webstudio, you can easily integrate SwiftXR Projects into your Webstudio 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

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.

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

Integrating SwiftXR into Webstudio Website

• Go to webstudio.is and create an account or log in if you already have one.

• In the webstudio homepage, choose the option that says “New blank project” in the top right corner of your page.

• After clicking on the “New blank page” button, a page would show up asking you to name your website, give it a name “e.g SwiftXR embedding”.

• Click on “Create Project”.

Add an HTML Element

• After clicking on the “Create Project” button, you would be taken to the Webstudio editor.

• In the editor,click on the plus (+) icon in the top left corner of your page and click on the HTML Embed (</>) under the “Components”.

Insert Your SwiftXR Embed Code

• After clicking on the “HTML Embed”, click on “Settings” in the top right corner of your page.

• You would see a tiny code editor right below the “Settings” panel where you can paste your SwiftXR Embed Code

Viewing your Product in the Website

• After pasting your SwiftXR iframe embed code in the editor, you would automatically see your live product in your website

Publishing your Website

• In the top right corner of your page you would see a “Publish” button, click on it to publish your website.

Viewing your Scene in the Web, AR or VR

• After clicking on the “Publish” button, you would see your SwiftXR experience displayed directly inside your Webstudio site

Conclusion

Integrating SwiftXR into Webstudio is straightforward using the HTML Embed component. By copying your SwiftXR project’s embed code and pasting it into Webstudio, you can quickly bring interactive 3D and XR experiences into your site without extra plugins. Once embedded, you can customize its size, styling, and placement to match your design, then publish to share your XR project with your audience. This makes Webstudio a flexible option for showcasing immersive content powered by SwiftXR.