Quickstart

Prerequisites

Set up a template

A template governs how its Prebuilt UI functions. Head over to 100ms dashboard to create a template.

Create a room

A default room gets created for any template created using the 100ms dashboard. Create more rooms under the same template programmatically using the create room API.

Create and get room codes

Room code belongs to a unique room_id and role. Get room codes for each role

Get started with Prebuilt

Depending on the desired user experience, you can use Prebuilt as shareable links or embeddable components.

Share or embed Prebuilt Links

Create role specific Prebuilt links and share it with you users or embed them as iframe.

Get Started with Prebuilt Links →

Embed natively

Embed the Prebuilt component natively in your iOS, Android or web app.

Embed as a component →

In this guide, we will create role-specific Prebuilt link and share/embed the link as an iframe.

Embed as Component

100ms Prebuilt can be embedded as a native component HMSPrebuilt by importing 100ms Room Kit package in your app.

Component Basics

  • The HMSPrebuilt component is available across React, iOS, Android, Flutter, and React Native - This is the highest-level UI component of a room, covering all screens and functionality - This component is shipped through RoomKit packages - The RoomKit package will contain more (lower-level) UI components - If you need a specific UI component, share your feedback on our Prebuilt Discord channel

Fetch room code

HMSPrebuilt uses room code to get initialised, it allow users to uniquely join a room_id with a specifc role. Head over to guides for create room codes and get room code.

Embedding HMSPrebuilt component

  • Import - HMSPrebuilt component requires importing RoomKit package
  • Initialise - Along with room code, you can additionally set userName and userID of the user joining the room
    • userName - prefills the user name on HMSPrebuilt preview screen
    • userID - use your user IDs to track user of your app

Sample code snippet to embed Prebuilt component. Head over for a step by step guides for React, Android, iOS, React Native, Flutter.

// import HMSPrebuilt component from Roomkit package import { HMSPrebuilt } from '@100mslive/roomkit-react'; // add pre-built component function App() { return ( <div style={{ height: "100vh" }}> <HMSPrebuilt roomCode="<room-code>" /> </div> ); } export default App;

Have a suggestion? Recommend changes ->

Was this helpful?

1234