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

> Embed external content, load third-party scripts, and conditionally show content by audience type.

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

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.

***

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