# Lobby Embeds

## Overview

Lobby Embeds bring the power of Roam virtual lobbies into your website.

For **headless AI agents** that book without a browser embed, see
[Lobby Booking for AI Agents](/docs/integrations/lobby-agents)
(public unauthenticated availability + book API).
Lobby Embeds allow you to integrate these lobbies directly into your web
pages, providing your users with booking and drop-in capabilities to your Roam meetings.

## Getting Started

Before you can add the Lobby snippet to your website, you will need:

- An active Roam account with a configured Virtual Lobby
- Access to modify your website's HTML code

## Code Snippet

Below is an example embed code snippet:

```
<!-- Roam inline widget begin -->
<div id="roam-lobby" style="min-width: 320px;"></div>
<script type="text/javascript" src="https://ro.am/lobbylinks/embed.js"></script>
<script>
  const parentElement = document.getElementById("roam-lobby");
  Roam.initLobbyEmbed({
    url: "https://ro.am/example-lobby-handle/",
    parentElement,
    accentColor: "#0059DC",
    theme: "dark",
    onSizeChange: (width, height) => {
      parentElement.style.height = `${height}px`;
    },
  });
</script>
<!-- Roam inline widget end -->
```

Simply replace `https://ro.am/example-lobby-handle` with your lobby URL and copy and paste into your website's HTML.

## Advanced Configuration

For more control over your Lobby Embed, you can use additional configuration options.
Below is a snippet with all options enabled, followed by a description of each option.

```
<!-- Roam inline widget begin -->
<div id="roam-lobby" style="min-width: 320px;"></div>
<script type="text/javascript" src="https://ro.am/lobbylinks/embed.js"></script>
<script>
  const parentElement = document.getElementById("roam-lobby");
  Roam.initLobbyEmbed({
    url: "https://ro.am/example-lobby-handle/",
    parentElement,
    accentColor: "#0059DC",
    theme: "dark",
    lobbyConfiguration: "default",
    prefill: {
      name: "Bort Johnson",
      email: "bort@bort.com",
      note: "Howdy!"
    },
    onDateTimeSelected: (lobby, payload) => console.debug("onDateTimeSelected", lobby, payload),
    onProfileFormComplete: (lobby, payload) =>
      console.debug("onProfileFormComplete", lobby, payload),
    onEventScheduled: (lobby, payload) => console.debug("onEventScheduled", lobby, payload),
    onSizeChange: (width, height) => {
      parentElement.style.height = `${height}px`;
    },
  });
</script>
<!-- Roam inline widget end -->
```

### parentElement

An HTML [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element). The booking iframe will be injected into the Element provided. The default snippet code above defines a `roam-lobby` div, but you are
free to specify a different Element.

### lobbyConfiguration

Can be `default`, `booking_only`, or `drop_in_button`.

- `default`: The embedded lobby will provide booking and drop-in capabilities
- `booking_only`: The embedded lobby will only present booking capabilities
- `drop_in_button`: Provides a simple button for drop-ins only; see examples below

| drop_in_button |                                      |                                                 |
| -------------- | ------------------------------------ | ----------------------------------------------- |
|                | available                            | unavailable                                     |
| light          | ![light](/img/embed/dropinlight.png) | ![light](/img/embed/dropinlightunavailable.png) |
| dark           | ![dark](/img/embed/dropindark.png)   | ![dark](/img/embed/dropindarkunavailable.png)   |

### theme

Can be `dark` or `light`. See examples below:

| light                          | dark                         |
| ------------------------------ | ---------------------------- |
| ![light](/img/embed/light.png) | ![dark](/img/embed/dark.png) |

### accentColor

A hex color that can can be used to style the lobby embed. See examples below:

| #D32F2F (red)                | #008E52 (green)               |
| ---------------------------- | ----------------------------- |
| ![light](/img/embed/red.png) | ![dark](/img/embed/green.png) |

### prefill

Can be used to prefill user information in the booking flow profile screen. An object of the type:

```
    {
        field_name: "value"
    }
```

Currently supports `name`, `email`, and `note` field_names

### onDateTimeSelected

A callback that will be triggered when a user selects a date and time.

Type definition:

```
(
  lobbyId: string,
  payload: {
    selectedDateTime: {
        date: Date;
        timeSlot: {
            start: number;
            end: number;
        };
        timeZone: string;
    };
  }
) => void
```

- `lobbyId`: UUID that represents your lobby URL
- `payload.selectedDateTime.date`: JS `Date` value with the selected day
- `payload.selectedDateTime.timeSlot.start`: the selected start time of the booking in Unix time (seconds)
- `payload.selectedDateTime.timeSlot.end`: the end time of the booking in Unix time (seconds)
- `payload.selectedDateTime.timezone`: the timezone of the booker in standard [IANA TZ Identifier](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) format; e.g., `America/New_York`

### onProfileFormComplete

A callback that will be triggered when a user completes the profile form.

Type definition:

```
(
  lobbyId: string,
  payload: {
    profile: {
        name?: string;
        email?: string;
        note?: string;
    };
  }
) => void
```

- `lobbyId`: UUID that represents your lobby URL
- `payload.profile.name`: the submitted name the booker
- `payload.profile.email`: the submitted email
- `payload.profile.note`: the submitted note

### onEventScheduled

A callback that will be triggered when the booking is successfully scheduled.

Type definition:

```
(
  lobbyId: string,
  payload: {
    selectedDateTime: {
        date: Date;
        timeSlot: {
            start: number;
            end: number;
        };
        timeZone: string;
    };
    profile: {
        name?: string;
        email?: string;
        note?: string;
    };
    booking: {
        id: string,
    }
  }
) => void
```

- `lobbyId`: UUID that represents your lobby URL
- `payload.profile`: see `onProfileFormComplete`
- `payload.selectedDateTime`: see `onDateTimeSelected`
- `payload.booking.id`: UUID that uniquely represents the booking

### onDropInAvailability

A callback that will be triggered when the drop-in availability status is determined or changes.
You may want to use this with `lobbyConfiguration="drop_in_button"` to show the embedded lobby drop-in button when the host is available and hide it when they are unavailable.

Type definition:

```
(available: boolean) => void
```

### onDropInClick

A callback that will be triggered when a user clicks the drop-in button.

Type definition:

```
() => void
```