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

theme

Can be dark or light. See examples below:

light	dark

accentColor

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

#D32F2F (red)	#008E52 (green)

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