---
title: "How to show a live website in a mockup using iframes in Elementor?"
url: https://theplusaddons.com/docs/live-website-in-mockup-using-iframes-in-elementor/
date: 2023-02-21
modified: 2026-06-27
lang: en
author: "Aditya Sharma"
description: "An iframe is an HTML element that allows you to embed other elements into your webpage. This can be useful for a variety of purposes, such as displaying external content,..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-show-a-live-website-in-a-mockup-using-iframes-in-Elementor-1024x536.jpg
word_count: 232
---

# How to show a live website in a mockup using iframes in Elementor?

## 

- Embed live websites using iframes with the Dynamic Device widget from The Plus Addons for Elementor.
- Set the Layout to Normal and select IFrame from the dropdown to integrate external content into mockups.
- Ensure The Plus Addons for Elementor is installed and activated to utilize the Dynamic Device widget features.

An iframe is an HTML element that allows you to embed other elements into your webpage. This can be useful for a variety of purposes, such as displaying external content, like videos or maps, or for integrating third-party services.

With the Dynamic Device widget from The Plus Addons for Elementor, you can display third-party or live site content inside device mockups using an iframe.

*To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Device widget, [click here](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/).*

**Best Used For:**

- Product demo pages that show the actual product UI running live inside a laptop or phone mockup

- Agency portfolio showcases that embed client websites in device frames on a services or portfolio page

- App landing pages that display an interactive app preview inside a mobile device mockup

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dynamic-device-mockups/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To add an iframe inside your mockup add the widget on the page, make sure to set the **Layout** to **Normal** and after choosing the appropriate device type and mockup, go to **Content** and choose **IFrame** from the dropdown.

Then add the website URL in the **IFrame URL** field.

![Dynamic Device widget IFrame settings in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-iframe.png)

The live site or third-party website will now be accessible from your device mockup.

![Dynamic Device widget live website iframe demo in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-iframe-demo.gif)

Learn [how to show Elementor Template inside a device mockup](https://theplusaddons.com/docs/elementor-templates-inside-a-device-mockup/).