🎦 iFrame

---

 

• Introduction
• Layout tab
• Content tab
• Style tab
• Conditions tab

---

Introduction

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...)...

---

Layout tab

Layout

We offer 2 different layouts:

• modal (pop-in)
• free placement (which allows you to place the widget wherever you want in the page flow)

If "free placement" is the selected layout, you won't see the two following blocks (Dimensions & Layer).

Dimensions

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, 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 pop-in 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.

Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport. 

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

Know issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. And results can be surprising...

We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't find a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

Layer

Layer Position (z-index)

If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.

Please read the dedicated article on the matter: Z-index demystified.

---

Content tab

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:

https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true

Here is another example for Sketchab 3D models, this is the embeddable code:

<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&amp;preload=1&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;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>
</p>
</div>

What you need to paste in the input:

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

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:

https://www.youtube.com/embed/C71YkqN0pEA

Feel free to email [e-mail] for more examples.

---

Style tab

Select the style options (Container, Border, Close button) you want to apply to your widget and customize the banner.

Refer to the Widget Style options article for more information on all available Style options.

---

Conditions tab

Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget. Refer to the Widget Condition options article for more information on the available Condition options.

---

If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.