Advanced <iframe> element đŸ–Ĩ

Embed an external website in your Bubble app

Demo | Editor

Demo2 (Fullscreen mode) | Editor

Plugin page

Forum

ℹī¸ 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

Sandbox options

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

More info: https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe

Advanced settings

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

Last updated