How to add multiple widgets to a website with JavaScript

You can add multiple widgets to a website by pasting a widget code into the HTML for each page.

However, if you’re handy with code or have a developer on your team, there’s a faster way to add multiple widgets to a large website.

In this article, we’ll show you how to modify your widget code so the widget loaded on each page is based on a function and conditions you set. For example, on a multi-language site, you can set up your widget code to automatically load a widget according to the language on the page.

To get started, you’ll need your property and widget IDs.

NOTE: The instructions below can only be completed from a browser or the tawk.to desktop apps. They cannot be completed in the tawk.to mobile app.

Here is a summary explaining the difference between a property and a widget:

A property is where all your settings and data are grouped and stored. It may be associated with a website, business, organization, or even an event. Creating a new property allows you to set up a new Knowledge Base, widgets, trigger messages, shortcuts, agents, tabs and more. Add-ons must be purchased separately for each property.

A widget is the user interface where visitors can chat, leave messages and access any content you share via the tawk.to widget cards. Each property can have up to 20 widgets. You can customize the content, design, language and visibility settings of each individual widget. If you have purchased Add-ons, they will work for any chat widget in the same property.

Please note: Only one widget at a time can function on the same website. The examples below load a single property/widget according to the criteria you choose. To use this method, you will need to remove the WordPress plugin, if it is being used.

To vary the widget that loads on your page, change the following src attribute based on the widget you want to embed:

In the examples below, chatId is comprised of 'your-property-id/your-widget-id' which is being resolved by the getChatId function.

You can find your property ID in your Property Overview. Go to ⚙️Administration ➞ Overview and copy your Property ID. 

To find your widget ID, go to Dashboard ⮕ Admin ⮕ Chat Widget.

Then select Chat Widget.

Select the widget you want to embed in the Chat Widget pull-down menu. Then copy the last segment of your Direct Chat Link.

Here’s where to add your property ID and widget ID:

To change the widget, change the widget ID at the end of the code.

To change both the property and the widget, you’ll need to provide options for both the property ID and the widget ID.

Here’s what it looks like using the property ID and widget ID in the examples above:

Here's a standard implementation of the widget embed code.

In each example, the getChatId function’s only purpose is to provide the chat id for the embed code to load. You can modify the function based on any criteria you choose.

• 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

If you need additional assistance setting up multiple widgets on your site, visit our Developer Platform or reach out in the chat. We are here to help 24x7. You may also schedule a call with our team to help you with adding multiple widgets to a website with JavaScript.