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 3D product viewer 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.
Follow this video guide or this step-by-step written guide to learn how to do it using an HTML iframe code!
- No tabs plugin or 3D plugin needed!
- No 3D model embedder plugin needed!
PART 1: Obtaining your HTML iframe code
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 (Youtube is the source software) in this blog post.
B. Understanding what are the elements of an iframe
This illustration depicts the different elements of an iframe code built to support 3-D content. In the vast majority of cases, it is not necessary to modify any part of the code.
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 500 pixels and a height of 300 pixels (style=”width:500; height: “350”).
C. Copy the HTML iframe code
If you are using Visao’s 3D product viewer creation software, your iframe code will be generated automatically. To access it, in the “Viewer” section of the software, 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 software 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 model viewer on the website
To integrate the 3-D content into your WordPress website, you need to paste the generated iframe code into the corresponding section of the website. No extension needed.
A. Login your WordPress account
Go to your account to edit the website.
B. Go to Pages section
Click on the “Pages” tab in the left menu.
C. Select the page
Click on the page and then the part of the page you want to edit.
D. Add an HTML element to desired area
To add a custom HTML block, click the + icon in the Block Inserter and search for custom HTML, or type /html on a new line and press Enter. Click on the code item in the menu and drag it to the desired area. If you are using a website builder plugin such as Elementor, you can simply add an HTML block.
E. Paste iframe code
Paste your HTML iframe code to the field provided.
F. Review and post changes on the web page
Save your changes by clicking on the “Publish” button. Now your 3D model viewer will appear on your website just like this one!
Using Visao’s API
Looking to develop advanced features that run on top of Visao’s 3D viewer? Using Visao’s development log (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 download time of a 3D viewer have a negative impact on the SEO of a website?
3D files 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 weight of the iframe, 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 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.
Does this tutorial also apply to 360 degree videos?
Yes, 360 degree videos and 360 degree images can also be integrated into a WordPress site using iframes! Plugins can also be used, but these are not our favourite integration options as they take more time to install.
What if I have to changes features of my 3D file, do I have to recreate an new iframe code?
If you are using a web software such as Visao, you don’t need to recreate a new iframe shortcode because the URL link remains the same. Indeed, you can simply reload the web page containing the iframe and the new features will appear. No software version downloads needed!
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 shortcode. 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 3D with Visao!
Visao provides a web-based 3D product viewer creation software 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 in just weeks!
Ready to display 3D product viewer with personalized animations and dynamic content? Request a virtual demo of Visao’s 3D and augmented reality software and we will be happy to assist you in your efforts!
