# Lobby Embeds

## Overview

Lobby Embeds bring the power of Roam virtual lobbies into your website.
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
```