DigitalEye Plugins
  • Home
  • How to add a custom class or an ID to a Bubble element
  • LINKS
    • Contributor page
    • Contact us
  • PLUGINS
    • Advanced Dynamic Tables 🚀
    • Advanced Editable Tables ✏️
    • Export Page to PDF 🔥
    • Advanced Algolia Search 🕵️
    • Rich Text Editor like Medium 📝
    • Scrollspy 👁
    • Move, Rotate & Resize element 🔄
    • Inverted RepeatingGroup (for Chat app)
    • Live Chats (LiveChat.com, Intercom ...) 💬
    • Advanced Screenshot Element 🖼
    • Screenshot Element 🖼
    • Cookies 🍪
    • Device by Screen Size 📱 🖥 📺
    • Browser Language and Locale 📍
    • Advanced <iframe> element 🖥
    • Conditional Redirect 🔀
    • Users Online 🙋‍♂️
    • Page Close Event 🚪
  • TEMPLATES
    • Eatics: Food Delivery Platform like Uber Eats 🍔
    • Coursus: Advanced Online Courses (Udemy-like) 🎓
    • Sline: Premium Admin & Dashboard 📈
    • BubbleBook: a GitBook clone
    • BubbleBook Landing
Powered by GitBook
On this page
  • 🔗 Links
  • ℹ️ Introduction
  • 🔥 Features
  • 📚 Documentation
  • Fields
  • Events
  • Actions

Was this helpful?

  1. PLUGINS

Advanced <iframe> element 🖥

Embed an external website in your Bubble app

PreviousBrowser Language and Locale 📍NextConditional Redirect 🔀

Last updated 4 years ago

Was this helpful?

🔗 Links

|

|

ℹ️ Introduction

Probably the most advanced but very simple to use <iframe> plugin for Bubble. An <iframe> element allows to "embed" an external website to the Bubble app.

Please note that some websites disable the ability to be shown in an iframe on an external website. As a quick example, you can't render google.com in your iframe.

🔥 Features

  • Change the url dynamically without page reloads

  • YouTube mode to embed URL of a YouTube video

  • Set iframe's width/height dynamically

  • Scroll bar control (show / hide)

  • iframe's "sandbox" attribute control to securelly embed external pages (allow-downloads, allow-popups, allow-same-origin etc). Recommended for advanced users

  • Setting title, id, class attributes

  • Plugin fires events (when URL is invalid) so you can add custom error handling

📚 Documentation

Install the plugin, add an "iframe" element on your page, provide a URL and you should be able to see the external page embedded into your app!

For an advanced usage see below.

Fields

General settings

Option

Type

Description

URL

String

Scrolling

Dropdown

Fullscreen

Checkbox

Sandbox options

Sandbox attribute applies extra restrictions to the content in the frame.

Option

Type

Description

allow-same-origin

Yes/No

If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (potentially preventing access to data storage/cookies and some JavaScript APIs).

allow-downloads

Yes/No

Allows for downloads to occur with a gesture from the user.

allow-forms

Yes/No

Allows the resource to submit forms. If this keyword is not used, form submission is blocked.

allow-modals

Yes/No

Lets the resource open modal windows.

allow-popups

Yes/No

Allows popups (such as window.open(), target="_blank", or showModalDialog()). If this keyword is not used, the popup will silently fail to open.

allow-popups-to-escape-sandbox

Yes/No

Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.

allow-scripts

Yes/No

Lets the resource run scripts (but not create popup windows).

allow-top-navigation

Yes/No

Lets the resource navigate the top-level browsing context (the one named _top).

Advanced settings

Option

Type

Description

Title

String

People navigating with assistive technology such as a screen reader can use the title attribute on an to label its content. The title's value should concisely describe the embedded content

ID

String

Add an ID attribute to the iframe

Class

String

Space-separated iframe classes. Example: "myclass1 myclass2"

Do not show alerts

Checkbox

Remove the default plugin alert popups (when the provided URL is not correct)

YouTube URL

Checkbox

Choose this option if your URL is a YouTube video. This will automatically add some YouTube-specific attributes

Events

  • "Incorrect URL" event: fires when the provided URL is not correct. In combination with the "Do not show alerts" field it allows you to build a custom error handling (show an error message in a different language etc)!

Actions

  • Update URL

  • Set Scroll

  • Set Size

More info:

Demo
Editor
Demo2 (Fullscreen mode)
Editor
Plugin page
Forum
https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe