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
- from Dashboard - Copy role specific room code from Join Room section for a role in a room
- via API - Use Create Room Codes API to create room codes and get room codes using retrieve room codes API.
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.
Embed natively
Embed the Prebuilt component natively in your iOS, Android or web app.
Prebuilt links
In this guide, we will create role-specific Prebuilt link and share/embed the link as an iframe.
Get room code and template subdomain
Prebuilt Link Structure
Prebuilt links are role specific room links with a format https://<template-subdomain>.app.100ms.live/<room-code>
where,
template-subdomain
- is the subdomain that you’ve defined at the time of template creation on 100ms Dashboard. Copysubdomain
from Template details page on 100ms Dashboardroom-code
- unique room code of a role for which you're creating the room link. Get room codes for each role- Copy role specific room code from Join Room section for a role in a room
- Create Room Codes API to create room codes
Construct the link
Once you have the template-subdomain and room code ready, append these to the link structure for all roles in your room.
Prebuilt Link for roles
- Host Prebuilt Link :
https://
template-subdomain
.app.100ms.live/meeting/room-code-for-host
- Guest Prebuilt Link : https://template-subdomain
.app.100ms.live/meeting/room-code-for-guest
Passing user context with Prebuilt links(optional)
When using Prebuilt links and room codes, you can pass your user ID and user name to the Prebuilt link by appending ?userId=<user_id>&name=<user_name>
to the link. This way, you can track user specific events when using server-side APIs and webhooks.
Prebuilt Links with user context
- Host Prebuilt Link :
https://
template-subdomain
.app.100ms.live/meeting/room-code-for-host
?userId=<user_id>
&name=<user_name>
- Guest Prebuilt Link : https://
template-subdomain
.app.100ms.live/meeting/room-code-for-guest
?userId=<user_id>
&name=<user_name>
When you pass a user name to 100ms Prebuilt, it pre-populates the user's name field on Prebuilt's preview screen. The user's name field becomes locked after being pre-filled, preventing users from modifying their name.
Share or Embed as iFrame
Once you have a Prebuilt link ready, you can share it with your users on the fly as push notification, SMS, email etc or directly embed the link in your application. Refer the sample code snippet to embed the Prebuilt link as an iframe.
<iframe title="100ms-app" allow="camera *;microphone *;display-capture *" src="https://<your-template-subdomain>.app.100ms.live/meeting/<room-code>" style="height: 100vh; width: 100%; border:0;" > </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 throughRoomKit
packages - TheRoomKit
package will contain more (lower-level) UI components - If you need a specific UI component, share your feedback on our email support@100ms.live
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
anduserID
of the user joining the roomuserName
- prefills the user name on HMSPrebuilt preview screenuserID
- 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;