Embedding Your Chatbots on Your Website

Embedding a Chatbot directly on your website ensures that guests can complete it without navigating away. Follow the steps below to integrate your Chatbot into your site easily.


Embed Your Chatbot on Your Website

Use the Embed Designer to match your Chatbot to your websites branding using the steps below:

Navigating to the Embed Designer

  1. Click on Chatbots in the left-hand navigation menu.
  2. Select the bot you want to embed.
  3. Click on the Embed Designer tab at the top.

Choosing the Embed Option

Choose how your chatbot should load on your website:

  • Widget on load: The chatbot appears automatically when a page loads.
  • Widget on click: The chatbot shows in a widget, but only when a link or button is clicked. 
  • Lightbox on click: Opens over the page when a visitor clicks on a link or a button.

Designing the Bot

The Embed Designer provides a live preview (WYSIWYG editor), allowing you to see real-time updates of what your bot will look like.

Here are the key customization options available:

  • Theme Color: Adjusts the overall color design of the bot.
  • Chatbot Icon: Image displayed at the top of the bot and next to its messages.
  • Company Name: Name displayed at the top of the bot.
  • Chatbot Name: Name displayed next to each of the bot’s messages.
  • Launcher shapes and icons: Adjust what the launcher button looks like.

Embedding the Code

  1. Click Get the code (bottom right) to generate the embed code.
  2. Click on Copy & close to copy the embed code.
  3. Add the code on your website.
Was this article helpful?
Thank you for your feedback!
back to top