Documentation Index
Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
Use this file to discover all available pages before exploring further.
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
| 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.
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?
| Component | What it does |
|---|
| ResourceList | Browsable list of bookable resources |
| ResourceCalendar | Calendar view for browsing and booking resources |
| BookingEdit | Booking creation and editing form |
Usage
- Drag the Resources Provider from the Layout category onto the canvas.
- Drop one or more booking components (ResourceList, ResourceCalendar, or BookingEdit) into its slot.
- The child components will now have access to the resources data they need.
Properties
| Property | Type | Description |
|---|
children | slot | Drop zone for child components that need resources context |
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
| 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.
