How to Easily Build a WhatsApp Chatbot Using Botpress v12 and Smooch

A chatbot can be an incredibly useful aid to your business and this post will give you all the steps you need to build your own. Using Botpress v12 and Smooch (now known as Sunshine Conversations by Zendesk) We'll show you how to connect to WhatsApp and build a simple Q&A bot that responds to a variety of questions.

Before Building the Bot

Before we begin, you will need to set up and configure several services — these will require a business email and at least 64GB of space on your hard drive.

Download Botpress

Begin by navigating to the Botpress v12 Documentation page, and download your preferred version of Botpress.

Create an account on Smooch

While Botpress v12 downloads, navigate to the Smooch/Sunshine Conversations sign-up page. Once you complete the sign-up process, you will then have to create an app and give it a name.

By this point, your download of Botpress should have finished. If you downloaded with the 'binary' option, simply extract the contents of the download into a directory of your choice.

Download Ngrok

The third service we will be using is called Ngrok, which you can download here. Ngrok is a free service that we’ll use to share the Botpress server running on your local machine to the web. Follow the instructions on the site to download and install. You're now ready to start creating your chatbot.

Set up Botpress with API Keys from Smooch

To get started on your chatbot, you need to first open the folder we extracted Botpress v12 to and run the 'bp' file. This will start the bot, which requires the download of some modules. This process takes some time, but should only need to be done once, after which every subsequent launch will be more expedient.

While the Botpress app is setting up, navigate back to your app on Smooch, and select settings. You should see options for naming your bot, giving it a picture, message options, an App ID, and API keys. When you see API keys you should create a new API key.

Build a WhatsApp bot with Botpress
Build a WhatsApp bot with Botpress v12

Create and Configure Your Bot

The Botpress v12 setup should be complete by the time you generate the API key on Smooch. At this point, your console will have told you where to open the Botpress Studio — in our case this was localhost:3000. Navigate to the URL provided in the console and sign-up for your admin account.

Since this is your first time running Botpress, you will see that your workspace has no bots. Select the option to create a bot and give it a name. This will automatically populate the Bot ID field for you. Next, select a Bot Template (such as the 'Learn Botpress Basics' option).

Create and configure a WhatsApp business chatbot
Create and configure a WhatsApp business chatbot

You will see that your workspace now has a bot! Proceed by selecting the bot (click on its name). A bar running vertically, on the left side of the Studio, should draw your attention. The options presented here will be what you work with most while developing your bot. In our case, we will start with the code editor option, which will open a series of directories in the studio and bring us to our next step.

Develop a WhatsApp chatbot using Botpress
Develop a WhatsApp chatbot using Botpress v12

Under Configurations in the code editor, you will see two folders. For now, focus on the Current bot.

Select bot.config.json under Configurations and scroll to 'messaging'. It is here you will be able to add an object 'channels', which will contain an object 'smooch'. In Smooch, create a boolean value called 'enabled' and give it a value of true. You will then need to create 'keyId' and 'secret' strings — which will take the ID and secret from the API key you generated in your Smooch app, respectively.

How to make a WhatsApp bot using JavaScript
How to make a WhatsApp bot using JavaScript

Once this task is completed, save your bot.config.json and navigate to the Global folder under Configurations to open the botpress.config.json. Look for 'externalUrl', which will be set to an empty string. This is a fairly simple service, so just follow the instructions on the site to expose the port the bot will be running on with Ngrok. After that, return to paste the HTTPS URL into the externalUrl string.

Save the file, restart the server and then open your bot again. Click 'Train Now' in the bottom right corner. You should see 'Ready' where there was once 'Train Now'.

Click Train Now to make your WhatsApp chatbot
Click Train Now to make your WhatsApp chatbot

Talk to Your Bot

Return to the Smooch app and you should see that webhooks are configured automatically. Navigate back to integrations, select WhatsApp and then connect. Now, choose your integration mode — for the purpose of this guide, 'Sandbox' will work fine.

Select 'Activate Sandbox' and follow the instructions to send a message to the specified number in WhatsApp. After you have successfully connected your Smooch Sandbox for WhatsApp, you should receive a message. Any further messages will be forwarded to the webhook you created.

Now you will be able to talk with your bot!

Integrate your WhatsApp chatbot with Smooch
Integrate your WhatsApp chatbot with Smooch

Have Your Bot Talk Back

Have your WhatsApp chatbot talk back to you
Have your WhatsApp chatbot talk back to you

Now that we have a blank bot, and received a message confirming that our integrations work properly, let’s begin with the bot’s initial response after we say something.

To do this, navigate to Q&A in the Botpress Studio, which will be the fourth option down on the left sidebar menu. You will see a prompt to add a question by tapping the plus sign in the toolbar, go ahead and follow this prompt. This will bring up a screen giving you the option to enter text for both the question and the answer. In our case, we set the question to 'What is your favorite fruit?' With the answer being, 'My favorite fruit is the tomato, which most people mistake for a vegetable!' We can repeat this process a few times, giving it a new question and answer every time.

You will notice at the top right of every new question that it says incomplete. If you hover over this it will tell you that the Q&A will use exact match only. This is because we need to add multiple different ways of asking the question in order to enable and help machine learning for the bot. Go ahead and add several variations on the question to the Q&A, the more you add the better.

Add answer variations to your WhatsApp chatbot
Add answer variations to your WhatsApp chatbot

Finally, we can have a conversation with our bot, and ask it some simple questions, then get an answer. This should be fairly straightforward, just ask it one of the questions you created, and then receive an answer! Do note, as this is a fairly simple integration, any improper questions asked or messages outside of the parameters configured for this bot will simply be ignored.

Add your WhatsApp chatbot to your WhatsApp group
Add your WhatsApp chatbot to your WhatsApp group

Conclusion

In this guide, we covered signing up for the services you need to succeed in creating a chatbot with Botpress v12. This included Smooch, Ngrok, and Botpress itself. We configured our services, integrated them together, and talked with our bot. When talking with the bot we saw how it handles a variety of inputs, and noted how it responds to improper or unspecific input. If you want to build something more robust, calling APIs and working with flows, a good place to start would be our Mars Rover Photography chatbot example. If you want to build beyond WhatsApp and integrate your chatbot with other channels, check out our Botpress v12 Channel Integration playlist on YouTube. Happy Bot Building! :robot:

Step-by-Step Recap

While it is recommended to read this guide in its entirety, here is a rough summary of the primary steps:

1. Preparation

  • Download botpress from https://v12.botpress.com/
  • Sign up at app.smooch.io
  • Create an app at smooch and assign a name to it
  • Extract contents of Botpress download into a directory of your choice
  • Download Ngrok from https://ngrok.com/ and be sure to follow the instructions on the site for installation

2. Starting

  • Open folder Botpress was extracted to
  • Run “bp” file
  • Be patient as proper modules are downloaded

3. Creation

  • Generate the API key
  • Wait until Botpress is finish with set up
  • Console will tell you where topen the Botpress Studio (Example: for me it was localhost:3000)
  • Navigate to url provided in console
  • Sign up with an admin account
  • Create bot option and name it
  • Select Bot Template (Example: “Empty Bot”)
  • Workspace will now have a bot
  • Click bot by clicking on name
  • Navigate to code editor option

4. Configuration

  • Find Current Bot folder under Configurations in the code editor
  • Select bot.config.json under Configurations and scroll to “messaging”.
  • Add an object “channels” (will contain an object “smooch”)
  • In Smooch, create boolean value called “enabled” and give it a value of true
  • Create strings “keyId” and “secret” (which will take ID and secret from generated API key from earlier in Smooch)
  • Save your bot.config.json
  • Navigate to Configurations
  • Open botpress.config.json
  • Look for “externalUrl’ (it will be set to an empty string)
  • Save file
  • Restart server
  • Open bot again
  • Click “train now”
  • “Ready” will replace “train now”
  • Return to Smooch and verify the webhooks configured automatically
  • Go to integrations
  • Select WhatsApp and connect
  • Choose integration mode (example: I used “Sandbox”)
  • Select “Activate Sandbox” and follow instructions to send message to specified number in WhatsApp
  • Check to see if message received
  • Further messages will be forwarded to webhook
  • You can now talk with your bot!

5. Talking with the Bot

  • Ask the bot one of your questions
  • Read the answer
  • Ask it a “wrong” question and note that it won’t respond

‍

Build better with Botpress

Get started today - it's free!

Related Articles

Industry
December 23, 2021

Natural Language Processing & Natural Language Understanding: In-Depth Guide in 2021

This is a comprehensive article about natural language understanding. How it works, and the different applications it can have for businesses.

Culture
March 3, 2022

What’s Happening at Botpress: January 2022 Recap

2021 was a year of milestones for Botpress, including growing the team, completing our Series A, and enabling users like you in building the best chatbots possible. Thank you!Here is what happened at Botpress in January 2022 ⬇️

May 26, 2022

Introducing OpenBook from Botpress

Botpress announces the first commercial knowledge-based NLU engine: OpenBook. OpenBook brings game-changing benefits to the world of chatbot development.

Š Botpress 2023