BLOCKS: iFrame Block

iFrame Block

The iFrame Block can be used to embed content within an Inline Frame on a Dashboard, Portal Page, or Public Page. It acts as a secondary webpage within your main page, allowing you to display external content directly without requiring visitors to navigate away.

What This Block Is Used For

Use this block whenever you need to display an external webpage or URL-based content directly within your page layout. It is particularly useful for integrating third-party tools, resources, or dynamic content that is hosted externally.

  • Embed an external website or web application directly within a portal page.
  • Display a third-party scheduling tool, map, or reporting dashboard inline.
  • Integrate external resources without requiring users to open a separate browser tab.
  • Link to a Custom Field URL type, allowing for personalised content per user.

How to Add This Block

1. Open the Content Block Editor on the page you wish to edit.

2. Click the Add Block (+) button to open the block selection menu.

3. Select iFrame Block from the list.

Once added, the block will appear in your layout ready to add your settings.  Alterntively, you can click the pencil (edit) icon in the block toolbar at anytime to open the block options.

How to Configure the Block

After clicking the edit icon, the iFrame Options modal will appear with three tabs: Block Options, Style Options, and Access Options.

Source Type: Choose between two source options for the content to be displayed in the iFrame:

  • URL - Paste a direct link into the Embed URL field. The content from that URL will be displayed within the iFrame on the page.
  • Custom Field URL - Select a URL Custom Field from the dropdown menu. The iFrame will display the URL stored in that Custom Field for each Target, allowing for personalised content per user. Custom Fields must be created first. At this time, you can choose from CRM Company, CRM Contact, and Staff Custom Fields.

Full Width: Toggle to ON for the iFrame content to automatically expand to the full width of the block. To set the dimensions manually, leave this toggle OFF and enter values in the Width and Height fields.

Width and Height: Enter size values in pixels or as a percentage. For example, enter 200 for 200px or 90% for a percentage-based size. Leave these fields empty to use the original size.

Alignment: Align the iFrame content to the centre, left, or right of the block.

TIP: When using the Custom Field URL source type, each Target will see the content from the URL stored in their own Custom Field. This makes the iFrame Block a powerful tool for displaying personalised external content for individual Clients or Staff members.

IMPORTANT: Not all external websites can be embedded in an iFrame. Many websites use security headers that prevent them from being displayed within an iFrame on another domain. When in editing mode you will not see the embedded content as you must preview the page as a user (this can be down with the preview/eye icon) If the embedded content does not appear, check whether the external site permits iFrame embedding.

What Users Will See

Visitors on the published page or portal will see the embedded content displayed directly within the page, at the size and alignment you have configured.

  • The external content rendered inline within the page, without needing to open a separate tab or window.
  • Content sized and aligned according to your block settings.
  • Personalised content for each Target if the Custom Field URL source type has been used.

Best Practices

Getting the most from the iFrame Block comes down to choosing reliable external sources and setting appropriate dimensions for your layout.

  • Always test the embedded URL before publishing to confirm the external site permits iFrame embedding and that the content displays correctly
  • Use the Full Width toggle for content that should span the full column, such as maps or wide dashboards
  • Set a specific Height value when embedding content with a fixed layout to avoid the iFrame appearing too small or too large on the page
  • Use the Custom Field URL source type to display unique external content per Contact or Staff member, such as personalised reporting pages or unique booking links
  • Use the Access Options tab to control which roles or users can see the iFrame Block, ensuring sensitive embedded content is only visible to the appropriate audience

TIP: The iFrame Block works especially well for embedding external scheduling tools, live dashboards, or resource pages directly into a Client portal, giving your Clients a seamless experience without ever leaving your branded portal environment.

RELATED ARTICLES

CLICK HERE to learn about the Content Block Editor.

CLICK HERE to learn about all Block Editor Block Types.

CLICK HERE to learn about URL Custom Fields.