retour aux tutoriels

Comment intégrer plusieurs widgets dans la même page à l'aide de l'IFrame Widget

Apprenez à intégrer plusieurs widgets de chat sur la même page à l'aide de l'iFrame de widget. Ce tutoriel explique comment passer une session de chat différente pour chaque widget et recommande l'utilisation d'identifiants de session générés de manière aléatoire.

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>

Veillez à remplacer {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.