> ## 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.

# Advanced: Iframes, Scripts, CustomerType & ResourcesProvider

> Embed external content, load third-party scripts, conditionally show content by audience type, and provide resources context to child components.

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

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.

<Warning>
  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.
</Warning>

***

## 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

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.

<Warning>Only load scripts from trusted sources. Malicious scripts can compromise your portal and your members' data.</Warning>

***

## 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

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?

| Component            | What it does                                     |
| -------------------- | ------------------------------------------------ |
| **ResourceList**     | Browsable list of bookable resources             |
| **ResourceCalendar** | Calendar view for browsing and booking resources |
| **BookingEdit**      | Booking creation and editing form                |

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.

<Frame>
  <img src="https://mintcdn.com/nexudus/8bMwlXS3QOkS-zUF/images/editor/resources-provider-diagram.svg?fit=max&auto=format&n=8bMwlXS3QOkS-zUF&q=85&s=f18f10351a9d1edeb3f7e85485d1c447" alt="Resources Provider wrapping a ResourceList component" width="480" height="220" data-path="images/editor/resources-provider-diagram.svg" />
</Frame>

### 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.

<Warning>
  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.
</Warning>

<Tip>
  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.
</Tip>

***

## Using Bootstrap classes

All editor components support an **Advanced** group with a `className` (or `classNames`) field. You can enter any valid [Bootstrap 5](https://getbootstrap.com/docs/5.3/utilities/api/) 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  |

Example: `d-none d-lg-block` hides content on small screens and shows it on large screens.

<Tip>
  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`.
</Tip>
