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

# Widget Embedding

> Embed the members portal directly into your coworking space's marketing website for seamless customer experience.

## Overview

Widget embedding allows you to integrate specific sections of your members portal directly into your coworking space's marketing website. Instead of redirecting customers to a separate portal domain, they can access booking forms, member directories, or other portal features while staying on your main website.

This creates a seamless experience where customers never leave your brand environment, improving conversion rates and maintaining consistent visual identity throughout their journey.

<Frame>
  <img src="https://mintcdn.com/nexudus/Dcm8FZKwvhdtWdU9/images/portal/iframe-widget.png?fit=max&auto=format&n=Dcm8FZKwvhdtWdU9&q=85&s=cb919147a8ab9aa48de432a65682855c" width="1024" height="1536" data-path="images/portal/iframe-widget.png" />
</Frame>

## Purpose

Coworking spaces often maintain separate marketing websites to showcase their brand, location, and services. However, when customers want to book a meeting room or view available desks, they typically need to navigate to a different portal domain, breaking the user experience flow.

Widget embedding solves this by allowing you to:

* **Maintain brand consistency** - Customers stay within your website's design and navigation
* **Reduce friction** - No redirects or separate login processes required
* **Improve conversion** - Streamlined booking flows directly on your marketing pages

## How It Works

The widget system uses an iframe-based architecture with intelligent communication between your website and the embedded portal content. Here's what happens technically:

<Steps>
  <Step title="Widget Script Integration">
    Your marketing website includes a lightweight JavaScript file that handles all iframe communication and dynamic resizing.
  </Step>

  <Step title="Container Definition">
    You place a simple HTML container on your page that specifies which portal section to embed and display preferences.
  </Step>

  <Step title="Automatic Iframe Creation">
    The widget script automatically creates and configures an iframe pointing to your portal, handling security
    permissions for features like geolocation and camera access.
  </Step>

  <Step title="Dynamic Height Management">
    The embedded portal communicates its content height back to your website, automatically resizing the iframe to prevent
    scrollbars and maintain a native feel.
  </Step>

  <Step title="Scroll Synchronization">
    The widget tracks scroll position between your website and the embedded content, ensuring smooth navigation and proper positioning of sticky elements.
  </Step>
</Steps>

## Implementation Process

### Basic Setup

Add the widget script to your website's HTML head section:

```html theme={null}
<script src="https://cdn.nexudus.site/widget/Nexudus-widget.min.js"></script>
```

### Embedding Portal Sections

Create a container element where you want the portal to appear:

```html theme={null}
<div
  id="Nexudus-widget-iframe"
  url="https://your-location.nexudus.site/bookings/meeting-rooms/list"
  hide-header="true"
></div>
```

You can also use the class name instead of an ID, which allows you to embed multiple widgets on the same page:

```html theme={null}
<div
  class="Nexudus-widget-iframe"
  url="https://your-location.nexudus.site/bookings/meeting-rooms/list"
  hide-header="true"
></div>
<div
  class="Nexudus-widget-iframe"
  url="https://your-location.nexudus.site/events/list"
  hide-header="true"
  hide-footer="true"
></div>
```

The widget script automatically detects all containers matching either the `Nexudus-widget-iframe` ID or class and creates the embedded iframes when the page loads.

### Configuration Options

<ParamField path="url" type="string" required>
  The full URL to the portal section you want to embed. This should point to your location's portal domain and the
  specific page you want to display.
</ParamField>

<ParamField path="hide-header" type="string">
  Set to "true" to hide the portal's header navigation, creating a more integrated appearance within your website.
  Defaults to showing the header if omitted.
</ParamField>

<ParamField path="hide-footer" type="string">
  Set to "true" to hide the portal's footer, creating a more streamlined appearance. Defaults to showing the footer if
  omitted.
</ParamField>

<ParamField path="hide-logo" type="string">
  Set to "true" to hide the portal's logo, useful when you want to maintain full brand control. Defaults to showing the
  logo if omitted.
</ParamField>

## Core Behavior

### Multiple Widgets on a Single Page

You can embed multiple portal sections on the same page by creating multiple container divs with the `Nexudus-widget-iframe` class:

```html theme={null}
<!-- Meeting Rooms Section -->
<h2>Book a Meeting Room</h2>
<div
  class="Nexudus-widget-iframe"
  url="https://your-location.nexudus.site/bookings/meeting-rooms/list"
  hide-header="true"
></div>

<!-- Events Section -->
<h2>Upcoming Events</h2>
<div
  class="Nexudus-widget-iframe"
  url="https://your-location.nexudus.site/events/list"
  hide-header="true"
  hide-footer="true"
></div>

<!-- Member Directory Section -->
<h2>Our Community</h2>
<div class="Nexudus-widget-iframe" url="https://your-location.nexudus.site/directory" hide-header="true"></div>
```

Each widget operates independently with its own iframe, height management, and communication channel. The widget script handles scroll synchronization for all embedded sections simultaneously.

### Responsive Design

The embedded portal automatically adapts to your website's container width while maintaining its responsive behavior. The iframe adjusts its height dynamically as content changes, such as when filtering booking options or expanding details.

### Navigation Handling

When customers navigate within the embedded portal, the iframe height automatically adjusts to accommodate the new content. The widget also handles scroll-to-top behavior, ensuring customers see new pages from the beginning.

### Permission Management

The widget automatically grants necessary permissions for portal features that require device access:

* **Geolocation** - For location-based features and maps
* **Camera** - For profile photos and document uploads
* **Microphone** - For video calling integrations

### Security Considerations

All communication between your website and the embedded portal happens through secure postMessage APIs. The iframe operates in a sandboxed environment while still allowing necessary functionality.

## Live Example

The following is a live example of a marketing page that embeds the portal booking page without a header or footer. You can also [open the example in a new tab](https://musical-salamander-fcf864.netlify.app).

<iframe src="https://musical-salamander-fcf864.netlify.app" width="100%" height="800px" style={{ border: "none", borderRadius: "8px" }} title="Widget Embedding Example" />

## Common Integration Patterns

<CardGroup cols={2}>
  <Card title="Meeting Room Booking" icon="calendar">
    Embed booking forms directly on your "Meeting Rooms" marketing page, allowing visitors to check availability and reserve spaces without leaving your site.
  </Card>

  <Card title="Member Directory" icon="users">
    Display your coworking community directly on your "Community" page, showcasing the vibrant network of professionals at
    your location.
  </Card>

  <Card title="Event Listings" icon="calendar-days">
    Show upcoming events and workshops on your homepage or dedicated events page, with integrated registration
    capabilities.
  </Card>

  <Card title="Desk Availability" icon="desktop">
    Add real-time desk booking to your "Hot Desks" page, letting customers see and reserve available workspace immediately.
  </Card>
</CardGroup>

## Important Considerations

### Content Height Management

The widget continuously monitors content height changes and automatically adjusts the iframe size. This handles dynamic content like expanding forms, loading states, and pagination without requiring manual configuration.

### Cross-Domain Communication

Since the embedded portal runs on your Nexudus domain while being displayed on your marketing website, all interactions use secure cross-domain messaging protocols to maintain functionality.

### Mobile Responsiveness

The embedded portal inherits responsive behavior from both your website's container styling and the portal's internal responsive design. Test across different screen sizes to ensure optimal display.

### Content Security Policy (CSP) Headers

If your website uses Content Security Policy headers, they may block the embedded portal from loading or functioning correctly. CSP headers control which external resources your page is allowed to load, and overly restrictive policies can prevent the iframe from rendering or communicating with your website.

To ensure the widget works correctly, your CSP headers must allow the following:

* **`frame-src`** - Must include your portal domain (e.g. `https://your-location.nexudus.site`) to allow the iframe to load.
* **`script-src`** - Must include `https://cdn.nexudus.site` to allow the widget script to execute.
* **`connect-src`** - Must include your portal domain to allow cross-domain communication between the widget and the embedded portal.

For example, if your existing CSP header looks like this:

```
Content-Security-Policy: frame-src 'self'; script-src 'self';
```

You would need to update it to:

```
Content-Security-Policy: frame-src 'self' https://your-location.nexudus.site; script-src 'self' https://cdn.nexudus.site; connect-src 'self' https://your-location.nexudus.site;
```

<Warning>
  If the embedded portal appears as a blank space or your browser console shows "Refused to frame" errors, your CSP headers are likely blocking the iframe. Check your hosting platform's security settings or ask your web developer to update the CSP policy.
</Warning>

### SEO Implications

Content within the iframe is not directly indexable by search engines as part of your main website. Consider this when planning which sections to embed versus link to directly.

### Performance Impact

Each embedded widget adds an additional HTTP request and iframe to your page. Consider the performance trade-offs, especially if embedding multiple portal sections on a single page.

<Warning>
  Always test embedded widgets thoroughly across different devices and browsers, particularly for critical booking flows
  that directly impact your revenue.
</Warning>

## Troubleshooting

### Widget Not Appearing

* Verify the widget script loads successfully from the CDN
* Check that the container element uses either the `Nexudus-widget-iframe` ID or class
* Ensure the URL attribute points to a valid portal page
* Check your browser console for CSP-related errors (messages containing "Refused to frame" or "Blocked by Content-Security-Policy") and update your CSP headers accordingly

### Height Issues

* The widget automatically manages height, but complex layouts might need additional CSS styling on your container
* Check browser console for any cross-domain communication errors

### Mobile Display Problems

* Ensure your website's viewport meta tag includes appropriate scaling settings:
  ```html theme={null}
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  ```
* Check that your container element has adequate padding and doesn't constrain the iframe width
* Test on actual mobile devices, not just browser emulation, as iframe behavior can differ
* Verify touch events and gestures work correctly within the embedded portal
* Consider adding CSS media queries to adjust container sizing for smaller screens