Home
  • πŸ˜ƒWelcome to Cataleya
  • Cataleya Basics
  • 🏁Getting Started
    • Building a Chatbot
    • Testing a Chatbot
    • Installation
      • Installation on Website
        • Installation using HTML
        • Installation using Google Tag Manager
      • Installing on Wordpress
      • Installing on SquareSpace
      • Installation on WhatsApp
      • Installation on Facebook
      • Installation on SMS
    • Deploying a Chatbot
    • Utility Tools
  • ⏹️Action Blocks
    • Overview
    • Trigger
      • Set values to variables using Trigger
    • Send Message
    • Collect Input
    • Buttons
    • Carousel
    • Calendar
    • Send an Email
    • Branch
    • Image Carousel
    • Human Handover
    • Slider
    • File Upload
    • Delay
    • Form
    • Flow
    • Jump
    • Codeblock
      • Dynamic Dialog Generator
    • Options
    • List
    • Reply Buttons
    • AI Model
  • πŸ€–AI Studio
    • Overview
      • From URL
      • From File
      • From Intent
  • πŸ”—Integrations
    • Overview
    • Service Call
    • Javascript
    • Zapier
    • Code block
    • Google Calendar
    • Calendly
    • HubSpot
    • DialogFlow
    • Link Tracking
  • βœ‰οΈLive Chat
    • Overview
      • Live Chat Screen
      • Live Chat Settings
  • πŸ› οΈTroubleshooting
    • Cloning Bots
    • Connecting Action Blocks
    • Creating Loops
    • Setting Up Fallback Variables
    • Setting Up Link Tracking
    • Variable Manager
    • Image Dimensions
  • πŸ“£Outbound Bots
    • Overview
    • Building One Off Campaign
    • Building Ongoing Campaign
    • Creating a WhatsApp Template
    • Action Blocks: Outbound
      • Send WhatsApp
      • Send SMS
      • Delay
      • Branch
  • 🎨Chatbot Customisation
    • Chatbot Appearance
    • Custom CSS
    • Embed bots in iFrame
    • Embedding the Chatbot
    • JS functions to show/hide
  • πŸ‘œAccount Management
    • Teams
    • Teammates
    • Purchasing a plan
    • Payment Methods
    • Refund Policy
    • Reset Password
    • Deleting Account
  • ⏺️Reporting
    • Analytics Dashboard
    • Custom Reports
    • What are contacts in Cataleya?
    • Scheduling a Contact Report
    • Exporting a Contact List
    • What are weekly reports?
      • What are weekly reports?
Powered by GitBook
On this page
  1. Chatbot Customisation

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 1 year ago

🎨