# 👉 Introduction Welcome to SwiftXR, your all in one no-code 3D, Augmented Reality and Virtual Reality platform ## What is SwiftXR At first glance, one might think this is just another webXR builder, but it's something more. SwiftXR is a lightweight webXR builder framework, which means it allows you to easily drag & drop predefined [`components`](/components) to create a webXR application. By [components,](/components) we mean anything with HTML and WebXR structure. We use [components](/components) everywhere which allows you to create complex webXR applications without any knowledge of coding. ## Why SwiftXR SwiftXR was designed primarily to create simple light-weight webXR applications as quickly as possible with a one-click deploy button and with an affordable pricing plan. Instead of worrying and learning a 3D editor, we introduced draggable set of [components](/components) and a design canvas that is easily customizable. ## ⚡️ Quick Start To showcase the power of SwiftXR we have created some `templates`. * 🎨 Artwork Templates * 📱 Product Showcase * 📚 Educational E-learning Content * 🎂 Birthday Experience You can use them as starting point on your editor. # 🍭 Creating a Project Learn how to easily create SwiftXR projects ## Starting a Project To get started with creating a project in [SwiftXR](https://home.swiftxr.io), click on the Create Project button and give your project a name. Hit the Create button when ready to launch the editor and get started with creating your AR/VR experience.

### Templates [Templates](#templates) are complete projects that help you get started without based on the AR/VR experience you are trying to build. [Click here to view our Templates](/templates)

### Projects The Projects tab highlights the various SwiftXR projects you have **`published,`** and in your **`browser`**. Click on the new project button to create a new project. You can also open recent projects, delete projects from the hub, and also open up the learn tab to view tutorials on how to use swiftXR.

Next [Navigate the Interface](https://docs.swiftxr.io/#/docs/navigate-the-interface?id=navigate-the-interface). # 🧭 Navigate the Interface The SwiftXR editor consists of various components and tools that help you create custom 3D, Augmented Reality (AR) and Virtual Reality (VR) experiences. # Left Panel

| Areas | Description | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Layers Panel | The layers panel shows you a list of all objects added to your canvas. The layers panel uses a parent-child relationship to organize your objects which means a change in the parent object would affect | | File Manager | The File Manager window shows all of the files in your project and is the main way you can navigate, search and also find imported assets. | | Project Settings | The page settings provides you with options to help customize your project name, descriptions and so much more. | | Video Tutorials | Quickly access how to use videos on different components directly in the Editor. | # Layers Panel The layers panel shows you a list of all objects added to your canvas. The layers panel uses a parent-child relationship to organize your objects which means a change in the parent object would affect

# File Manager (Files) The File Manager window shows all of the files in your project and is the main way you can navigate, search and also find imported assets.

Feature	Description
Search Bar	Use the search bar to search for a file within your project or filter through your assets based on your search query.
Upload	You can use the upload button in the asset manager to bring in various files into your project.
Add to Canvas	Add the selected file to the canvas
Download	You can use this submenu to download the object locally
Delete	This would delete the object from your asset manager

# Project Settings The page settings provides you with options to help customize your project name, descriptions and so much more.

Feature	Description
Project Name	This represents the name that would be shown when you share your project after publishing. You can always edit the name of your project via this field.
Project Description	This represents the description given that would be shown when you share your project after publishing. You can always edit the description of your project via this field.
Project Icon	This represents the icon used when sharing your project. You can change the project icon by typing in a URL link to the icon.
Icon Preview	This shows a preview of the icon with the URL link provided in the project icon.

# Video Tutorials Quickly access how to use videos on different components directly in the Editor.

# Working Area The workspace can be found in the middle of the SwiftXR editor. It houses the canvas used for designing and viewing your project.

| Areas | Description | | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | | [Left Panel](/navigate-the-interface/left-panel) | This consist of Layer panel, file manager and others that allows to setup your project. | | Canvas/3D Viewer | This is where your object and changes made would be. | | Right Panel | This contains Design and Properties customization for the canvas and 3D objects [Click here to view](/components/3d-carousel#design) | # 🎨 Templates This section provides an overview of the available templates in SwiftXR, grouped by functionality. Each template includes key features, supported use cases, and customization options. # 3D The 3D templates are designed for rendering and interacting with 3D models on web pages, providing customizable controls for rotating, zooming, and interacting with objects.

Template Name	Features	Use Case
Immersive Experience Collection	Basic 3D object rendering, together with AR and VR experiences	Interactive 3D experiences

# Augmented Reality These templates allow users to overlay 3D objects onto the real world through AR-enabled devices. They are ideal for interactive experiences like trying products in AR or visualizing 3D models in real-life settings. | Template Name | Features | Use Case | | -------------------------------- | ------------------------------------------------------------- | --------------------------------------- | | 3D Product Showcase | Place a 3D product in AR | Retail, e-commerce, demos | | Product Customization | Customizable products in AR | Retail, marketing campaigns | | Dimension Viewer | Display product dimensions in 3D and AR | Retail, furniture, appliances | | Birthday Celebration | Interactive AR experience for events | Social media, birthday greetings | | Artwork Exhibit | Display 3D artwork in AR | Art galleries, exhibitions | | Art Gallery Exhibit | Showcase multiple artworks in AR | Virtual galleries, artist portfolios | | Professional Portfolio | 3D models in professional portfolios | Career presentations, artist portfolios | | Education E-Notebook | Educational content in AR | Educational apps, e-learning | | Multiple Product Showcase | Display multiple products in AR | Retail, exhibitions | | Immersive Experience Collections | Create full immersive AR experiences, together with 3D and VR | Virtual showrooms, experiences | # Virtual Reality **These templates** provide immersive experiences where users can interact with 3D environments through VR headsets. These templates are used for applications like virtual showrooms, tours, and product experiences.

Template Name	Features	Use Case
Virtual Building Walkthrough	Explore virtual buildings in VR	Real estate, architecture
VR Immersive Experience Collections	Create immersive VR experiences, together with 3D and AR	Virtual showrooms, product demos

# Face Tracking **These templates** enable interactive 3D models or AR filters to be applied to the user's face in real time. These templates are commonly used in filters, virtual makeup try-ons, and face-based interactions.

Template Name	Features	Use Case
Glasses Try-on	Virtual glasses try-on using face tracking	Fashion, retail, e-commerce
Hat Try-on	Virtual hat try-on using face tracking	Fashion, retail, e-commerce
Face Mask Effect	Apply 3D face mask effects	Social media, AR filters

# Image Tracking **These templates** allow users to track physical images in the real world and overlay digital content (like 3D models or animations) on top of them in AR environments.

Template Name	Features	Use Case
Image Tracking 3D	Track an image and overlay 3D models	AR marketing, product packaging
Image Tracking Video	Track an image and overlay video content	AR posters, video ads

# 🗃️ Components This section provides an overview of the key components available in SwiftXR for designing and developing immersive experiences. Each component is designed to simplify the creation process and enhance the interactivity of your projects. # 3D Viewer Add interactive 3D content to your applications

## Introduction The 3D Viewer component in SwiftXR allows you to seamlessly display and interact with 3D models directly within your applications. This components supports a wide range of 3D file formats and provides intuitive controls for users to rotate, zoom, and pan models, offering a detailed exploration of 3D content. Additionally, the 3D Viewer offers customizable backgrounds and lighting options to enhance the visual presentation of your models.\ \ All components in SwiftXR are extended from the 3D Model Viewer.

## Design

Topic	Description
Actions	Customize design options based on selected state
Position	Set the position of the selected component in relation to the canvas
Size	Set the width and height properties of the selected component
Layout	Set the layout of the selected component
Background	Set the background properties of the selected component
Effects	Add additional effects such as transitions to selected component

## Properties

Topic	Description
Upload 3D Object	Add 3D Object to be used
General Settings	Configure general user interaction and animation settings with the 3D model
3D Object Dimensions	Configure specified units of measurement for the 3D model
Customization Options	Configure multiple variants of a 3D model by changing the colour and textures of its assigned materials
Lighting Settings	Configure lighting and shadow settings. Additional option for custom HDR backgrounds for the 3D model
Camera Settings	Adjust camera field of view, zoom level, position and orientation.
Hotspot Labels	Add multiple labels o various parts of the 3D model
Advanced Settings	More options to customize user experience

# Actions Customize design options based on selected state

Topic	Description
Select	Set state to select to configure the design properties when the user clicks on the selected component
Hover	Set state to hover to configure the design properties when the user hovers on the selected component

# Postion Customize the position of your 3D object

Topic	Description
Type	This sets the position of the Item in relation to the parent container. -Relative -Absolute -Fixed -Sticky

# Size Customize the size of your design

Topic	Description
Width	This adjusts the width of the container in relation to the canvas. it is available in percentage, pixel and view width.
Height	This adjusts the Height of the container in relation to the canvas. it is available in percentage, pixel and view width.
Min Width	This is the minimum width the object container should have in relation to the canvas. it is available in percentage, pixel and view width, view height, em, rem.
Min Height	This is the minimum width the object container should have in relation to the canvas. it is available in percentage, pixel and view width, view height, em, rem.
Max Width	This is the maximum width the object container should have in relation to the canvas. it is available in percentage, pixel and view width, view height, em, rem.
Max Height	This is the maximum height the object container should have in relation to the canvas. it is available in percentage, pixel and view width, view height, em, rem.

# Layout Customize your 3D Layout to fit your purpose.

Topic	Description
Direction	Set state to select to configure the design properties when the user clicks on the selected component
Distribute	Set state to hover to configure the design properties when the user hovers on the selected component
Align
Spacing
Padding
Margin

# Background Customize your own backgroud.

Topic	Description
Color	Allows you to choose your background color
Border Radius	Allows you to add border radius to the exported 3D item.
Opacity	This allows you to adjust the transparency of the background
Border	This adds border to the
Box Shadow
Image

# Background Image Customize your own backgroud.

Topic	Description
Color	Allows you to choose your background color
Border Radius	Allows you to add border radius to the exported 3D item.
Opacity	This allows you to adjust the transparency of the background
Border	This adds border to the
Box Shadow
Image

# Effects Customize design options based on selected state

Topic	Description
Transition	Set state to select to configure the design properties when the user clicks on the selected component
Transform	Set state to hover to configure the design properties when the user hovers on the selected component

# Augmented Reality (AR) Add interactive 3D content to your applications

## Introduction The AR Viewer component extends the 3D viewer component but with added functionality. That is it allows for users to view your project in their space. \ \ All components in SwiftXR are extended from the 3D Model Viewer.

## Design This extends the 3D Viewer Designs [Click here to View](/components/3d-viewer#design) ## Properties This extends some properties from the 3D Viewer [Click here to View](/components/3d-viewer#properties), unique properties are listed below

Topic	Description
Augmented Reality (AR)	This provides customization to how you want your product to be viewed in their space

# Properties (AR) Customize how your viewers see the 3D object in their space.

Features	Description
Detection	Select the surface type where the AR content will be placed. Choose 'Floor' for horizontal surfaces or 'Wall' for vertical surfaces.
Launcher	Choose how to launch AR content. 'Native' uses the device's built-in AR capabilities, while 'WebXR' uses web-based AR.
Size Control	Select how the size of the AR content should be controlled. 'Adjustable' allows resizing, while 'Fixed Size' keeps it constant.
Custom QR Code	Select if you want your model to have QR code added
QR Code Header	Enter the title of the QR code
QR Code Content	Enter the content you want to be displayed when your users scan the code This feature is only available on mobile or tablet devices. Scan QR code to open the project on your device, then tap on the AR icon.

# Image Tracking Image tracking is a technology used to identify and follow specific images or objects in real-time, often utilizing computer vision techniques. It’s commonly employed in applications that supports augmented reality (AR), where digital content is overlaid onto the real world based on the detected images.

## To create Image Tracking To create image tracking on SwiftXR, click on [components](/components), select 3D then click on image tracking feature in the editor.

## Upload your 3D Model This is the part where you upload 3D model of the object you want to make appear in real time. You can upload your custom 3D model from your device, search Sketchfab 3D store or request a custom [3D model from SwiftXR](/3d-content-creation).

## Upload your Target Image This is where you add your target image. This will enable your model to appear in real world once detected by your mobile device visual elements and if it supports AR, you can then view in [Augmented reality. ](/components/augmented-reality-ar) To upload your Target image, go over to the Properties, select Image tracking, click on add image. Upload your image from your device.

## Adjust 3D object on Image This allows you to properly position your 3D model on your image. Click on adjust 3D object on image. In the editor, use the XYZ tabs to move your object forward or backward, downward and upwards and sideways. Click on All to adjust the size of the object. Click on save to save your changes.

## Preview and Publish your Project Click on the drop down icon beside the publish tab to preview your project and view in AR. Place your camera on the image and your model should appear. Once you are satisfied with your placement and position. Go ahead to publish your project.

# Virtual Reality (VR) Add interactive 3D content to your applications

## Introduction The VR Viewer component extends the 3D viewer component but with added functionality. That is it allows for users to view your project in their space. \ \ All components in SwiftXR are extended from the 3D Model Viewer.

## Design This extends the 3D Viewer Designs [**Click here to View,**](/components/3d-viewer#design) ## Properties This extends some properties from the 3D Viewer [Click here to View](/components/3d-viewer#properties), unique properties are listed below

Topic	Description
Properties (VR)	This provides customization to how you want your product to be viewed in their space

# Properties (VR) Customize how your viewers see the 3D object in their space.

Features	Description
VR Editor	Opens an Editor so you can adjust how the 3D Object would look in the 3D space, this affects size, position and rotation.
Launch Button	Choose how to launch AR content. 'Native' uses the device's built-in AR capabilities, while 'WebXR' uses web-based AR.
Hand Model	Select how the size of the AR content should be controlled. 'Adjustable' allows resizing, while 'Fixed Size' keeps it constant.
VR Camera	Select if you want your model to have QR code added

# VR Editor Customize how your viewers see the 3D object in their space.

Features	Description
Size	Adjust how you want the size of your 3D object to be in the VR Space.
Position	Adjust the position of your Object along the X, Y and X axis.
Rotation	Rotate your 3D object along the X, Y and Z axis.

# 3D Carousel Add interactive 3D content to your applications

## Introduction The 3D Carousel component extends the 3D viewer component but with added functionality. The 3D carousel as the name implies allows for you to generate carousel of 3D items. \ \ All components in SwiftXR are extended from the 3D Model Viewer. ## Design This extends the 3D Viewer Designs [Click here to View,](/components/3d-viewer#design)

## Properties This extends some properties from the 3D Viewer [Click here to View](/components/3d-viewer#properties), unique properties are listed below

Topic	Description
Carousel Options	This properties allows you to add items to your carousel and also customize your carousel Items

# Carousel Options Customize how your viewers see the 3D object in their space.

Features	Description
Display	Select how product variants are displayed in the carousel. options: - Left and Right Handles: This allows the carousel to changed by left and right items. - Color Variants: This allows the carousel to be changed based on color variants of the entries.
Loop	Enable this option to loop the gallery in a continuous carousel.
Add New Entry	Allows you to add a new 3D object to the carousel

# Image Tracking Add interactive 3D content to your applications

## Introduction The Image Tracking component extends the 3D viewer component but with added functionality. That Image Tracking allows for you to attach your 3D object to an image so it tracks it and displays on the image when the Object is pointed on the image\ \ All components in SwiftXR are extended from the 3D Model Viewer.

## Design This extends the 3D Viewer Designs [Click here to View,](/components/3d-viewer#design) ## Properties This extends some properties from the 3D Viewer [Click here to View](/components/3d-viewer#properties), unique properties are listed below

Topic	Description
Image Tracking	Allows for you manage the image to track and other customizations.

# Image Tracking Customize how your viewers see the 3D object in their space.

Features	Description
Add Image	Upload the image that would be tracked
Tracking Speed	Set the speed at which the system processes image tracking. Higher values may improve responsiveness.
Auto Launch	Enable this option to automatically start image tracking when the application loads.
Audio/Video Options	Enable to add audio or video that plays when the image marker is detected.

# Face Tracking Add interactive 3D content to your applications

## Introduction The Face Tracking component extends the 3D viewer component but with added functionality. That is it allows for users to view your project in their space. \ \ All components in SwiftXR are extended from the 3D Model Viewer.

Topic	Description
Face Tracking	Allows you to set how the face tracking would work.

# Face Tracking Customize how your viewers see the 3D object in their space.

Features	Description
Face Tracking Editor	Opens an Editor so you can adjust how the 3D Object would look in relation to the face/occlusion, this affects size, position and rotation.
Occlusion Type	Choose the type of occlusion for face tracking. 'Head' occludes only the head, while 'Human' occludes the entire body.
Adjust 3D Object on Face	This opens the Face Tracking Editor

# Face Tracking Editor Customize how the 3D object is tracked on the face.

Features	Description
Size	Adjust how you want the size of your 3D object to be in relation to the face.
Position	Adjust the position of your Object along the X, Y and X axis.
Rotation	Rotate your 3D object along the X, Y and Z axis.

# Customizable 3D Viewer Add interactive 3D content to your applications

## Introduction The Customizable 3D Viewer component extends the 3D viewer component but with added functionality. The Customizable 3D viewer allows you to add personalized elements to your 3D objects e.g adding variants to your 3D Object and also editing the Material and Texture\ \ All components in SwiftXR are extended from the 3D Model Viewer.

Topic	Description
Customization Options	This provides customization to how you want your product to look like

# Customization Options Customize how your viewers see the 3D object in their space.

Features	Description
Enable	Toggles the Customization option.
Show Dropdown	Toggles the Dropdown on the 3D Scene.
Material	Allows you switch between materials available to the 3D object.
Label	Edit the Label of the 3D Object.
Add New Variant	Allows you to create multiple variants of the same 3D object.

# Variants Customize how your viewers see the 3D object in their space.

Features	Description
Material Color	Allows you select and customize the color of your 3D object.
Texture Settings (Tiling)	Adjust the tiling of the texture on the material.
Add Base Texture Image	Upload Base Texture Image (Supported formats include JPEG, PNG, GIF, WEBP and SVG.)
Add Normal Map Image	Upload Image Map for the 3D object.

# 3D Text Create 3D Text with SwiftXR

## Introduction The 3D Text component extends the 3D viewer component but with added functionality. The 3D Text allows you to create 3D Text and add it to your scene.\ \ All components in SwiftXR are extended from the 3D Model Viewer.

Topic	Description
3D Text	Allows you to create new 3D text objects.

# 3D text Customize how your viewers see the 3D object in their space.

Features	Description
Generate 3D Text	Open the 3D text editor for you to generate custom 3D text for your screen.

# Generate 3D Text Customize how your viewers see the 3D object in their space.

Features	Description
Color	Allows you change the font color.
Font Style	Allows you to choose your font style.
Size	Adjust the size of text.
Depth	Controls the Depth of the text along its sides.
Thickness	Controls the thickness of the Object and spacing withing text.
Smoothness	Controls how smooth the bezels of the text is.

# Indexable 3D Viewer (Developers) Add interactive 3D content to your applications

## Introduction The Indexable 3D Viewer component extends the 3D viewer component but with added functionality. This is an Individual product publishing identification feature that enables each asset to be called uniquely to an assigned space when the project is published.\ \ All components in SwiftXR are extended from the 3D Model Viewer.

Topic	Description
Indexing Options	This provides cutomization to how your Indexing should be handled.

# Indexing Options Customize how your viewers see the 3D object in their space.

Features	Description
Add New Entry	Toggles the Customization option.
Url Param Name	This is the custom name you give to the parameters on your url example: https://****.swiftxr.app?swf=1 here "swf" is the parameter for the indexed entries.
Export CSV	Allows you to export the list of all entries added as a CSV file

# Face Tracking Face detection or tracking is a computer technology utilized in various applications to identify human faces in digital images. It also refers to the psychological process by which humans recognize and focus on faces within a visual scene.

## To Create a Face Tracking Project on SwiftXR Click on 3D under components and select the Face tracking feature.

Upload a 3D model of your desired virtual element (either a face glass or a necklace or a earring or even a cap). You can upload a custom 3D model of your choice or simply request for one on the platform.

## Adjust Object on Face On the right hand side of the editor click on properties and select Face Tracking. Select adjust object on face. In the editor use the “All” panel under size to resize your 3D object to fit the face model. Then to adjust the position use XYZ control panel to move your object around appropriately.

Click on “save” when you are done: ## Preview and Publish your Project Click on the drop down icon beside Publish to preview your project and view in AR. Place your camera on your face and your glasses should appear. Once you are satisfied with your fittings, go ahead to publish your project.
# Indexable Model Viewer This explains how you can build a project using the indexable model viewer on SwiftXR This is an Individual product publishing identification feature that enables each asset to be called uniquely to an assigned space when the project is published.

To give a clearer explanation, we will guide you through the steps to publish an e-commerce website featuring 3D models using SwiftXR. For each product on sale, you will import 3D models into the SwiftXR canvas, assign them a unique model ID, and link them with a **Model Swap Parameter** for easy model management. This will allow users to swap between models on the published project. We will walk you through how to: 1. [Add models to the canvas.](/components/3d-viewer) 2. Assign model IDs and a Model Swap Parameter. 3. Publish the project with a URL to view each model. 4. Integrate the project into a website using iframe. ### Step 1: Access the Indexable Model Viewer (IMV) 1. In the SwiftXR platform, navigate to the **Design Components**. 2. Go to [**3D Viewer Components**](/components/3d-viewer) and select [**Indexable Model Viewer (IMV)**](/components/indexable-3d-viewer-developers). 3. Drag and drop the **IMV** tab into your canvas. This is where you will add your 3D models. Upon adding, you will see a default asset (e.g., a box) displayed to show the viewer is active.

### Step 2: Set Up Indexing and Model Swap Parameters 1. On the right-hand side, click the **PROPERTIES** tab. 2. Scroll to the **Indexing Settings** section. Here, you will see the **Model Swap Parameter** and the **Add Entry** button. * The **Model Swap Parameter** is a class index that will house the names of all models in the indexable model viewer. * By default, it is named “swf,” but this can be edited by the user. 3. Click the **Add Index Model** button to add your models. For each model added, you will see an **Index ID**. This ID is unique to each model and will be used in the URL to access the specific model. 4. If you wish to rename the **Model Swap Parameter**, you can change it from the default “swf” to something more relevant. In this tutorial, we’ll use “user” as the new parameter.

### Step 3: Add Your 3D Models

1. To add your models, click the **Add Entry** button. 2. Drag and drop your 3D models (in `.glb,.gltf,fbx, obj, sti, dae and folders,` format) into the box labeled “Paste link or drag glb…”. * Each time you add a model, it will be assigned a unique **Index ID** (starting from 1). In this example, the first model will have an Index ID of “1”, the second model “2”, and so on. ### Step 4: Publish the Project 1. Once all models are added, click the **Publish/Update** button. 2. Upon successful publication, a web link will be generated. You can access each indexed model individually using the following format: ```ruby https://your-project-link.swiftxr.app/?[Model Swap Parameter]=[Index ID] ``` For example, if your **Model Swap Parameter** is set to “user” and the **Index ID** of the first model is “1”, your link will look like this: ```ruby https://bead-christmas.swiftxr.app/?user=1 ``` 3. To view other models, simply replace the **Index ID** with “2” or “3” to display the respective models. For instance, to view the second model: ```ruby https://bead-christmas.swiftxr.app/?user=2 ``` #### Step 5: Embed the Project into a Website 1. After publishing your project, you can integrate it into your website. To do this, click on the **Copy Embed** button located at the top of the web address modal. 2. Paste the generated iframe embed code into your website’s HTML file, and the 3D model viewer will be displayed on your page. # AR Artwork Viewer Spice up your Art work with AR Artwork Viewer

## Introduction The AR Artwork Viewer component extends the 3D viewer component but with added functionality. The AR Artwork Viewer component allows you to upload your 2D Artwork and converts it to 3D which can be viewed using AR or in VR also.\ \ All components in SwiftXR are extended from the 3D Model Viewer.

Topic	Description
Artwork Settings	Allows you to customize your artwork

# Artwork Settings Customize your generated 3D Artwork

Features	Description
Add Artwork Image	Upload Your Artwork
Frame Color	Allows you to change the frame color of the artwork
Artwork Filter Color	Adjust the filter color of art work

# AI Artwork Viewer Add 3D Art Work to your applications

## Introduction The AR Art Work Viewer extends the 3D viewer component but with added functionality. The AR Artwork is a component that allows you to import 2D images and convert them to a 3D Art work that you can use in your space\ \ All components in SwiftXR are extended from the 3D Model Viewer.

Topic	Description
AI Artwork	Use our powerful AI tool to generate 3D Art
Artwork Settings	This extends the Artwork Settings Click here to View

# AI Artwork Generate 3D Artwork with our powerful AI Tool.

Features	Description
Open AI Generator	Utilize the AI generator to generate Artwork

# AI Generator Generate Artwork with our AI generator

Features	Description
Prompt Box	Enter your prompt to generate Artwork e.g a dancing bunny
Generate	Click on Generate to create Artwork with our AI tool

# ReadyPlayerMe Create 3D Customizable Avatars

## Introduction The ReadyPlayerMe component extends the 3D viewer component but with added functionality. This component allows you to create amazing avatar for your games.\ \ All components in SwiftXR are extended from the 3D Model Viewer.

Topic	Description
Avatar Settings	This provides customization to how you want your ReadPlayerMe Avatar to look like.

# Avatar Settings Customize how your viewers see the 3D object in their space.

Features	Description
Target	Choose the gender of the avatar
Animation	Select from a list of movements you want the avatar to perform.
Open Avatar Creator	This opens an editor where you can create new avatars.

### Avatar Creator

# 🔌 Plugins Access SwiftXR’s potential with plugins for easy 3D, AR, and VR integration into your preferred content management systems and development environments. # Big Commerce Add or embed 3D, Augmented Reality (AR) and Virtual Reality (VR) content/design to your Bigcommerce 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 Bigcommerce, you can easily integrate SwiftXR Projects into your Bigcommerce stores/websites, 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: * 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 Bigcommerce Store * Go to Bigcommerce login or alternatively, click on this link: * Enter your store credentials and access your store admin dashboard. * From your Bigcommerce dashboard, navigate to “Products” and click on “Add new”

## Add essential information about your Product Describe how your product would appear in the Storefront which includes the product name, the quantity of such product and so on

## Add your SwiftXR Embed Code * In the description below, after describing your product, in the top right corner, you’d see an HTML symbol that looks like this “<>”, click on it and embed your SwiftXR code in it. * When done, click on “Save” and then click on “View storefront” to explore your product.

## Click on your Product from the Storefront * After clicking on “View Storefront”, it would direct you to this page where you would see your product, you will click on it

## Viewing your product on the Storefront * After clicking on your product, you will be redirected to this page below where you can see what your product looks like in the Storefront

## Experience your Product in 3D/AR * You can now view the product immersively with the help of SwiftXR in making the product in a 3D format, enabling you to see all the sides of the product.

## Conclusion By embedding SwiftXR into your Bigcommerce store, you can provide customers with an interactive 3D and AR shopping experience. Whether you add it through the page builder, custom fields, or theme files, the integration allows shoppers to explore your products in details before making a purchase. This not only improves customers engagement but can also increase conversion rates and reduce product returns. # 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: * 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 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.

**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.

**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.

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

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

**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”

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

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.

**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.
# Brizy Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Brizy 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 Brizy, you can easily integrate SwiftXR Projects into your Brizy websites, enabling you to create immersive and interactive web experiences ## Creating a Project in SwiftXR Before starting, ensure you have a [SwiftXR account](https://home.swiftxr.io/) * Navigate to [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

## Publishing your SwiftXR Project Utilize the editor to create your 3D vision using the SwiftXR components. Once satisfied with your creation, click on the "Publish" or "Update" button to make your project live.

## Copy Embed Code After publishing, click the dropdown icon beside the "Update" button, select "Embed Code” from the listed options and copy the embed code by clicking on the "Copy" button

## Integrating SwiftXR into Brizy Website * Launch the editor of your Brizy website/prototype in which you want to integrate 3D/AR/VR. * Add Embed Component: Click on the (+) button in the column where you want to add your embed code; drag and drop the “Embed” element from the left sidebar into your column, click on embed field and choose the first option icon representing “Embed”. * Paste Embed Code: Paste your Embed code in the empty field provided.

## Viewing your Scenes in Web, AR or VR Update and Publish your Project on Brizy, and view the link on any device to explore it immersively.

## Conclusion By integrating SwiftXR with Brizy, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Brizy prototypes and bring your ideas to life in an immersive and interactive way.
# Blender Export and Embed Blender Scenes in 3D, AR, and VR Experiences 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) Add-On for Blender, you can # Version 4.1 or Below Export your Blender scenes for the web with SwiftXR's (3D/AR/VR) Add-On [Download Add-on](https://swiftxr-static-assets.nyc3.digitaloceanspaces.com/blender-add-on%2Fswiftxr-blender-addon-1.0.2.zip)

### 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) Add-On for Blender, you can easily export your 3D scenes and models directly into the SwiftXR platform, enabling you to showcase your work to clients and colleagues in an immersive, interactive format. ### Installing the Add-On To get started, download the SwiftXR (3D/AR/VR) Add-On for Blender from [here](https://swiftxr-static-assets.nyc3.digitaloceanspaces.com/blender-add-on%2Fswiftxr-blender-addon-1.0.2.zip). Once you've downloaded the Add-On, open Blender and navigate to Edit > Preferences > Add-ons. Click on the "Install" button and select the swiftxr-exporter.py file.

### Setting up your API Key To generate an API key, you'll first need to create a SwiftXR account (if you don't have one already). Once you've created your account, navigate to the [SwiftXR Settings](https://swiftxr.io/hub/account) page and click the "Create API Key" button to generate a new API key. Copy the API key and input it into the SwiftXR Exporter Blender preference.

### Setup Up your SwiftXR Domain In your [SwiftXR Settings](https://swiftxr.io/hub/account) , configure your custom domain to ensure seamless access to your projects. Once set up, your projects will be available at: `.swiftxr.site/` This step simplifies sharing and improves accessibility for your immersive experiences!

### Exporting your Scene After you've created your 3D scene in Blender, it's time to export it for use in SwiftXR. Click on File > Export > SwiftXR (3D/AR/VR) Viewer to bring up the SwiftXR Exporter options. Here, you can specify the project name (which will be used to generate the website URL), the export mode (3D or AR), the assets to include, and the compression level.

### Viewing your Scene in the Web and AR Once your project has been successfully exported, SwiftXR will automatically open a URL for your project. You can share this URL with others to view your 3D scene in the web or augmented reality (if you selected the AR export mode).

### Conclusion With the SwiftXR (3D/AR/VR) Add-On for Blender, you can quickly and easily export your 3D scenes for use on the web and in AR, bringing your designs and creations to life in an interactive and immersive format. If you encounter any issues, be sure to send an email to or visit our [discord page](https://discord.gg/hT3zuJgQAw) for live support. # Version 4.2 or Above Export your Blender scenes for the web with SwiftXR's (3D/AR/VR) Add-On [Download Add-on](https://github.com/swiftXR/swiftxr-blender-plugin/archive/refs/tags/1.0.3-patch.zip)

### 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) Add-On for Blender, you can easily export your 3D scenes and models directly into the SwiftXR platform, enabling you to showcase your work to clients and colleagues in an immersive, interactive format. ### Installing the Add-On To get started, download the SwiftXR (3D/AR/VR) Add-On for Blender from [here](https://github.com/swiftXR/swiftxr-blender-plugin/archive/refs/tags/1.0.3-patch.zip). Once you've downloaded the Add-On, open Blender and navigate to Edit > Preferences > Add-ons. Click on the "Install" button and select the swiftxr-blender-plugin-x.x.x.zip file.

### Setup Up your SwiftXR Domain In your [SwiftXR Settings](https://swiftxr.io/hub/account), configure your custom domain to ensure seamless access to your projects. Once set up, your projects will be available at: `.swiftxr.site/` This step simplifies sharing and improves accessibility for your immersive experiences!

### Conclusion With the SwiftXR (3D/AR/VR) Add-On for Blender, you can quickly and easily export your 3D scenes for use on the web and in AR, bringing your designs and creations to life in an interactive and immersive format. If you encounter any issues, be sure to send an email to or visit our [discord page](https://discord.gg/hT3zuJgQAw) for live support. # Bubble Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Bubble 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) plugin for Bubble, you can easily integrate 3D scenes and models into your Bubble websites, enabling you to create immersive and interactive web experiences. ## Install the Plugin 1. Open your Bubble Project Launch Bubble and open the editor for your desired project. 2. Go to Plugins Click on the Plugins icon in the left-hand sidebar. This opens the list of plugins currently installed in your project.

## Install the SwiftXR Plugin Click the “Add plugins” button, search for “SwiftXR”, and click install to add it to your project.

You can now return to your editor to start implementing the plugin

## Integrating SwiftXR into Bubble Website Start by creating a Project on the SwiftXR platform to bring your 3D vision to life; * See guide: [Step-by-step guide to creating a Project](https://guide.swiftxr.io/creating-a-project) * Design and Develop: Utilize the intuitive editor to effortlessly add and customize SwiftXR components, bringing your 3D vision to life * Publish your Project and copy the project link

* Return to your editor on Bubble. * In the left side bar, under “Visual Elements”, drag and drop the SwiftXR Viewer plugin into your workspace. Then paste your project link in the Published Project Link field

## Viewing your Scenes in the Web, AR or VR You can now preview, explore and publish your project— interacting with your 3D/AR/VR environment in an immersive way.

## Conclusion By integrating SwiftXR with Bubble, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users # 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: \ 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.

**Integrating SwiftXR into Bravenet Website** * Go to and sign in (or create a free account). * Choose one from the below templates you wish to work with.

**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.

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

**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

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

**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”.

**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.

**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.
# Canva Generate and embed 3D model images, GIFs, and PNGs in Canva with ease.

### 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 Snap Plugin for Canva, you can easily export your 3D scenes and models as pictures or gifs from the SwiftXR Platform directly into your Canva project, enabling you to showcase your work to clients and colleagues in an immersive, interactive format. ### Installing the Plugin To get started, Click on "Apps" and search for "SwiftXR 3D Snap" from the Canva Apps Marketplace. Once you've installed the App, the SwiftXR Icon should appear on the bottom of the Canva sidebar.

### Creating a 3D Snap After you have tried out the default snaps, it is time to create your own. #### Go to the SwiftXR Hub Click the "Create your Snap" button and it should open the SwiftXR hub where you can create a snap.

#### Create a Project On the SwiftXR Hub, Create a new project and import your 3D model or download from our 3D stores.

#### Generate 3D Snap On the right sidebar, click "Generate Image" to create a 3D snap or "generate GIF" to create a GIF.

### Viewing your 3D Snaps in Canva Once you have created your snap, select it from the app sidebar and it would be added to your canvas.

### The Settings Page The API Key allows you to manage your snaps, if you have multiple SwiftXR accounts.To generate an API key, you'll first need to create a SwiftXR account (if you don't have one already). Once you've created your account, navigate to the SwiftXR Settings page and click the "Create API Key" button to generate a new API key. Copy the API key and click the key icon under the search bar, paste the API key into the text field and click the "Save" button.

### Conclusion With the SwiftXR 3D for Canva, you can quickly and easily generate 3D Snaps for you to use on Canva , bringing your designs and creations to life in an interactive and immersive format. If you encounter any issues, be sure to send an email to or [discord page](https://discord.gg/hT3zuJgQAw) for live support. # Concrete CMS Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Concrete 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 Concrete CMS, you can easily integrate SwiftXR Projects into your Concrete websites, 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](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.

### 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 Weebly Websites * Launch ConcreteCMS and open the website where you want to integrate your 3D/AR/VR project. * Copy the embed Html Code from SwiftXr. * Click on the plus button on the te.

* Paste Embed Code: Seamlessly integrate your SwiftXR project by pasting the copied embed code into the HTML field within the Editor.

### Viewing your Scene in the Web, AR or VR Save and publish the Weebly website and view the link on any device to explore it immersively.

This guide will walk you through the process of exporting your Clothing from CLO3D to SwiftXR for VR and AR experiences. Each step is explained in detail to help both beginners and experienced users. Before starting, ensure you have: \- CLO3D installed (They have a 30 free version for the complete software) \- SwiftXR account [ https://home.swiftxr.io/](https://home.swiftxr.io/) ## Step-by-Step Process ### 1. Once you are done with your cloth creations, please check the following below. * If you have topstitch please make sure the type is TEXTURE

### 2. Uv Setting * Go to the top of your menu, you will see Simulation, click the drop down and choose UV editor

* You need to arrange the UV into one single UV tile, there are three methods * * Method One - Manual select all the UV patterns, scale and resize to fit one Uv box, make sure they are scaled all at ones and noon is outside the UV tile or touching each other within the tile

* Method Two - Go to the sidebar of the UV editor and click on the auto UV packing, when the pop up shows up. * * Change the padding to 0.004 * Change Fidelity to 3 * Make sure fix scale ratio is checked * Check 0 to 1

* Method Three - Right click on your UV editor window and click fit all uv to 0-1also click UV coordinate then OK\

#### 3. Once you are done with UV Editor and you have packed the UV properly * You need to go back to the simulation tab

* Click on Connect > Everywear

* Ones you see the pop up but the desired number in the garment polygon depending on how low poly you want the garment to be then click the optimize button

### 3. Export as GLB * Go to File > Export > gltf 2.0 (GLB), Choose where to save and give it a name

* The GLB export settings will poop out, check out * * Check out all avatar * Make sure it is set to Thin * Check unified UV Coordinates * Image size depends on how you want the texture to look but , for the size it is advisable you use 1k so as to export a low poly mesh * Make the scale CM and 1.00% * Check save and compress (ZIP)
* After making sure the settings are similar to the above, click Ok and export. * Go to where it exported and unzip to see your GLB

### 4. Import to SwiftXR * [Create a new project](/creating-a-project) in SwiftXR, see how to create a project [here](/creating-a-project)
* You can either Drag your model and drop it on the SwiftXR Canvas or you go to File > Upload

* You will get a warning sign if your model is more than 50mb so it advisable to keep it at 100mb so following the export setting from style3D is crucial to achieve this, Click on proceed.

* Once imported, carefully check your model in SwiftXR. Verify that all parts, textures, and materials appear as expected.

# Dorik Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Dorik 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 Dorik, you can easily integrate SwiftXR Projects into your Dorik prototypes/websites, 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](https://swiftxr.io/users/authenticate). * 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.

### Copy Embed Code Copy the link within the quotation marks in the second last line.

### Integrating SwiftXR into Dorik Websites * Click on **Add Element** in an empty row and section * From the **General Elements** section, select **Iframe** * Paste link into the Iframe URL box.

### Viewing your scene in the Web, VR or AR Save and publish the Dorik website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with Dorik, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Dorik prototypes and bring your ideas to life in an immersive and interactive way. # Daz3d Export and Embed Daz3D Clothing Designs in 3D, AR, and VR Experiences

This guide will walk you through the process of exporting your scene from Daz Studio to SwiftXR for VR and AR experiences. Each step is explained in detail to help both beginners and experienced users. ### Before starting, ensure you have: \- Daz Studio installed \- Daz to Blender Bridge (download from Daz Studio) \- Blender installed \- SwiftXR account Step-by-Step Process ### Step 1: Prepare Your Daz Studio Scene Open your scene in Daz Studio. Make sure all elements you want to export are visible and selected in the scene tab. This step is crucial as only selected items will be exported.

### Step 2: Reduce the Mesh Resolution to get a Low poly * Make sure your model is selected then go to parameter then Mesh Resolution

* Change the Resolution level to Base

* Subdivision Level should be 0

* Then Render SubD Level (Minimum) should be 0 too

### Step 3: Export from Daz Studio to Blender * Go to File > Send to Daz to Blender.

* Keep the default settings only pick the version of your blender and change any other thing unless you have specific requirements. * Click Accept and wait for the export process to complete. This may take a few minutes depending on the complexity of your scene.

### Step 4: Export as OBJ * In Daz Studio, go to File > Export.

* Name your file (e.g., "SwiftXR\_daz"). Choose a name that's easy to identify later. * Set the following export settings: \- Scale: 1 (to maintain the original size) \- Vertical: Y (standard for most 3D software) \- Depth: Z (ensures correct orientation in Blender) \- Set write surface to none * Click Accept to start the export.

### Step 5: Prepare Blender Scene * Open Blender * Delete the default cube, camera, and light. Select each and press X to delete.

* Press N to open the options tab on the right side of the 3D viewport and Click on Daz to Blender in the options tab

* Then click on Import New Genesis Figure, a pop-up will show then you click on OK

* Click on Viewport shading or Render button to Verify that all textures and assets are intact. Check the materials tab to ensure textures are loaded correctly.

### Step 6: Pack Resources and Save Blender File * Go to File > External > Automatically Pack Resources. This ensures all textures are included in your Blender file.

* Save the file: File > Save As (e.g., "swiftxr\_daz.blend"). Choose a location you can easily find later.

### Step 7: Import OBJ to New Blender File * Create a new Blender file: File > New > General. This gives you a clean workspace. * Delete the default cube, camera, and light as before.

* Go to File > Import > OBJ.

* Find and select your OBJ file and make sure the setting is as the screenshot below, then click import wavefront OBJ.

* Import the file and check that it appears correctly in your scene.

### Step 8: Append Textures * Go to File > Append and Navigate to the Blender file you saved in Step 5.

3\. Select all materials and append them. You can use Shift+Click to select multiple materials at once, then click on Append

### Step 9: Apply Textures For each material (face, eyes, body parts, etc.): * Go to the Shader Editor (switch from "Layout" to "Shading" at the top of the window).

* Select the material you want to work on from the list and click on the material button by the side to change it to the appended materials

* Adjust settings as needed, particularly for transparent parts like eyes and eyelashes, Make sure Alpha is Zero, Blend mode should be Alpha Blend and Shadow Mode should be Opaque.

### Step 10: Clean Up and Export * Go to File > Clean Up >Purge Unused Data. This removes any unnecessary data.

* Pack files again: File > External > Automatically Pack Resources.

* Save your file one last time.

* Export as GLB: File > Export > glTF 2.0 (.glb/.gltf). GLB is preferred as it packages all data into a single file.

### Step 11: Import to SwiftXR * Create a new project in SwiftXR, see image below

* You can either Drag your model and drop it on the SwiftXR Canvas or you go to File > Upload

* You will get a warning sign if your model is more than 50mb so it advisable to keep it at 100mb so following the export setting from style3D is crucial to achieve this, Click on proceed.

* Once imported, carefully check your model in SwiftXR. Verify that all parts, textures, and materials appear as expected.

### Troubleshooting Tips \- If textures are missing: Double-check Steps 7 and 8. Ensure all materials were appended and connected correctly. \- If the model appears too large or small: Go back to Blender, adjust the scale, and re-export. \- If parts of the model are missing: Check that everything was selected in the original Daz Studio scene. \- For any persistent issues or other inquiries: Reach out to our support team. \ \ \
# Figma Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Figma Site. ## 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 Figma, you can easily integrate SwiftXR Projects into your Figma sites, enabling you to create immersive and interactive web experiences. ## Creating a Project on SwiftXR * 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. # Figma Generate and embed 3D model images, GIFs, and PNGs in Figma with ease.

## [SwiftXR 3D Snap](https://www.figma.com/community/plugin/1209566635632057419/swiftxr-3d-snap) **SwiftXR 3D Snap** transforms your 3D workflow by allowing you to quickly generate transparent 2D snapshots and animated GIFs from any 3D model. Perfect for designers, marketers, and creators, it makes showcasing your 3D content easier than ever. Seamlessly integrated with **Figma**, SwiftXR 3D Snap lets you explore and capture the perfect angle of your 3D models, no technical skills needed. Elevate your designs and presentations with clean, professional visuals. #### **Key Features:** * **Transparent 2D Snapshots & GIFs**\ Instantly export 3D models as transparent PNGs or GIFs for use in Canva, Figma, or presentations. * **Interactive 3D Viewer**\ Rotate, zoom, and explore your 3D models directly in the browser before capturing your shot. * **Access Millions of Free 3D Models**\ Browse an extensive library of high-quality 3D assets, or import your own files. * **Drag-and-Drop Simplicity**\ Easily upload and work with your own 3D models using a fast, intuitive interface.
Tutorial Video:
# Format Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Format 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 Format, you can easily integrate SwiftXR Projects into your Format prototypes/websites, 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](https://swiftxr.io/users/authenticate). * 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.

### Integrating SwiftXR into Format Websites * Click on Portfolio, followed by Design and Code Editor * Click on the box left to the Close button

* Scroll and select Gallery HTML * Paste copied code on line 1

* Lastly, click Preview Edits

### Viewing your scene in the Web, VR or AR Save and publish the Format website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with Format, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Format prototypes and bring your ideas to life in an immersive and interactive way. # Framer Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Framer 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 Framer, you can easily integrate SwiftXR Projects into your Framer prototypes/webistes, 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](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.

### Publishing Your SwiftXR Project 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.

### Integrating SwiftXR into Framer Websites * Open Framer Website: Launch Framer and open the website where you want to integrate your 3D/AR/VR project. * Add Embed Component: Locate and add the embed component from Framer's component library. * Paste Embed Code: Seamlessly integrate your SwiftXR project by pasting the copied embed code into the HTML field within Framer.

### Viewing your Scene in the Web, AR or VR Save and publish the Framer website and view the link on any device to explore it immersively.

### Conclusion By integrating SwiftXR with Framer, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Framer prototypes and bring your ideas to life in an immersive and interactive way. # Google sites Add or embed 3D, Augmented Reality (AR) and Virtual Reality (VR) content/design to your Google sites. ## 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 Bigcommerce, you can easily integrate SwiftXR Projects into your Bigcommerce stores/websites, 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: * 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

## Integrating SwiftXR into Bigcommerce Store * Go to Google Sites * Click on “Blank Site” if you do not have an existing project

#### Insert the SwiftXR Embed Code * In the right hand menu, click “Embed” * Choose the Embed Code tab * Paste the SwiftXR iframe code you copied earlier * Click on Next

After Clicking on **Next**, it would bring you to the page below, when it does, you click on **Insert** in the bottom right corner

## Viewing your Scene in the Web, AR or V * Click “Publish” in the top right corner (if it is a new site) and confirm. Your SwiftXR project should now be live on your Google Site.

## Conclusion Integrating SwiftXR into Google Sites is a quick and effective way to showcase interactive 3D, AR, and VR experiences directly on your website. By embedding the SwiftXR iframe code, you can provide visitors with immersive content without needing complex coding or additional tools. Once published, your Google Site will serve as an accessible platform for sharing engaging XR projects with anyone, anywhere. # GoDaddy Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your GoDaddy 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 GoDaddy, you can easily integrate SwiftXR Projects into your GoDaddy prototypes/websites, 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](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.

### Integrating SwiftXR into GoDaddy Websites * Go to your GoDaddy product page. * Scroll to Websites + Marketing and select Manage next to your website to open your site. * Select Edit Website or Edit Site to open your website builder. * Go to the page and location you want to add your custom code, and add a section.

* Search for the HTML section and select Add.

* Paste or write your custom code into the Custom Code field.

* Use Preview to see the results and when you're ready to make the changes public, publish your site." ### Viewing your scene in the Web, VR or AR Save and publish the GoDaddy website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with GoDaddy, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your GoDaddy prototypes and bring your ideas to life in an immersive and interactive way. # HubSpot CMS Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your HubSpot 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 HubSpot CMS, you can easily integrate SwiftXR Projects into your Hubspot webistes, 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](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.

### Integrating SwiftXR into Hubspot CMS Websites * Navigate: Launch HubSpot CMS and open the website where you want to integrate your 3D/AR/VR project. * Copy the embed Html Code from SwiftXr. * Import the Rich Text Editor module * Click on Edit in Expanded View * Click on Insert on the Rich Text Editor

* Paste Embed Code: Seamlessly integrate your SwiftXR project by pasting the copied embed code into the HTML field within the Editor. * Preview and Insert.

### Viewing your Scene in the Web, AR or VR Save and publish your HubSpot website and view the link on any device to explore it immersively.

### Conclusion By integrating SwiftXR with HubSpot you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your HubSpot Websites and bring your ideas to life in an immersive and interactive way. # Jimdo Add or embed 3D, Augmented Reality (AR) and Virtual Reality (VR) content/design to your Jimdo 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 Jimdo, you can easily integrate SwiftXR Projects into your Jimdo 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: * 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 Jimdo Website * Go to and “Log In” if you already have an account, If you do not have an account yet, simply “Create an account” * Select a site you want to edit: Choose a site from the various sites below to edit

## Choose the Page & Section * From the left Navigation Menu, pick the page where you want the 3D/AR model to appear

## Select the site you want to edit * Hover over the section where you want to place the model and click “Add Element”

## Add an Embed/HTML Widget * In the element list, search for “Widget/HTML” (or custom code) and click on it to insert it into the page

## Paste your SwiftXR Code * Inside the HTML widget editor, paste your SwiftXR “iframe code” and click on “Save” in the bottom right corner.

## Viewing your Scene in the Web, AR or VR * Save and publish the Jimdo website and view the link on any device to explore it immersively

## Conclusion Integrating SwiftXR into your Jimdo website allows you to showcase products in 3D and AR directly on your pages. With just a simple iframe embed, you can provide visitors with an interactive and engaging shopping experience. This not only helps customers better understand your products but also builds trust, reduces uncertainty, and can lead to higher sales and lower return rates
# Notion Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Notion Site.

## 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 Notion, you can easily integrate SwiftXR Projects into your Notion sites, enabling you to create immersive and interactive web experiences. ## Creating a Project on SwiftXR * 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.

## 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 your Project URL After publishing copy your project URL

## Integrating SwiftXR on Notion * Log in to your Notion account * Create a page

* Name your page, then click on the + sign on your page, scroll down to Embed

* Paste your project URL then click on Embed code

## View your scene in the Web, AR, VR Save and publish your Notion site and view the link on any device to explore it immersively

## Conclusion By integrating SwiftXR with Notion you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Notion sites and bring your ideas to life in an immersive and interactive way. # Neocities Add or embed 3D, Augmented Reality (AR) and Virtual Reality (VR) content/design to your Neocities 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 Neocities, you can easily integrate SwiftXR Projects into your Neocities 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: * 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.

**Integrating SwiftXR into Neocities Website** * In the Home screen, click on index.html (the first file in your list), this will open Neocities’ built in editor.

* In the editor, scroll until you find the \ section of the HTML and paste your SwiftXR iframe code there. * Click “Save”

**Viewing your Scene in the Web, AR or VR** * Right beside the “Save” button in the image above is the “View” button, you will click on the “View” button to experience your product immersively.

## Conclusion Integrating SwiftXR into Neocities is simple and does not require any paid plan. By pasting the embed code directly into your index.html (or any page), you can display interactive 3D and AR experiences on your live site at “yourdomain.neocities.org”. Since Neocities gives you full control over your HTML, you have the flexibility to customize and update your SwiftXR projects anytime. This makes it a great free option for showcasing immersive 3D content online
# Mozello Add or embed 3D, Augmented Reality (AR) and Virtual Reality (VR) content/design to your Mozello website 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 Mozello, you can easily integrate SwiftXR Projects into your Mozello 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: * 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.

## Integrating SwiftXR into Mozello Website * Go to [Mozello.com](http://mozello.com) and “Log In” if you already have an account, If you do not have an account yet, simply “Create an account” * Select a site you want to edit: Choose a template from the various templates below to edit.

## Edit the Page Content * Navigate to the Page where you want the SwiftXR viewer to appear * Place your cursor where you want to insert the 3D/AR experience

**Insert the Embed Code** * In the editor toolbar, click the “\” insert code button * Paste your SwiftXR iframe embed code * Click on “Apply”

**Viewing your Scene in the Web, AR or VR** * Save and publish the Jimdo website and view the link on any device to explore it immersively

## Conclusion Integrating SwiftXR into your Mozello website is quick and straightforward. Since Mozello supports custom HTML embedding even on the free plan, you can easily showcase interactive 3D and AR models by pasting the SwiftXR iframe code into any content block. This makes Mozello a great option for displaying products, portfolios, or immersive experiences directly on your site without needing extra plugins or upgrades. # Style3d Export and Embed Style3D Clothing Designs in 3D, AR, and VR Experiences

This guide will walk you through the process of exporting your Clothing from Style3D to SwiftXR for VR and AR experiences. Each step is explained in detail to help both beginners and experienced user Before starting, ensure you have: \- Style3D Studio installed (They have a free version as well as a 30 free version for the complete software) \- [SwiftXR account](/) [ https://home.swiftxr.io/](https://home.swiftxr.io/) ## Step-by-Step Process ### 1. Once you are done with your cloth creations, please check the following below. * If you have trims that you use the topstitch functions to create. Please make sure the type is OBJ for the front,Leave the back on check and make sure the type is TEXTURE.

* If you have topstitch that are just topstitch and not trims, please make sure the type is TEXTURE for the front and check same as front for the back

\
### 2. Uv Setting * Go to Tools on the upper part of your screen > then click on the UV editor.You should have something like this, see image below

* You need to arrange the UV into one single UV tile, there are three methods 1. Method One - Manual select all the UV patterns, scale and resize to fit one Uv box, make sure they are scaled all at ones and noon is outside the UV tile or touching each other within the tile.

2. Method Two - Go the upper part of your UV editor and click on Layout, see image below.

3. Method Three - Right click on your UV editor window and click fit all uv to 0-1.

## 3. Export as GLB * Go to File > Export > GLB, Choose where to save and give it a name.

* The GLB export settings will poop out, check out * * Check out all props and all avatar * Make sure it is set to Thin * Under option choose Simplify Mesh * Check unified UV Coordinates * Check baking all map, for the size it is advisable you use 1k so as to export a low poly mesh * Make the scale CM and 1.00% * Check save with Texture Files (ZIP)

* After making sure the settings are similar to the above, click Ok and export. * Go to where it exported and unzip to see your GLB

4\. Import to SwiftXR * [Create a new project](/creating-a-project) in SwiftXR, see how to create a project [here](/creating-a-project) * You can either Drag your model and drop it on the SwiftXR Canvas or you go to File > Upload

* You will get a warning sign if your model is more than 50mb so it advisable to keep it at 100mb so following the export setting from style3D is crucial to achieve this, Click on proceed.

* Once imported, carefully check your model in SwiftXR. Verify that all parts, textures, and materials appear as expected.

# Shopify Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Shopify website. [Install Shopify](https://apps.shopify.com/swiftxr-viewer) ## Step 1: Add Your Product to Shopify (Skip if Already Added)" After setting up your store on Shopify, you will need to add your custom products. If you have your products added you can skip this part. **To add your product:** * Head over to "**Products**" on the left hand side of your store. * Add in the necessary information down to price, name of products and an Image of your product * Hit "**save**" when you are done.

## Step 2: Open Your Shopify Plugin; The SwiftXR (3D/AR/VR) Viewer App Head over to the "**Apps**" section on your Shopify dashboard. Click on your already installed **SwiftXR (3D/AR/VR) app** to open it

## Step 3: Link your Product to a 3D View To link your Product Click on "**Link a 3D Product view**". This action will make the page where you will select your product to pop up.

Then Click on "**select a product**." (This will allow your 3D entry be linked to your selected product)

## Step 4: Click ‘Open SwiftXR Hub’ to open your SwiftXR Account and Create Your 3D/AR/VR Project After selecting a product, click on "**open SwiftXR hub**". This will take you to the SwiftXR hub where you will create your 3D/AR/VR entry.

## Step 5: Create a Project In the SwiftXR hub, Click on "**Create projec**t", give your project a name, then click on "**create**" N.B (You can make use of the free templates available but its optional)

## Step 6: Add a 3D Component and Upload your 3D Model * From the component tab, click or drag and drop a AR component to add it to the white canvas. * Select the "**Properties**" tab to **upload a 3D model**, import from a **3D store** or **Request a 3D mode**l from or use our **AI image to 3D converter**

## Step 5: Publish your Project To publish your project, click the "**Publish**" button located at the top right corner of the SwiftXR Editor and then select "**Publish Project**". (Optional) You can customise the project URL before you publish ## Step 6: Copy the Published Project URL After publishing your project, copy the published project URL, then close the SwiftXR dashboard **Important**: Make sure that your project URL has the "swiftxr.app" domain, otherwise our servers will mark it as invalid. You can also view and share the project using the published project URL

## Step 7: Paste your Project URL * Paste the published project URL you copied after publishing your project into the "**SwiftXR Published Project Link**" input field, then click on "**Save entry**" (SwiftXR helps display different 3D/AR/VR project based on the Shopify product connected)

## Step 7: Add the SwiftXR App Block to your Product Page (One Time) To ensure your SwiftXR 3D rendering displays on your Shopify product page, make sure to add the SwiftXR App Block to a section. \ These simple steps allows SwiftXR to display the appropriate 3D rendering based on the Shopify product connected. To do this; * **Click on “Add to online store”**

* **Navigate to the Product Page** Click on the Home page drop down menu, select "Product", then select your product.

* **Add the SwiftXR (3D/AR/VR) App Block to your desired position on your Product Page** Click on your preffered position to "Add to block". Select "Apps" and then click on "SwiftXR Viewer"

* **Click on "Save"**

## Step 8: Preview your store Head back to your Shopify dashboard, click on "Themes" under "Online store". Click on "view your store"

## Congratulations! You have successfully added 3D/AR/VR views to your shop Enjoy exploring your products in a whole new way!

## Optional - Add 3D/AR/VR Views to your Homepage SwiftXR's Website Mode lets you seamlessly embed 3D/AR/VR experiences on any page of your Shopify store. Tip: Adding 3D/AR/VR content across your Shopify Store can help increase customer browsing time and number of items viewed.
\
# Squarespace Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Squarespace 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 Squarespace, you can easily integrate SwiftXR Projects into your Squarespace prototypes/websites, 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](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.

### Integrating SwiftXR into Squarespace Websites * Hover around the section where you would prefer your SwiftXR project to appear on and click Add Block

* Click Embed

* Click Code Snippet followed by Embed data * Paste copied HTML code into the box

### Viewing your scene in the Web, VR or AR Save and publish the Squarespace website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with Squarespace, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Squarespace prototypes and bring your ideas to life in an immersive and interactive way. # SILEX Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your SILEX 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 Silex, you can easily integrate SwiftXR Projects into your Silex 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: * 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.

**Integrating SwiftXR into Silex Website** * Go to [Silex.com](http://silex.com) and create an account or log in if you already have one. * After creating an account, click on the button that says “Create website”.

* Give your website a name (e.g SwiftXR)

* Click on your website name to access your dashboard

**Add an HTML Block** * Click on the plus icon and choose the HTML tag under “Components” * This block allows you to paste raw HTML/iframe code.

* When you click on the HTML tag, an editor would appear for you to paste your SwiftXR iframe embed code. * After pasting the code, click on “Save”

**Viewing your product in your website** * After clicking on “Save”, your SwiftXR product should appear on your website.

**Publishing your Project**\ Click on “Publish” in the top right corner of your screen. It would bring a variety of options of how you would wish to publish, click on “[GitLab.com](http://gitlab.com)”.

**Viewing your Scene in the Web, AR or VR**\ After clicking on “[GitLab.com](http://gitlab.com)” as the publish option you’d be redirected to a page where you would view your product immersively.

**Conclusion** Integrating SwiftXR with Silex allows users to seamlessly embed immersive 3D and AR experiences directly into their Silex websites. The process is straightforward, requiring only the addition of the provided embed code into the site’s editor. Once integrated, SwiftXR enhances user engagement by offering interactive and visually rich content, making websites more dynamic and appealing. This integration demonstrates how modern web platforms like Silex can easily leverage cutting-edge technologies to deliver enhanced experiences without the need for complex development.
# Teleporthq Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Teleporthq 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 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: * 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.

**Integrating SwiftXR into TeleportHQ Website** * Go to 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)”

**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

**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.

**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

**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.

* 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.

**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.

**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
# Tinkercad Create and Export your Tinkercad Designs for 3D, AR and VR experiences with SwiftXR

## Introduction SwiftXR is a powerful platform for creating and sharing interactive 3D, Augmented Reality (AR), and Virtual Reality (VR) experiences on the web. With SwiftXR, you can import your Tinkercad designs and view them in 3D, AR, or VR, allowing you to interact with your creations and even copy an embed code to use them on your website ## Step by Step 1\. Export Design * Once your design is complete, click on the “Export” button * Under the “include” option, select “Everything in the design.” * In the “For 3D print” section, choose the “GLTF(.glb)” format.

This ensures that your design is exported in the correct format and configuration making it suitable for integration into 3D, AR or VR experiences ## Creating a Project in SwiftXR Before starting, ensure you have a [SwiftXR account](https://home.swiftxr.io/) * Navigate to [SwiftXR Hub](https://swiftxr.io/hub) * Once on Hub, click the "Create Project" button and enter your desired project name.

## 2. Import to SwiftXR * Launch the SwiftXR editor for your project to begin creating your AR/VR experience. * Drag and drop the 3D component into your scene

* Then select “Upload 3D Object” to upload your Tinkercad design into SwiftXR editor * Once uploaded, you can pan around the object, make edits, add more elements and build your interactive AR/VR environment. ## Viewing your Scenes in the Web, AR or VR If you’d like to embed your design into a website: * First, publish your project on SwiftXR * Then, click the dropdown icon next to the “Update” button

* From the options, select “Embed code”. * Click the “Copy” button to copy the embed code to your clipboard

You can now paste this code into your website to showcase your 3D/AR/VR experience ## Conclusion By exporting your Tinkercad designs into SwiftXR, you unlock the ability to present your creations in dynamic 3D, AR, and VR formats. This integration makes it easy to transform simple models into immersive experiences that can be shared on the web or embedded into other platforms. Combining Tinkercad with SwiftXR brings your designs to life beyond the screen # UCraft Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your UCraft 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 Ucraft, you can easily integrate SwiftXR Projects into your Ucraft prototypes/websites, 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](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.

### Integrating SwiftXR into Ucraft Websites * To get started, just drag and drop the Custom HTML icon from the Elements section to the crafting area

* Insert the desired HTML tags and fill in the HTML Code label field, afterwards, click the Embed Code button.

* Click the Save button once all the desired changes are made ### Viewing your scene in the Web, VR or AR Save and publish the Ucraft website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with Ucraft, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Ucraft prototypes and bring your ideas to life in an immersive and interactive way. # UCOZ Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Ucoz 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 uCoz, you can easily integrate SwiftXR Projects into your uCoz 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: * 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.

**Integrating SwiftXR into uCoz Website** * Go to [uCoz.com](http://ucoz.com) and create an account or log in if you already have one. * In the “Select site type” page, choose “Landing Page/ Promo Site”.

**Name your site and click on “Create a website”**

**Go to the Page Editor** * After naming your site, you would be directed to the admin control panel. * From the control panel, click on “Page Editor” in the left hand side of your screen.

* In the page editor, click on “Add new page” in the top right corner of your screen.

**Add an HTML Element** * In your new page, in the toolbar above “Page Content”, click on the “Source” button.

**Paste your SwiftXR Embed Code** * Paste your SwiftXR iframe code in the blank editor box. * Give your page a name i.e “SwiftXR Integration”

Scroll down and click on “Save”

* After clicking on “Save”, a tiny page with the name “Adding Page” would pop up. * Click on the blue bottom link “Go to the page”

Viewing your Scene in the Web, AR or VR * After clicking on the link, you now have your SwiftXR project live on the uCoz platform.

**Conclusion** Integrating SwiftXR into your uCoz website is simple and does not require advanced coding skills. By using the HTML Source editor, you can embed your 3D/AR project with just an iframe snippet. Once saved, your visitors can interact with the 3D content directly on your site, whether on desktop or mobile. This integration makes it possible to showcase products, models, or interactive experiences seamlessly within a uCoz page, enhancing engagement and providing a modern, immersive experience for your audience.
# 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: * 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

**Integrating SwiftXR into Webstudio Website** * Go to [webstudio.is](http://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.
# Weebly Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Weebly 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 Weebly, you can easily integrate SwiftXR Projects into your Weebly websites, 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](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.

### Integrating SwiftXR into Weebly Websites * Navigate: Launch Weebly and open the website where you want to integrate your 3D/AR/VR project. * Copy the embed Html Code from SwiftXr. * Add the Embed code Widget to your site editor.

* Paste Embed Code: Seamlessly integrate your SwiftXR project by pasting the copied embed code into the HTML field within the Editor.

### Viewing your Scene in the Web, AR or VR Save and publish the Weebly website and view the link on any device to explore it immersively.

### Conclusion By integrating SwiftXR with Weebly you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Weebly Websites and bring your ideas to life in an immersive and interactive way. # WiX Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Wix website or store. **Add Your Product to Your WiX Store (Skip if Already Added)"** After setting up your store on Wix, you will need to add your custom products. If you have your products added you can skip this part. **To add your product:** * Head over to "**Set up**" on the left hand side of your dashboard. * Under Set up, click on **Add your first product** * Add your product image and every other details * Hit **save** when you are done.

### (One time) Add the SwiftXR Widget to your Product Page To add the 3D/AR/VR view to your product page: 1. Go to WiX Website Editor and switch to the product page

2. Click on "Apps" and select "SwiftXR Viewer" and add the widget to your page.

3. Move the widget to your desired position. We suggest placing it at the top of the product page for visibility.

The viewer will be automatically hidden if there is no corresponding SwiftXR URL for the product. Important: SwiftXR does not change the look of your website. You can add the SwiftXR Viewer to different parts of your page by opening the widget settings and turning on the optional link feature. ## Step 1 - Go to the SwiftXR Hub and Create a Project To create a SwiftXR project and publish your 3D Model, visit the SwiftXR Hub. SwiftXR accepts multiple file formats such as fbx, obj, stl, gltf, and images. (Optional) You can also use templates for quick starts

### Step 3 - Publish your Project To publish your project, click the "Publish" button located at the top right corner of the SwiftXR Editor and then select "Publish Project". (Optional) You can customise the project URL before you publish.

### Step 4 - Copy the Published Project URL *** After publishing your project, copy the published project URL then close editor **Important:** Make sure that your project URL has the "swiftxr.app" domain, otherwise our servers will mark it as invalid. You can also view and share the project using the published project URL ### Step 5 - Paste your Published Project URL and Publish your Website

### Congratulations! You have successfully added 3D/AR/VR views to your shop. Enjoy exploring your products in a whole new way! *** Visit your published site after publishing, head over to that particular product to view your 3D entry

SwiftXR automatically switches between different views depending on the product and shows the correct link as specified in the product dashboard. Note: Keep adding your 3D models to your store to make it more interactive. # WordPress Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your WordPress website.

### (One time) Add the SwiftXR Plugin to your Wordpress Site To add the 3D/AR/VR view to your product page: 1. Go to Wordpress Website Editor and click on plugin 2. Click on add new plugin and search for SwiftXr 3. Click on "Install now" to install plugin 4. After installing, Click on the Plugin from your menu. Important: SwiftXR does not change the look of your website. You can add the SwiftXR Viewer to different parts of your page by opening the widget settings and turning on the optional link feature. Once you have added the plugin you can now embed your 3D project by following the steps below. ### Step 1 - Go to the SwiftXR Hub and Create a Project To create a SwiftXR project and publish your 3D Model, visit the SwiftXR Hub. SwiftXR accepts multiple file formats such as fbx, obj, stl, gltf, and images. (Optional) You can also use templates for quick starts

### Step 2 - Add a 3D Component and Upload your 3D Model From the component tab, click or drag and drop a 3D viewer component to add it to the white canvas. Select the "Properties" tab to upload a 3D model, import from a 3D store or Request a 3D model from . (Optional) To make sure that only your 3D model is visible, make sure to remove any other components on the SwiftXR Canvas. ### Step 3 - Publish/Update your Project To publish or update your project, click the "Publish" button or "Update" if it is an existing project which is located at the top right corner of the SwiftXR Editor". (Optional) You can customise the project URL before you publish.

### Step 4 - Copy the Published Project URL After publishing your project, copy the published project URL' Important: Make sure that your project URL has the "swiftxr.app" domain, otherwise our servers will mark it as invalid. You can also view and share the project using the published project URL

### Step 5 - Link SwiftXR Published Project to WordPress *** 1. To add published project to your WordPress, Click on the plugin from your WordPress Menu 2. Click on "Add New Entry"

3. Enter the published url from SwiftXR 4. Adjust your dimensions (this is for the embed object) 5. Click on "Add Entry"

6. After Adding Entry copy the short code. This will be needed to display product in your WordPress Site.

### Using the generated ShortCode on your WordPress site To use the generated short code on your WordPress Site, follow the steps below * Open the page you want to edit, and Click to add a block. * Search for ShortCode on the block search input, then drag and add to page. * ```

``` * Paste the ShortCode generated from the SwiftXr plugin before now.

* Click on Save

### Congratulations! You have successfully added 3D/AR/VR. Enjoy exploring your products in a whole new way! *** Note: Keep adding your 3D models to your store to make it more interactive. Tip: Adding 3D/AR/VR content across your WordPress can help increase customer browsing time and number of items viewed.
# WooCommerce Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your WooCommerce store.

### (One time) Add the SwiftXR Plugin using Wordpress Hosting To add the 3D/AR/VR view to your product page: 1. Go to Wordpress Website Editor and click on plugin 2. Click on add new plugin and search for SwiftXr 3. Click on "Install now" to install plugin 4. After installing, Click on the Plugin from your menu. Important: SwiftXR does not change the look of your website. You can add the SwiftXR Viewer to different parts of your page by opening the widget settings and turning on the optional link feature. Once you have added the plugin you can now embed your 3D project by following the steps below. ### Step 1 - Go to the SwiftXR Hub and Create a Project To create a SwiftXR project and publish your 3D Model, visit the SwiftXR Hub. SwiftXR accepts multiple file formats such as fbx, obj, stl, gltf, and images. (Optional) You can also use templates for quick starts

### Step 5 - Link SwiftXR Published Project to WooCommerce Store *** 1. To add published project to your Store, Click on the plugin from your WordPress Menu 2. Click on "Add New Entry"

3. Enter the published url from SwiftXR. 4. Switch to E-Commerce Mode.

5. Choose the product you want to link the 3D object to.

6. Click on "Add" 7. On add the product preview will be generated.

### Congratulations! You have successfully added 3D/AR/VR to your product. Enjoy and keep exploring your products in a whole new way! Note: Keep adding your 3D models to your store to make it more interactive. Tip: Adding 3D/AR/VR content across your WordPress can help increase customer browsing time and number of items viewed.

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

### Introduction 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 * 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.

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

* 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.

### Publish Your SwiftXR Project 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.

### Integrate SwiftXR into Webflow Websites * 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.

* 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: ``` ``` * 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.

### Viewing your Scene in the Web, AR or VR Save and publish the Webflow website and view the link on any device to explore it immersively.

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

**Integrating SwiftXR into WebWave Website** * Go to [WebWave.com](http://webwave.com) and create an account or log in if you already have one. * After you log in, you would see three options, choose the right option that says “Start with a blank page”.

**Add an HTML Element** * After clicking on “Start with a blank page”, it would take you to the page editor. * In the editor, you would see an icon that looks like “...” in the last left corner of your page, hover over it, it would bring a new set of icons, choose the icon that looks like “<>”.

**Insert Your SwiftXR Embed Code** * After clicking on the “<>” icon, a code editor page would appear on your screen. * Erase the existing code and paste your SwiftXR iframe code in the code editor and click on the bottom right button that says “Change Code”. Insert Your SwiftXR Embed Code

* After clicking on “Change Code”, your SwiftXR product would be live in your website. * It would appear very little, but there is a scaleable tag attached to it, so you can scale it to your satisfaction

**Publishing your Website** Click on the publish button in the top right corner of your page. * After clicking on it, you would see a message that says your website has been published, click on the “Close” button.

**Viewing your Scene in the Web, AR or VR** * After clicking on the “Close” button, at the top right corner beside the eye icon, you would see an “earth” icon, click on it to view your published page live.\\

**Conclusion** Integrating SwiftXR into WebWave is straightforward and fully supported on the platform’s free plan. By using WebWave’s custom code block, developers and content creators can seamlessly embed SwiftXR’s interactive 3D experiences into their websites without needing a paid plan. This integration allows for enhanced user engagement, dynamic content presentation, and a smooth deployment process. Overall, WebWave provides a flexible and accessible environment to showcase SwiftXR content efficiently and effectively.

# Zoho Commerce Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Zoho Commerce

### 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 Zoho, you can easily integrate SwiftXR Projects into your [zoho commerce](https://go.zoho.com/4si), 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](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.

### Integrating SwiftXR into Zoho Websites * To get started, just drag and drop the Custom HTML icon from the Elements section to the crafting area

* Insert the desired HTML tags and fill in the HTML Code label field, afterwards, click the Embed Code button.

* Click the Save button once all the desired changes are made ### Viewing your scene in the Web, VR or AR Save and publish the [Zoho Commerce](https://go.zoho.com/4si) and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with Zoho, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your [Zoho Commerce ](https://go.zoho.com/4si) prototypes and bring your ideas to life in an immersive and interactive way. # Zoho Sites Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Zoho Site. ## 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 Zoho, you can easily integrate SwiftXR Projects into your Zoho prototypes/websites, 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](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.

### Integrating SwiftXR into Zoho Sites * On your Zoho Site dashbord, click on **Edit Site**

* In your Editor, click on the plus size at the top left corner of your page, then select **Element**

* Under Elements, scroll down, select **Code Snippet**

* Copy and Embed your project code

* Click on and **OK** then publish your site ### Viewing your scene in the Web, VR or AR Save and publish the Zoho site and view the link on any device to explore it immersively

### Conclusion By integrating SwiftXR with Zoho, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Zoho prototypes and bring your ideas to life in an immersive and interactive way # 🪢 Integrations Embed SwiftXR’s 3D, AR, and VR experiences into HTML, React, Svelte, Angular, Vue, or any web projects effortlessly. # HTML Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your HTML 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 HTML, you can easily integrate SwiftXR Projects into your HTML websites/webapps, 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](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.

### Add a Component/Upload a 3D Model to the Canvas * From the component tab, click or drag and drop a 3D viewer component to add it to the white canvas. * Select the "Properties" tab to upload a 3D model, import from a 3D store or Request a 3D model from .

### Integrating SwiftXR into HTML Websites * Simply paste the copied HTML embed code into the desired section of your website's HTML source code to seamlessly integrate and showcase the 3D/AR/VR view on your site

### Viewing your Scene in the Web, AR or VR Save and deploy the HTML website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with HTML, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your HTML prototypes and bring your ideas to life in an immersive and interactive way. # React and Next.js Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your React or Next.js 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 React, you can easily integrate SwiftXR Projects into your React websites/webapps, 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](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.

### Integrating SwiftXR into React Websites * Simply paste the copied React embed code into the desired section of your website's React source code to seamlessly integrate and showcase the 3D/AR/VR view on your site.

### Viewing your Scene in the Web, AR or VR Save and deploy the React website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with React, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your React prototypes and bring your ideas to life in an immersive and interactive way. # Svelte Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Svelte 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 Svelte, you can easily integrate SwiftXR Projects into your Svelte websites/webapps, 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](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.

### Integrating SwiftXR into Svelte Websites * Simply paste the copied Svelte embed code into the desired section of your website's Svelte source code to seamlessly integrate and showcase the 3D/AR/VR view on your site

### Viewing your Scene in the Web, AR or VR Save and deploy the Svelte website and view the link on any device to explore it immersively. ### Conclusion By integrating SwiftXR with Svelte, you can seamlessly blend 3D elements into your web prototypes, creating more engaging and interactive experiences for your users. Explore the possibilities of using SwiftXR to enhance your Svelte prototypes and bring your ideas to life in an immersive and interactive way. --- [Next Page](/llms-full.txt/1)