How to add in-app chat to a JavaScript app

1. Create a chat project and two test users

Chat is included in the RTCExpress Free plan. Create a project in the customer portal, then use your own backend to give two test users short-lived tokens for the same room, for example support-room-42.

Your backend must keep the App Secret private. It authenticates your user, checks that they may enter the room, and requests the scoped user token. The browser receives only that token.

2. Initialize the JavaScript SDK and join a room

Initialize one SDK instance for the signed-in user. Register the room and message listeners before joining so the interface is ready when the server confirms membership.

import { RTCExpress } from "@rtc/sdk";

const rtc = new RTCExpress();

rtc.on("roomJoined", async ({ roomId }) => {
  const history = await rtc.getMessageHistory(roomId, { limit: 30 });
  renderMessages(history.messages);
});

rtc.on("message", (message) => appendMessage(message));

await rtc.init({ serverUrl, appId, userId, token });
rtc.joinRoom("support-room-42");

The public package is not published to npm yet. Start from the JavaScript starter, which contains the local SDK packages, or contact support for integration access.

3. Send a message from your interface

When the person presses Send, validate the visible input in your interface and pass the message text to the SDK. The method returns a client message ID you can use to reconcile optimistic UI with the received event.

sendButton.addEventListener("click", () => {
  const text = messageInput.value.trim();
  if (!text) return;

  const clientMessageId = rtc.sendMessage(text);
  appendPendingMessage({ clientMessageId, text });
  messageInput.value = "";
});

Do not send passwords, App Secrets, access tokens, or private keys in messages. Your application should define its own retention, moderation, and reporting rules for customer content.

4. Test the actual chat experience

• Use two different user IDs in the same project and room.
• Verify that each person sees new messages without refreshing.
• Reconnect one browser and confirm that the interface handles connection changes clearly.
• Load message history only after room membership is confirmed.
• Try a user token for another room and ensure your backend denies access.

Where chat fits with voice and video

Use chat as the default conversation surface, then let your product move to a voice or video interaction when users need a faster, more personal discussion. See the voice, video, and chat API guide to choose the right feature, or explore voice calling and video calling.