Mac Style Iframe

Demo to preview the plugin:

Introduction

Get this no-code Mac Style Iframe plugin that allows you to display iframes within a Mac-looking browser. With this plugin, you won’t need to write HTML code to integrate any iframe.
It includes working events for the red, green, and yellow buttons, as well as actions to resize, hide, and show the element.
Image without caption

How to setup

  1. Adding the Mac Iframe Element
      • Drag the Mac Iframe element onto the page where you want to display the iframe.
      • Configure the element’s properties.
      Element → Mac Iframe.
      Element → Mac Iframe.
  1. Working with Iframe Events
    1. The plugin provides events that are triggered when users interact with the iframe’s buttons or when the window is opened.
      How to Set Up Events
      • Go to the Workflows tab in Bubble.
      • Click Add an Event and select one of the following plugin events:
        • Image without caption
        • A Mac Iframe Red Button Clicked → Triggered when the red close button is clicked.
        • A Mac Iframe Green Button Clicked → Triggered when the green maximize button is clicked.
        • A Mac Iframe Yellow Button Clicked → Triggered when the yellow minimize button is clicked.
        • A Mac Iframe Opened → Triggered when the iframe is loaded and displayed.
      • Within the event, add appropriate actions such as:
        • Hiding the iframe when the red button is clicked.
        • Resizing the iframe when the green button is clicked.
        • Minimizing or hiding the iframe when the yellow button is clicked.
          • Workflow action → Hide Iframe MacIframe.
            Workflow action → Hide Iframe MacIframe.

Plugin Element Properties

Mac Iframe

Element properties → Mac Iframe.
Element properties → Mac Iframe.
Fields:
Title
Description
Type
URL
URL
Text

Element Actions

  1. Show Iframe - Show Iframe
  1. Hide Iframe - Hide Iframe
  1. Change Frame Size - Change Frame Size
    1. Title
      Description
      Type
      Width (%, px, number)
      Width
      Text
      Height (%, px, number)
      Height
      Text

Element Events

Title
Description
Red Button Clicked
Red Button Clicked
Green Button Clicked
Green Button Clicked
Yellow Button Clicked
Yellow Button Clicked
Opened
Opened
Image without caption

Changelogs