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 desktop apps. They cannot be completed in the mobile app.

What’s the difference between a property and a widget?

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 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.

Customizing the code for your property and widget

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 DashboardAdminChat 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 how to modify your widget code to include multiple widgets

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.

Use Cases

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.


Was this article helpful?

61 out of 92 liked this article

Still need help? Message Us