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
  • Benefits of embedding a chatbot?
  • What are the ways to embed the chatbot?
  • How do I embed a Chatbot?
  1. Chatbot Customisation

Embedding the Chatbot

With this functionality of Cataleya, you now have the ability to embed the chatbot as a section on a webpage

With this functionality, you can now have multiple chatbots on different sections of a page in order to interact with the visitors without any additional CSS/HTML efforts from your end.

Benefits of embedding a chatbot?

  • Improves UX with an immersive view

  • Make your content interactive

  • Embed multiple bots on a single page

  • Ability to trigger certain bot only on certain section based on trigger condition

What are the ways to embed the chatbot?

There are two ways through which the chatbot can be embedded to your site, they are;

As a Chat Bubble

This will allow you to view the chatbot as a chat bubble. You can either have in on one page or on multiple pages based on your preference. All you will need to do is copy the following snippet on the pages of your website as per your preference.

<script src='https://app.test.cataleya.io/chat-widget/3aTeYpJ9CRfx041341925347viF2LaIZ.js' defer></script><br>
As an iFrame

This will allow you to embed the chatbot on the particular section of the page. All you need to do is copy the following snippet on the page of your website as per your preference.

You can also modify Width & Height using width & height field based on your preference in the following snippet

You can also hide or show the Header of the chatbot using the display_header field based on your preference. By Default it will be off.

<iframe width="640" height="480" src="https://embed.test.cataleya.io/3aTeYpJ9CRfx041341925347viF2LaIZ/bot/666REE2YvBBk063838271765xl38Ddlv?display_header=false&history_retention=false" frameborder="0"></iframe><br>

How do I embed a Chatbot?

You can follow the following steps to embed the chatbot on your website;

  • Go to 'Bot Builder'

  • Click on 'Menu Gear' against the bot you would like to embed

  • Select 'Embed'

  • Click on 'Two Page' icon to copy the code provided for displaying it as Chat Bubble or having it an iFrame based on your preference

  • Paste it either on all the pages or selective pages based on your preference

By default this will be 'On' for all the chatbots build for web channel

PreviousEmbed bots in iFrameNextJS functions to show/hide

Last updated 1 year ago

🎨