3D model viewers are great tools to showcase your products while adding a modern look to your website. Our platform – Visao – offers the ability to turn any CAD file into an interactive and detailed AR-compatible 3D model in just a few steps. Plus, you don’t have to be a 3D modeling software specialist to be able to do it!
In fact, integrating a viewer may seem like a complex and time-consuming task, but it can actually be done in 2 minutes, without any web development skills.
PART 1: Obtaining your HTML content
A. Understanding what an HTML iframe is
The best and easy way to showcase a 3D product viewer on a webpage is using an HTML iframe. An iframe is a frame that displays an HTML page inside another page. In the example below, an iframe is used to embed a Youtube video in this blog post.
B. Understanding what are its elements and options
This illustration depicts the different elements of an iframe code built to support 3D web elements. In the vast majority of cases, it is not necessary to modify any part of the iframe settings.
Visao’s 3D experts recommend using the full width and height of the HTML container rather than determining fixed dimensions in pixels. That is why the example above uses style=”width: 100%; height: 100%”. However, if you prefer to edit the height and width of the 3D model viewer, you can do so by giving specific pixel attributes to each element. Here is an example with a width of 600 pixels and a height of 450 pixels (style=”width:600; height: “450”).
C. Copy the HTML content
If you are using Visao’s 3D product viewer creation platform, your iframe code will be generated automatically. To access it, in the “Viewer” section of the platform, simply click on the “Edit” icon. Then click on the copy icon on the right to copy the generated iframe code.
If you are not using Visao’s platform, you can use the following template. Just replace the model URL with your own.
<iframe src=”https://demo.visao.ca/viewer/nvx7YBzcT7CrZMp9ubwg5A?lang=en” title=”Tubular Chair – Background Demo” style=”border: none; width: 100%; height: 100%;” allow=”autoplay; fullscreen; vr” allowtransparency=”true” allowfullscreen=”true”></iframe>
PART 2: Embedding the 3D content on the website
To integrate the 3D content into your Shopify website, you need to paste the generated iframe code into the corresponding section of the website.
A. Login your Shopify dashboard
Go to your account to edit the website.
B. Select the page
From the left-hand menu, navigate to Online Store>Pages. Click on the page you would like to add your 3D model viewer.
C. Click the “Insert video” icon and paste the iframe code
Click on the video camera icon where you want to add the 3D model viewer. A popup will appear where you have to paste the html code. Click on the “Insert video” icon.
D. Review and click “Save” to see the results
Save your changes by clicking on the “Save” button. Now your 3D model viewer will appear on your website!
E. Editing the width and height of your 3D model viewer directly in Shopify
If you need to adjust the size of your iframe, the best way to do so is to click on the ” Show HTML ” icon, then adjust the height and width from there.
Using Visao’s API
Looking to develop advanced features that run on top of Visao’s 3D viewer? Using Visao’s API, you can build online projects that run on top of Visao’s 3D viewer. This way you are able to design your own logic for interaction with a 3D object. From advanced options such as analytics plugins, product configurator to CPQs, anything can be created!
Click here to access our API to create advanced options
FAQ
Can the load time of a 3D viewer have a negative impact on the SEO of my website?
3D product viewers do not negatively impact the SEO of a website, and even the opposite. Since search engines consider the content of an iframe as belonging to another website, it will not have a direct impact on the SEO ranking. However, one aspect to watch is the size of the 3D model, which can slow down the loading of the website. Indeed, a too high loading time can negatively affect the user experience, the technical referencing and consequently affect the global referencing.
To avoid slowing down a website when an iframe containing a 3D model file is integrated, it is possible to add the attribute option loading=”lazy” in the iframe shortcode.
With this delay option, the iframe will only load when the guest scrolls over the page (in real time) where the iframe is located. The page will not be negatively affected by the loading of the 3D model display since it will only load when a user arrives at the precise location of the model. Before that, an image of the 3D content will be shown.
What if I have to change features of my 3D element, do I have to recreate a new HTML code?
If you are using a web platform such as Visao, you don’t need to recreate a new iframe code because the URL link remains the same. Indeed, you can simply reload the web page containing the iframe and the modified features will appear.
How can I change the background color of my 3D viewer? What about button font color?
It is not possible to change the background or button font color of your 3D viewer directly from the HTML iframe code. Changing the CSS style will not affect the style aspect of the viewer as it is an external URL link.
What is the aspect ratio of the 3D model viewer once embedded?
The 3D model viewer adopts the aspect ratio of the HTML block in which it is placed. Therefore, whether on a mobile browser or on a computer, the default viewing experience will remain the same.
Display your products in 3D with Visao!
Visao provides a web-based 3D model viewer & AR platform that allows manufacturers to use their CAD files to create interactive 3D product displays of their products for marketing, sales processes, trade shows and production. We also provide a complete list of services to accompany you in the process of creating your own engaging experience!
Ready to display your 3D product viewer with personalized animations and dynamic content? Request a virtual demo of Visao’s 3D and augmented reality platform and we will be happy to assist you in your efforts!
