The purpose of creating AR web experiences is none other than to share, with a client, to validate internally with your team, or with a mass audience. To share experiences in Onirix you can choose to simply send an access to the experience (for example in a social media post, by email, by Whats App...), or at a next level, sharing the experience on your website or a customer's website, by inserting a custom web iframe.
In Onirix there are two ways to access the options to share an experience: through the quick menu of the project card (Projects), or inside the scene editor, in the general project options (top bar).
At any time you can access the sharing options within the scene editor, and choose from the various options Onirix offers to show your creations to your colleagues or clients.
First you have the more general sharing options, within the Sharing modes block. You can simply copy a link that will open the experience, both on desktop and mobile. What we call sharing via link.
A secondary option included in this block is the ability to customize the sharing link, and what the user we send it to will see. In this sense can be configured:
You can set the background color of the canvas of this previewer, so that it adapts to the color you want. In addition, we can force the 3D preview to always be displayed, even if the user opens the link from a cell phone.
This can be very useful if we want to share a 3D model to visualize in a first step, and to view in SLAM in a second step.
Social media preview:
With these fields we can slightly edit the information that our interlocutor will see when receiving the experience in social media (WhatsApp, Facebook, Twitter, LinkedIn...). Basically you can modify the preview image, the title and a small description (excerpt) of the experience.
Now (since version v.2.53.0) when you access a shared link, you can see the two ways to open an experience, if you do it from a desktop computer: the QR code to open from your mobile phone, and the 3D viewer link to see the experience in our 3D web.
Here you can access that same example if you want to test this experience: Robot picket experience experience link.
Also within this block Onirix offers other ways of sharing that can be interesting: by downloading a QR code, or with a combination of image (marker) and the QR that launches the experience (in the case of a project with image tracking type scenes).
This is an example of the combined QR & marker you can get:
If what you are looking for is a more advanced option and therefore embed your scene inside an external web, you can do it in this block. At Onirix we have two main ways to embed your experiences in an external website: inserting it in a full screen mode to view in AR web directly (web AR mode); or inserting it as a block within an existing website (web 3D mode).
This is the main mode as it allows you to embed your full screen experience in a mobile web, and therefore offer a viewing mode where the AR web is the protagonist.
For this mode you can customize some options, and in this case the one that may interest you the most is Force 3D. With it, if you want the end user to go through a 3D preview mode before viewing the AR experience, you can do so by activating this option.
To proceed with the embedding of HTML code in a website, step by step, we provide you with this specific documentation of the process: how to embed experiences in web AR
Important note: If you are targeting mobile browsers, it is necessary to add this meta tag inside the head block of your page:
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
It sets the initial zoom level of the page, ensuring that the content fits within the screen size and is properly displayed, providing a better user experience in mobile browsers.
This mode allows us to insert blocks of code within a website, and that these coexist with the existing content, in the same way that you can insert YouTube videos in a post on your blog:
Here you can see a very basic example of this functionality (a bicycle inside a 3D block, with interaction to make it explode into pieces).
In this case, there are some options that may be useful to you when it comes to conforming your HTML code for embedding:
- Canvas background: it is used to set the background color of the block to embed, and thus to adapt it as best as possible to the web where you want to host it. You can even make it transparent.
- Force 3D: This ensures that the block embedded in our website is displayed in 3D mode and not directly in AR mode. Also this option slightly modifies the styles inserted in the HTML iframe to better adapt to a 3D mode instead of web AR mode.
- Hide controls (menu): it is used to hide the access menu to reset the scene that Onirix includes by default.
- Add button to view in AR: includes a button to launch the same experience directly in AR. Very useful if your content can be consumed on a surface, with SLAM, as it could be an e-commerce for example.
In this example you can see a screenshot from a web with an embedded scene included. These are the active options: transparent background, Force 3D ON, hide controls (menu) ON, button in AR ON.
Connection with Custom Domains concept:
In any of the modes you need to have an active Custom Domain of that web where you want to host it. To do this simply add the domain from your account (studio.onirix.com/user/account):
If you want to get a direct URL to the experience that opens our Onirix web AR player without any previous redirection, you can use this URL. It is very useful for embedding your experiences inside an app for example, as it is the direct access to the experience without the embedding web code.
Suppose you have created a project with several scenes, for example of image tracking type (as it could be the case of multiple pages of a magazine). If you want to share links to access a particular scene of the project in a specific way, you can do so by accessing the url of each scene from its context menu:
This will generate a url of the Onirix project, with an added parameter indicating the scene in question. Something like:
In addition, in the case of image tracking projects, when sharing a specific scene, only the preview of the marker of that scene will be displayed, and Onirix will only recognize the content associated with that image.
From the Onirix link tab you can get this information:
- Share link: link to share the Onirix experience directly with others with the preview launchpad included (see next section). It is a perfect option to quickly share the experience, for example on social networks, or via slack, WhatsApp, etc. This URL is always included in our Onirix Studio domain (not custom domains).
- Share resources: this will open the Scene Preview options (QR code, image markers if it is an image tracking experience, etc.)
From the Embed tab:
- Embed URL: Full internal Onirix URL for direct access to the experience, with no preview component.
- Embed iframe code: HTML iframe code with the complete url already included, ready and prepared to copy and insert in a web page external to Onirix, using a custom domain for this purpose.