How to Embed Multiple Widgets in the Same Page Using the Widget IFrame

Learn how to embed multiple chat widgets on the same page using the widget iFrame. This tutorial covers how to pass a different chat session for each widget and the recommended use of randomly generated session IDs.

If you are using ChatBotKit's widget integration, you might want to embed multiple chat widgets on the same page. Fortunately, you can do this easily using the widget iframe.

To embed a widget on your page, use the following code:

<iframe src="https://static.chatbotkit.com/integrations/widget/{WIDGET_ID}/frame?...parameters"></iframe>

Make sure to replace {WIDGET_ID} with the actual ID of your widget.

To embed multiple widgets, you can simply add more iframe tags with different widget IDs. However, if you want to use the same widget you probably need to pass a different chat session.

By default widgets with the same ID share the same session. This is good if you want to continue the conversations from multiple windows. In the case of embedding multiple widgets with the same widget ID this is most likely not the desired effect.

For example, and you want each widget (same WIDGET_ID) to use a different chat session, you can use the following code:

<iframe src="https://static.chatbotkit.com/integrations/widget/{WIDGET_ID}/frame?session=123"></iframe>
<iframe src="https://static.chatbotkit.com/integrations/widget/{WIDGET_ID}/frame?session=456"></iframe>

In this example, the first widget will use session 123, and the second widget will use session 456.

In a production environment we recommend to use randomly generated session IDs. Keep in mind that one session equal one continuous conversation. There is no session sharing between different widgets (different WIDGET_ID).

That's it! With these simple steps, you can easily embed multiple chat widgets on the same page using the widget iframe.