Skip to main content
The editor includes advanced components for embedding external content, targeting specific audiences, and providing data context to child components. They are found in the Layout category of the Blocks panel.

​
Iframe

Embeds an external web page inside your portal page using a standard HTML <iframe>.

​
Properties

​
Usage

  1. Drag the Iframe component onto the canvas.
  2. Set the Source URL to the page you want to embed.
  3. Set Width and Height to control the visible area.
  4. Add a Title for accessibility.
The iframe renders with border: none by default. Use the className field to add Bootstrap utility classes for additional styling.
Some websites block embedding via X-Frame-Options or Content-Security-Policy headers. If the embedded page shows a blank area or an error, the external site may be preventing iframe embedding.

​
Script

Loads an external JavaScript file into the page. The script tag is appended to <head> when the component mounts and removed when it unmounts.

​
Properties

​
Usage

  1. Drag the Script component onto the canvas.
  2. Set the Script Source URL to the URL of the JavaScript file.
  3. Choose whether to load it asynchronously.
The Script component has no visual output — it is invisible on the canvas but functional at runtime. Use it to load third-party widgets, analytics, chat tools, or any external script.

​
Behaviour details

  • The component checks if a <script> tag with the same src already exists before adding a new one, preventing duplicate loads.
  • When the component is removed from the page (or the page navigates away), the script tag is cleaned up from <head>.
  • In the editor, the script is not executed to prevent interference with the editing experience.
Only load scripts from trusted sources. Malicious scripts can compromise your portal and your members’ data.

​
CustomerType

A wrapper component that conditionally shows or hides its children based on the current viewer’s customer type. Use it to create audience-targeted content — for example, showing a special offer only to members or a sign-up prompt only to anonymous visitors.

​
Properties

​
Visibility options

​
Usage

  1. Drag the CustomerType component onto the canvas.
  2. Set the desired visibility option.
  3. Drag one or more child components into the items slot.
  4. At runtime, the content only renders if the current viewer matches the selected audience.

​
Editor behaviour

In the editor, the CustomerType component always renders its children so you can edit them regardless of the visibility setting. When the content would be hidden for the current user type, the editor shows a semi-transparent dashed border with the text “Hidden for current user type” to indicate the content is conditionally hidden.

​
Examples

Show a welcome banner only to members:
  1. Add a CustomerType component.
  2. Set visibility to Only for members.
  3. Drop an Alert component inside with a welcome message.
Show a sign-up CTA only to anonymous visitors:
  1. Add a CustomerType component with visibility Everyone.
  2. Inside it, add a Container, Heading and Button linking to sign-up.
  3. Add a second CustomerType component with visibility Logged in users.
  4. Leave it empty or add different content.
Since there is no “anonymous only” option, use the Everyone visibility for the sign-up prompt and then place a separate CustomerType with Logged in users visibility below (or above) to show alternative content to authenticated users.

​
Resources Provider

A wrapper component that provides resources context (bookable resources and floor plans) to its child components. Certain booking-related components require this context to function — if they are placed on a page that does not already include it, they will fail to render.

​
When do you need it?

The following pages already include resources context automatically:
  • Booking pages (resource list, resource calendar, checkout)
  • Admin / editor pages
The following pages do not include resources context:
  • Home page
  • Dashboard and personal pages
  • Events, courses and articles pages
  • Settings and team pages
  • Directory and community pages

​
Which components require it?

If you want to place any of these components on a page that does not have resources context (for example, adding a resource list to the Home page), you must wrap them inside a Resources Provider component.

​
Usage

  1. Drag the Resources Provider from the Layout category onto the canvas.
  2. Drop one or more booking components (ResourceList, ResourceCalendar, or BookingEdit) into its slot.
  3. The child components will now have access to the resources data they need.
Resources Provider wrapping a ResourceList component

​
Properties

​
Editor behaviour

In the editor, the Resources Provider renders as a plain container — no API calls are made. Child components display their own mock data as usual. At runtime, the provider fetches resources and floor plans so that nested components can access them.
If you place a ResourceList, ResourceCalendar, or BookingEdit component on a page without wrapping it in a Resources Provider (and the page does not already have one), the page will show an error. Always check whether the target page already provides resources context before adding booking components.
You do not need this wrapper on booking pages or checkout pages — those already have resources context built in. Adding an extra Resources Provider there is harmless but unnecessary.

​
Using Bootstrap classes

All editor components support an Advanced group with a className (or classNames) field. You can enter any valid Bootstrap 5 utility class here to fine-tune spacing, colours, borders, visibility and more.

​
Common examples

​
Spacing scale

Bootstrap spacing utilities follow the pattern {property}{side}-{size}:
  • Property: m (margin) or p (padding)
  • Side: t (top), b (bottom), s (start/left), e (end/right), x (horizontal), y (vertical), or blank (all)
  • Size: 0 through 5, or auto
For example, px-3 py-5 gives horizontal padding of 1 rem and vertical padding of 3 rem.

​
Responsive prefixes

Add a breakpoint prefix to apply a class only from a certain screen width: Example: d-none d-lg-block hides content on small screens and shows it on large screens.
The className field accepts multiple classes separated by spaces. Combine utilities freely — for example: mt-4 mb-2 text-center bg-light rounded-3 shadow-sm.