The iFrame widget lets you embed any embeddable iframe.
An iframe is an HTML element that lets you display content from another web page (the same site or another site). It is similar to a link but without having to leave the page you are browsing to view the content. It creates a "frame" which encapsulates the remote page.
For example, Youtube videos are displayed in an iFrame when you embed them in your website. It is pretty much the same thing for any web app which lets you embed a part or the whole content of a page. In absolute, except websites forbidding it, any web page can be embedded into an iframe.
Here is a short list of what can be embedded: Videos (Youtube, Vimeo, Tiktok...), Images (Giphy, Facebook, 500px...), Forms (Google Form, Typeform, SurveyMonkey...), Maps (Google Maps, Mapbox, OpenStreetMap...), Calendar/Agendas (Google Calendar, Calendly...), Articles (Wikipedia, Imdb...), Sound (Soundcloud, Bandcamp...)...
As you can see, there is not much in the Content tab for this widget. The only required input is the URL of any embeddable web page...
For example, in Chrome, If you see this in the widget rendering:
it means that the web page you are tying to embed is blocking its native embeddability. Any other web page should work.
In specific web apps, they give copy-n-paste-ready HTML snippets. Most of the time, you will need to remove the extra HTML out of it and just keep the value of the src="" attribute ; which is the iFrame URL in short.
Here is an example with the Google Form provided embed code:
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true" width="640" height="601" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
What you need to paste in the input:
Here is another example for Sketchab 3D models, this is the embeddable code:
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&preload=1&ui_controls=1&ui_infos=1&ui_inspector=1&ui_stop=1&ui_watermark=1&ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/lego-geralt-of-rivia-ec283d217efe4ef39f0e19ae3b3396a1?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Lego Geralt of Rivia</a>
by <a href="https://sketchfab.com/sir_luizo?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">sir_luizo</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
What you need to paste in the input:
Ok, let's give you the example of a Youtube video (even if we recommend you to use the Video Pop-in widget instead).
<iframe width="560" height="315" src="https://www.youtube.com/embed/C71YkqN0pEA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
here is what you need to paste:
Feel free to email email@example.com for more examples.
You will be able to define both width and height of the modal and you will able to define them (independently) in several dimensional units:
- px (pixels)
- % (percentage)
- em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
- vw (1/100th of the window's (or viewport) width)
- vh (1/100th of the window's (or viewport) height)
- vmin (whichever is the smallest of vw or vh)
- vmax (whichever is the highest of vw or vh)
Depending on what you want to achieve and how responsive your modal needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.
We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.
If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.
This widget version does not have yet all the most up-to-date triggering and recurrence options like in the other widgets "Conditions tab". However, this article will help you to understand how everything works.
If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.