Livechat Widget Installation

Prev Next

The Livechat widget is a chat interface designed to be embedded directly into any webpage. Visitors on your website can click the widget to initiate a conversation instantly with your team. It can serve as an excellent tool for use cases such as:

  • Offering live and real-time support to customers/users.

  • Gathering information directly from people interacting with your website chatbot.

This guide details the steps required to install the Livechat widget on your external website.

Prerequisite

Before installing the widget, you must add the domain of the website where you intend to install the Livechat to your allowed list.

To do this,

  1. Go to Administration > Workspace > Settings > Omnichannel > Livechat.

  2. Add your domain to the Livechat Allowed Domains field. Make sure to exclude https:// or any trailing slashes (/) from the domain entry.

By configuring this setting correctly, you authorize the Livechat widget to function on your specified domain.

Install livechat widget

To install the widget:

  1. Go to Administration > Omnichannel > Livechat Installation.

  2. Copy the code snippet provided.

  3. Paste the code snippet into your website's HTML, placing it just above the closing </body> tag.

    Example snippet:

    <!-- Start of Rocket.Chat Livechat Script -->
	<script type="text/javascript">
	(function(w, d, s, u) {
		w.RocketChat = function(c) { w.RocketChat._.push(c) }; w.RocketChat._ = []; w.RocketChat.url = u;
		var h = d.getElementsByTagName(s)[0], j = d.createElement(s);
		j.async = true; j.src = 'https://<your-rocketchat-workspace-domain>/livechat/rocketchat-livechat.min.js?_=201903270000';
		h.parentNode.insertBefore(j, h);
	})(window, document, 'script', 'https://<your-rocketchat-workspace-domain>/livechat');
	</script>

Once the script is added, the Livechat widget Livechat widget  appears at the bottom-right of your website. Visitors can click the widget to start a conversation with your team.

You can extend the widget's functionality by adding methods to this script. Refer to the Livechat Widget API for more details.

Troubleshoot Livechat widget installation

If you have issues displaying the Livechat widget, check your browser developer console to examine the details of any errors you might be experiencing. Common issues include:

  1. Failed to read 'localStorage' properly from Window

    This usually occurs when third-party cookies are blocked. Try another browser or update your cookie settings to allow third-party storage.

  2. Trying to access localhost:3000

    Review the Site URL setting under Administration > Workspace > Settings > General and the server name setting on your reverse proxy (if you have one) to guarantee they are all aligned and correspond to the same URL used in your Livechat widget installation script.

  3. Livechat doesn't show OR Content Security Policy directive violation

    Go to Administration > Workspace > Settings > Omnichannel > Livechat and verify that your domain is present in the Livechat Allowed Domains field. Make sure to exclude https:// or any trailing slashes (/) from the domain entry.

Next steps

With the Livechat widget successfully installed on your website, you can now customize its functionality and visual appearance.

  • Livechat settings: See how to manage the overall operational settings and routing logic of the Livechat service.

  • Customize widget appearance: Learn how to modify the visual appearance of the widget to align with your brand colors.