Embed bots in iFrame

With Cataleya, you now have the ability to trigger the bot in the new tab or window based on your preference, ensuring that currently content on the web page is not hidden behind chat screen

How do I display the chatbot in iFrame?

It is pretty simple and requires minor changes in the code that you will need to make in-order to have the bot trigger in different window or tab. You can follow the following steps;

  • Go to 'Channel Configuration -> Web -> Configuration'

  • Enter the URL of your website in 'Website URL' where you would like the bot to be deployed

  • Copy the 'Code Snippet'

  • Replace the following script source;

<div id="root" style="height:500px; width:500px"></div>
<script
src="https://app.cataleya.io/chat-widget/kRq5aWtGnnYg054032275570H2y2XAMR.js
"widget-container-id="root"></script>

  • With the following script; 

<div id="root" style="height:500px; width:500px"></div>
<script
src="https://app.cataleya.io/chat-widget/g39gy4APmcc2095157146729LGoQGaw2.js
"widget-container-id="root"></script>

You can change the height and the width of the chatbot or chatbot screen based on your preference by making changes in the above code, under "Height" & "Width" option by using either pixels (px) or percent (%)

  • Copy & paste the code snippet post making changes in the code on those pages of your website where you would like to display the bot

Cataleya recommends having the code copied before the <Body> tag in-order to ensure that the bot triggers as soon as the web page loads

PreviousCustom CSSNextEmbedding the Chatbot

Last updated