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