#TuesdayTips: How to Add iFrames to Duda Websites
Hi Duda Builders!
On today's Tips and Tricks Tuesday, we will be looking at the <iframe> tag. We'll learn what iframes are, when and how to use them, and what to look out for.
How to Add iFrames to Duda Websites
What is an iframe?
Technical definition: A HTML document that loads within another HTML document.
Less technical yet wordier definition: An iframe tag defines a rectangle within your webpage. Think of it as an actual frame or a window in a house:
In our analogy, if an iframe is the window, then a webpage is the wall.
One affordance of a window is to allow a person on either side to get a view of the world that is being blocked off by the wall. An iframe functions in a similar way: It allows us to add a frame to our webpage that will display the contents of another website.
Below, I have two sites. Site A is being iframed by Site B:
Site A: https://northern-lights.multiscreensite.com/
Site B: https://northern-lights-inside-iframe.multiscreensite.com/
Underneath the hood
Let's take a look at what our iframe looks like.
To start, we have added an HTML widget to the site and have entered the following line of code:
<iframe src="https://northern-lights.multiscreensite.com/" width="1000" height="600"></iframe>
We let our webpage know that we are adding an iframe by adding opening and closing tags: <iframe></iframe>
Then, we add the URL of the site we want to iframe. In this example, we are using this website: https://northern-lights.multiscreensite.com/
To add the URL to our iframe:
- Type the attribute src (which stands for source)
- Add equal signs =
- Sandwich the URL between quotes
"https://northern-lights.multiscreensite.com/"
At this point, you should have the following snippet:
<iframe src="https://northern-lights.multiscreensite.com/"></iframe>
If you're following along, you might be seeing a version of this:
To fix this, we'll want to play around with the iframe's dimensions. We can do this by adding the following attributes: width="{}" and height="{}"
{ } is just a placeholder; you should enter a number value here.
<iframe src="https://northern-lights.multiscreensite.com/" width="1000" height="600"></iframe>
There are other styles you can use on your iframe, such as adding a border. For more information, check out this resource.
Tip: If you're adding an iframe below the fold, consider adding
loading="lazy"for page performance.
When to use them?
Since iframes allow us to embed external content on our website - acting as though they are part of our site's layout and giving us the ability to interact with them - you may find yourself finding several reasons to use them.
If you've ever used one of Duda's map widgets, you may have noticed that they were built using Mapbox instead of Google Maps. But what if you want to use a Google Map instead? Then we can use an iframe.
Check out this beautiful Duda site that uses a Google Map in an iframe: https://google-maps-iframe.multiscreensite.com/
You'll notice that you can actually interact with the map. If I made the map fit the entire size of the viewport, it'd be tricky to tell if what we're seeing is an iframe or the actual map on Google.
What to look out for:
Check out this site: Google.com
Notice anything suspicious? If you look at the URL, you'll notice that it points to:
fake-google.multiscreensite.com
No, I did not rebuild Google's search engine; instead, I iframed it. Pretty cool, eh? Yes and no. A downside of iframing is that bad actors can use iframes to try to trick you into revealing confidential information and even remotely gaining control of your computer.
If you've ever tried to iframe something on your site and got this error:
This means that the site you are trying to iframe is not allowed to load on other sites inside an iframe, most likely for security reasons.
Note: By default, all sites created in Duda after April 5, 2020 cannot be loaded as iframes unless you enable this from the site's settings. To learn more, check out this support article: Load Site in an iframe
So how can we get this to work? If you have access to the site's HTTP headers, you'll need to change its referrer-policy attribute. If you don’t have access to it or have no idea what that is, then you’ll need to reach out to the service you’re trying to iframe and ask them to enable the site to be iframed.
Conclusion
Iframes can help you achieve site goals. If you ever run into a limitation with any Duda products, you may want to explore using an iframe instead. Have any questions or specific iframes that you need help adding to your site? Feel free to post in the comments or send a support request at support.duda.co.
