How to add multiple widgets to a website with JavaScript

The instructions below are for desktops and laptops only.

If you manage multiple tawk.to properties and want to display more than one chat widget on the same website, you can do this using a custom JavaScript solution. This allows you to run multiple widgets independently—ideal for multi-brand support or separate teams.

Note: This method requires basic coding knowledge. If you're not familiar with HTML and JavaScript, consider working with a developer.

Understanding the difference between a property and a widget is key to managing your tawk.to setup effectively.

Property

A property is a container for all your settings and data. It’s typically associated with a specific website, business, brand, organization, or event.

When you create a new property, you’re setting up a separate workspace that can include:

• Chat widgets

• Trigger messages

• Knowledge Base

• Shortcuts

• Tabs

• Agents

Note: Add-ons (such as AI Assist and Remove Branding) are purchased per property and do not transfer between properties.

Widget

A widget is the chat interface your visitors see. It allows users to:

• Start a live chat

• Leave offline messages

• View content shared via widget cards

Each property can have up to 20 widgets, and you can customize each one individually, including:

• Design and color

• Display language

• Visibility rules

• Widget behavior

Note: Add-ons purchased for a property apply to all widgets within that property.

By default, the tawk.to embed script only supports loading one widget per page. If you add more than one standard embed script, they will conflict. This is because each widget script uses the same global object (Tawk_API) and global event listeners, which can't be duplicated on the same page.

To work around this limitation, you can dynamically inject each widget using JavaScript in a way that avoids conflicts.

2. Select the correct property.

3. Click Administration on the top menu.

4. Click Chat Widget under Channels in the left menu. Then, copy the last part of your Direct Link. This is a combination of your Property ID and Widget ID.

To load different widgets dynamically, you’ll need to update the standard embed code by specifying the correct Property ID and Widget ID.

Update the script URL like this:

To change the widget, simply update the Widget ID at the end of the URL.

To change both the property and the widget, update both IDs in the URL. Example with actual IDs:

This method allows each widget script to load independently, helping prevent conflicts between multiple widget scripts on the same page.

Here’s a sample implementation of the tawk.to widget code that dynamically loads a widget based on the chat ID you provide:

The purpose of the getChatId() function is to supply the correct Property ID and Widget ID in the format.

You can customize this function to return different chat IDs based on your own criteria—such as domain, user location, or user role—depending on your setup.

Use cases:

Change the widget or property based on the language of a page

Change the widget based on the visitor’s language

Change the widget based on visitor location using Cloudflare’s IP Geolocation

• This solution relies on JavaScript and requires a basic understanding of how to edit your website's code.

• While this method works in many cases, using multiple widgets on a single page may affect performance or cause unexpected behavior depending on how your site is structured.
  
  

• You won’t be able to use the Tawk_API object globally for both widgets. Custom scripting may be needed for advanced control.

If you have feedback about this article, or if you need more help:

• Click the green live chat icon

• Schedule a call with us

• Visit our community