How to embed a 3D viewer in Elementor Pro in 4 easy steps

Learn how to integrate a 3D model viewer into an Elementor website page in 4 easy steps. No plugin or web development experience is required. 
Newletter Sign Up ANG

When it comes to embedding a 3D viewer with motion effects on a website, there’s no shortage of methods – from Wordpress plugins and custom code to API integration and more.

However, if your website is powered by WordPress and utilizes the Elementor website builder plugin, you’re in for a straightforward experience.

In fact, you’ll discover that the process is not only straightforward but also attainable with just the free version of Elementor and a basic understanding of HTML blocks. No need for technical web knowledge.

In this comprehensive guide, we’ll guide you through the entire process, systematically breaking it down into simple, easily manageable steps.

But our integration prowess doesn’t stop at Elementor. Explore our blog posts on embedding for Wordpress, Shopify, Duda, and Wix as well.

Don’t want to read? Here’s a video summary we made:

YouTube video

What is a 3D model viewer for Elementor?

A 3D model viewer is a tool that enables customers to interact with products in a virtual space, offering a dynamic and immersive experience.

It allows users to manipulate, zoom, and rotate the product from different angles, providing a realistic representation and a deeper understanding of the product’s origin and its features than with product images. Try it out here:


Using 3D model viewers in e-commerce has significant advantages. They offer a more realistic representation of product media than traditional images, allowing customers to examine every detail.

Additionally, 3D model viewers enable better visualization, helping customers assess size, proportions, and aesthetics accurately. As an illustration, consider our client Drolet, who integrated digital replicas of their fireplaces on each product page.

3d model on ecommerce website


PART 1: Obtain your HTML iframe code

 A. Understanding what an HTML iframe is

The most efficient and user-friendly approach to displaying 3D models with motion effects on a webpage is by utilizing an HTML iframe script.

To provide some context, an iframe serves as a frame that facilitates the presentation of one HTML page within another.

As exemplified in the illustration above, an iframe can be utilized to effortlessly integrate third-party source software, like a video player plugin for websites such as YouTube, into a blog post or webpage.

P.S. It’s worth noting that this functionality extends to touch screen-enabled devices as well!

A screenshot of Youtube's iframe box


B. Understanding what are the elements of an iframe

This visual representation highlights the various elements comprising an iframe code script for 3D content.

In the majority of instances, no alterations are required, as the code already encompasses essential attributes and properties essential for the presentation of 3D models.

These encompass elements such as the source URL, width, height, and styles, ensuring that embedding a 3D product viewer is a smooth and trouble-free process.



The 3D specialists at Visao recommend making optimal use of the full width and height of the HTML container instead of confining it to fixed pixel dimensions. This is precisely why the earlier mentioned example utilizes the style attribute with the values “width: 100%; height: 100%.”

However, if you have a preference for customizing the dimensions of the 3D model viewer, you have the flexibility to do so by assigning specific pixel values to individual elements.

As illustrated in the subsequent example, you can set the width to 500 pixels and the height to 350 pixels by specifying the style attribute as “width: 500px; height: 350px.”

Does an iFrame have an impact on SEO?


C. Copy the HTML iframe code

When you are making use of Visao’s 3D model creation software, the iframe code script is auto-generated for you. To obtain this code, follow these simple steps: Within the software, head to the “Viewer” section, and select the “Edit” icon.

Subsequently, click on the copy icon situated on the right side of the screen to replicate the generated iframe code.



If you are not using Visao’s software you can use the following template. Just replace the 3D model URL with your own.

<iframe src=”” title=”Marketing – Foyer SBI” style=”border: none; width: 100%; height: 100%;” allow=”autoplay; fullscreen; transparency; vr;”></iframe>


PART 2: Embedding the 3D model viewer on Elementor

In order to seamlessly integrate the 3D content with motion effects into your Elementor webpage or other websites, insert the generated iframe code into the appropriate section of your site.

A. Login your WordPress account

Navigate to your WordPress site dashboard menu to access website editing features.

First Steps with WordPress (Classic Editor) – Documentation

B. Go to Pages section

Click on the link under the “Pages” tab in the left menu.

How to Add a Page in WordPress | WordPress 101 Tutorials

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

Within the Elementor toolbar, search for and create the HTML block using the search function and then proceed to drag it to your desired location on the web page to create the integration.


Why consider 3D visualization software as a marketing solution?


E. Paste iframe code

Simply upload and paste the generated shortcode into the designated field.



F. Review and Publish Your Website Updates

Save the modifications by selecting the “Publish” button. Your 3D viewer with motion effects will now be visible on your Elementor-built website.


3d viewer on website



Do I need to use Wordpress Media Library?

No, you do not. By hosting the 3D viewer on an external domain, you can create it without the need to link or upload it to the Media Library.

Transform your CAD drawing into interactive 3D viewers with Visao

Create fully interactive 3D viewers of your products without any prior 3D experience

Customize the viewers to match your brand and product specifications

Host your 3D viewers on the cloud and easily share them with your audience

augmented reality mode

How to add interactive 3D in PowerPoint presentations

Discover the steps involved in integrating interactive 3D elements into your PowerPoint presentation. It only takes a few minutes….

How to use 3D viewers for better customer experience in Hubspot CRM

Elevate HubSpot CRM with 3D visualization. Transform customer experiences and streamline workflows. Explore now….

Want to learn how our client brought their tradeshow experience to another level?