Tutorial: Adding a Chat Room to your Webapp

Manuela Massochin
March 23, 2021
·
min read

First of all, we would like to thank the author of this post, Dhruv Jain. He's a member of our beloved community and has originally posted this article on his Medium account. You can check the original post clicking here.

Add chat rooms just like you add YouTube videos to your Web App!

With Rocket.Chat, you can add a chat room to your website or web app running with minimal code in a few minutes.

Adding a Chat Room to your Webapp
Adding a Chat Room to your Webapp

The technique is known as iframe integration. Let’s dive in!

Provision Rocket.Chat Server

There are many ways in which you can provision a Rocket.Chat server in order to leverage the power of adding chat rooms to your web app. I personally found installing it via snaps pretty quick and easy. Using just one line, you can install and start using Rocket.Chat server on Ubuntu.

  • sudo snap install rocketchat-server

Browse to http://localhost:3000 and setup Rocket.Chat. You can visit the installing and updating section for more provisioning methods.

Authenticate User for Chat Room

Once the Rocket.Chat setup server is complete, you need to set API URL endpoint and iframe URL endpoint in the administration > accounts > iframe section to automatically authenticate a user on Rocket.Chat server when that user logs in to your web app.

Iframe Auth Settings in Accounts
Iframe Auth Settings in Accounts

After the iframe section configuration, your web app needs to handle the configured API URL endpoint to return the loginToken to the Rocket.Chat server. This authenticates the user by logging that user in via Rocket.Chat login API, and allows Rocket.Chat to establish the user’s identity.

The iframe authentication docs explain iframe auth terms and concepts if you like to dig deep. You can also try iFrame Auth Example as it really helped me when I first experimented with iframe auth integration in my web app.

Fast Load Chat Rooms?

Before you embed the chat rooms in your web app, the x-frame-options need to be set to your web app's domain restricting Rocket.Chat to load the iframe in the specified web app only.

Note: Disabling the restrict access inside any iframe setting is a security breach that would enable the iframe to load in any web app.

You can navigate to administration > general > restrict access inside any iframe to set the x-frame-options.

X-Frame-Options settings in General to restrict iframe load
X-Frame-Options settings in General to restrict iframe load

You can now include the iframe tag in your HTML code to load the chat room.

<iframe
src="http://localhost:3000/channel/general/?layout=embedded"
title="myframe"
></iframe>

In this example, the embedded layout was used since it provides a more “simplistic” view, hiding the left sidebar with the channel lists and account management buttons.

Now that a chat room has been added to your web app, in order to switch between different chat rooms, you can easily change the src of the iframe in which the chat room is embedded. But, doing so will fetch the whole client-side code again and given that Rocket.Chat is a client-side rendered app it will result in slow loading of chat rooms.

Without using the event command technique, it takes time to switch bewteen channels
Without using the event command technique, it takes time to switch bewteen channels

However, you can instantly switch between chat rooms without any loading. It involves a few config changes in the Rocket.Chat server iframe integration settings and then, using postMessage() in your client-side code, the iframe contentWindow will client-side route to a chat room thus making the switching instant without any loading.

In order to make the config changes, you need to navigate to administration > general > iframe integration settings and set the receive origins settings as your web app's domain.

Iframe integration settings to enable receive event commands
Iframe integration settings to enable receive event commands

Now that the Rocket.Chat server can listen to events from the parent web app, you can use postMessage() to convey the GO event command to the iframe window to browse to a different chat room.

For example, if one wants to switch to a chat room named “Evening-Party”, one could include the following code.

<div onClick={() => {
document.getElementsByTagName(“iframe”)[0].contentWindow.postMessage(
{ externalCommand: "go", path: "/channel/Evening-Party/?layout=embedded" },
"http://localhost:3000"
);}}> Evening Party </div>

Instant switching using the event command technique
Instant switching using the event command technique

Go try it out!

Using the above three steps, we can easily add the capability of chatting in our web apps -- All thanks to Rocket.Chat.

Get started with Rocket.Chat’s secure collaboration platform

Talk to sales

Frequently asked questions about <anything>

Manuela is a Demand Generation Specialist at Rocket.Chat
Manuela Massochin
Related Article:
Team collaboration: 5 reasons to improve it and 6 ways to master it
Want to collaborate securely with your team?
Deploy Rocket.Chat on-premise or in the cloud and keep your conversations private.
  • Digital sovereignty
  • Federation capabilities
  • Scalable and white-labeled
Talk to sales
Looking for a HIPAA-ready communications platform?
Enable patients and healthcare providers to securely communicate without exposing their data.
  • Highly scalable and secure
  • Full patient conversation history
  • HIPAA-ready
Talk to sales
The #1 communications platform for government
Deploy Rocket.Chat on-premise, in the cloud, or air-gapped environment.
  • Digital sovereignty
  • Trusted by National Geospatial-Intelligence Agency (NGA), the US Army, the US Navy, and the US Air Force
  • Matrix federation capabilities
Talk to sales
Want to customize Rocket.Chat according to your own preferences?
See behind the engine and change the code how you see fit.
  • Open source code
  • Highly secure and scalable
  • Unmatched flexibility
Talk to sales
Looking for a secure collaboration platform?
Keep your conversations private while enjoying a seamless collaboration experience with Rocket.Chat.
  • End-to-end encryption
  • Cloud or on-prem deployment
  • Supports compliance with HIPAA, GDPR, FINRA, and more
Talk to sales
Want to build a highly secure in-app chat experience?
Use Rocket.Chat’s APIs, frameworks, and managed backend to build a secure in-app or live chat experience for your customers.
  • Supports compliance with HIPAA, GDPR, FINRA, and more
  • Highly secure and flexible
  • On-prem or cloud deployment
Talk to sales

Our best content, once a week

Share this on:

Get your free, personalized demo now!

Build the most secure chat experience for your team or customers

Book demo