Configure Chatbot Channel

1. Feature Overview

Once you’ve built a chatbot, you must add it to a channel. We support two channels – WhatsApp and Web.
The WhatsApp channel lets you integrate your chatbot with your WhatsApp business account. The Web channel lets you integrate the chatbot on a portal/landing page/website of your choice.

2. Prerequisites

• You must install and configure the Chatbot feature.
• If you’re integrating the chatbot with WhatsApp, you must have a WhatsApp Business account with either Kaleyra or Gupshup. These are the only two data providers currently supported.
• If you’re integrating the chatbot with Web, prior developer experience is required.

3. Integrate the Chatbot with WhatsApp

1. On the Chatbot screen, from the left-menu, navigate to the Channels tab.
2. Click WhatsApp, and from the right panel, click Add New Configurations.
3. On the WhatsApp pop-up, enter the following details –
   • WhatsApp Number – Enter your WhatsApp Business Number.
   • Select Bot – From the list of chatbots you’ve created, select the bot you want to integrate with WhatsApp.
   • Select Provider – Select the WhatsApp Business Provider with whom you have an account. You can select from Kaleyra or Gupshup.
     • If you’ve selected Kalyera, enter the following details –
       • API Key – Your Kaleyra account’s API Key. To know how to obtain this, refer to How can I generate API Keys?
       • SID – Your Kaleyra account’s Security ID. To know how to obtain this, refer to Creating Sender ID.
     • If you’ve selected Gupshup, enter the following details –
       • Two Way User ID – Paste the Gupshup user ID that was generated for two-way communication. Contact your Gupshup account Manager from Gupshup to get this ID.
       • Two Way Password – Paste the Gupshup password generated to facilitate two-way communication. Contact your Gupshup account Manager from Gupshup to get this password.
       • Notification User ID – Paste the Gupshup user Id generated for one-way communication. Contact your Gupshup account Manager from Gupshup to get this ID.
       • Notification Password – Paste the Gupshup password generated to facilitate one-way communication. Contact your Gupshup account Manager from Gupshup to get this password.
4. Once you’ve entered the details, click Save.
5. Once the set-up is complete on the chatbot, an inbound webhook has to be configured in your Kaleyra/Gupshup account, for you to receive incoming messages from your leads. To do this, contact your WhatsApp service provider’s account manager, and they’ll help you configure this webhook in your account.
6. Once this is done, the chatbot is integrated with your WhatsApp Business account, and your leads can now interact with the chatbot through WhatsApp.

4. Integrate the Chatbot on the Web

1. On the Chatbot screen, from the left menu, navigate to the Channels tab.
2. Click Web, and from the right panel, click Add New Configurations.
3. On the Web pop-up, enter the following details –
   • Bot Title – The external display name for the chatbot. This is what your leads will see when they interact with the bot.
   • Bot Subtitle – If required, you can add a subtitle for the bot. Your leads can see this when they interact with the bot.
   • Bot Logo – You can add a bot logo. To do this, add an image URL of the logo.
   • Select Bot – From the list of chatbots you’ve created, select the bot you want to integrate with WhatsApp.
   • Whitelist URL – Enter the website URL on which the bot is going to be integrated. This is to ensure the LeadSquared servers don’t block the website in which the bot is integrated. This is mandatory.
   • Help Text – Help text on the bot, to help your lead initiate the chat. For e.g., the help text can read, “Send ‘Hi’ to begin the conversation”.
   • Theme Color – The overall theme color for the bot. You can enter the hex code of a color, or select one from the colour picker.
   • Font Color – The font color of the messages sent through the bot. You can enter the hex code of a color, or select one from the colour picker.
   • Position – Configure the position of the chatbot on your website. The values you enter here are pixels to the right and bottom of the screen where you want to display the chatbot.
   • Show Powered by Converse – Disable this checkbox if you don’t want to display the Converse branding on your chatbot.
4. Once you’ve entered the details, click Save.
5. Once the channel is saved, click to copy the chatbot script. Embed this script into the header of the website on which you want to integrate the chatbot. Once this is done, the chatbot is live on your website.

Any Questions?

Did you find this article helpful? Please let us know any feedback you may have in the comments section below. We’d love to hear from you and help you out!