The editor includes three advanced components for embedding external content and targeting specific audiences. 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
| Property | Type | Default | Description |
|---|
src | text | — | The URL of the page to embed |
title | text | — | Accessible title for screen readers |
width | text | — | Width in px or % (e.g. 100%, 600px) |
height | text | — | Height in px or % (e.g. 400px) |
className | text | — | Additional CSS classes |
Usage
- Drag the Iframe component onto the canvas.
- Set the Source URL to the page you want to embed.
- Set Width and Height to control the visible area.
- 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
| Property | Type | Default | Description |
|---|
src | text | — | URL of the JavaScript file to load |
async | select | No | Load asynchronously: No, Yes |
Usage
- Drag the Script component onto the canvas.
- Set the Script Source URL to the URL of the JavaScript file.
- 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
| Property | Type | Default | Description |
|---|
items | slot | — | Drop zone for child components that will be conditionally displayed |
visibility | select | everyone | Who can see this content: Everyone, Logged in users, Only for members, Only for contacts |
Visibility options
| Value | Who sees the content |
|---|
| Everyone | All visitors, whether signed in or not |
| Logged in users | Any authenticated user (members and contacts alike) |
| Only for members | Authenticated customers whose account type is Member (i.e. they have an active contract) |
| Only for contacts | Authenticated customers whose account type is Contact (i.e. they have no active contracts) |
Usage
- Drag the CustomerType component onto the canvas.
- Set the desired visibility option.
- Drag one or more child components into the
items slot.
- 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:
- Add a CustomerType component.
- Set visibility to Only for members.
- Drop an Alert component inside with a welcome message.
Show a sign-up CTA only to anonymous visitors:
- Add a CustomerType component with visibility Everyone.
- Inside it, add a Container, Heading and Button linking to sign-up.
- Add a second CustomerType component with visibility Logged in users.
- 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.
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
| Class | Effect |
|---|
mt-3 | Top margin of 1 rem |
mb-5 | Bottom margin of 3 rem |
p-4 | Padding of 1.5 rem on all sides |
text-center | Centre-align text |
text-white | White text colour |
bg-primary | Primary background colour |
bg-light | Light grey background |
rounded-3 | Medium border radius |
shadow-sm | Small drop shadow |
d-none d-md-block | Hidden on mobile, visible from medium breakpoint |
w-100 | Full width |
mx-auto | Centre horizontally |
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:
| Prefix | Breakpoint |
|---|
| (none) | All sizes |
sm- | ≥ 576 px |
md- | ≥ 768 px |
lg- | ≥ 992 px |
xl- | ≥ 1200 px |
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.
