Showcase Your Websites in a Live Responsive Previewer

In this tutorial, I will show you how to very easily open any link (probably to a portfolio website) in a live, responsive iFrame preview.

Alternatively, you could use this as "lead gen" or "lead magnet" for your agency site, where you tell visitors to preview their own website to see if it's responsive.

Here is a live demo of what we are talking about. Clicking one of the portfolio item will open that item in the device previewer, or scroll down to enter any URL and get you in the previewer for that URL.

Visit the demo page directly

Features:

• Customizable: Set things just as you want them: all the colors are editable, you can swap the icons to your own SVGs, and you can even add or remove entire viewports (So, you could add an icon for a SmartWatch, let's say, and have it all work just fine)
• Small screen friendly: Although not ideal, this even works (and, most importantly, gives a perfectly accurate preview) on mobile, through an integrated and automatic zoom out feature. By the same token, it also works well if your visitor is on a small laptop screen, previewing a larger viewport than he has.
• Works everywhere: This works with Elementor, but also with any WordPress website, and really, any website at all! As long as you can add custom JS and CSS to your page, this will work.*
• Really easy to use: Any URL that you want to open in the device previewer just requires #devicePreview appended to it. https://element.how/ goes through normally, https://element.how/#devicePreview opens in the previewer.

*The instructions in the tutorial are for WordPress websites only and I won't be providing support for websites not made with WordPress.

Let's get started!

First, copy paste the code in your project