Create Your Own: Facebook Chatbot
This tutorial will walk you through the steps to creating a Facebook chatbot. You will soon be on your way to creating a program that interacts with Facebook Messenger and allows conversations between your bot and a real-life end user. Chatbots are incredibly easy to make and can simulate the natural flow of conversation between two beings.
1. Create a Conversation
To begin creating your Facebook chatbot first think of a simple scenario in which the user has a series of decisions to make. Our Facebook chatbot will assist our end user in planning their perfect summer vacation.
First, we will begin by setting up the framework for what will become our Facebook chatbot.
Think of a name that will be relative to your Facebook chatbot’s conversation. We will go with “Summer Vacation”. Select messenger as the mockup type and click Start designing at the lower right-hand side of your screen.
2. Build your conversation with Q&A
You will then be brought to an interface similar to the one pictured above.
Select the Bot Says option and enter the question you’d like your Facebook chatbot to ask the user. For this tutorial, we’ve chosen the question “Do you prefer the beach or the mountains?” Enter your question into the text field and then click the Add button located just below.
If you’ve successfully added the question to your Facebook chatbot, you will receive a notification confirming that your message has been added. This is the very start of our conversation. Next, we will create our user’s response. Bring up the User says text field by selecting the button on the upper right-hand side.
Let’s pretend that our user will select the mountains instead of the beach as their answer. Enter the response into the user says text field. Select add when you answer is complete, just as you did when adding the first Facebook chatbot message.
If you’ve done everything correctly, the answer to your Facebook chatbot’s question should now be displayed in the messenger mockup.
3. Creating a Path
Let’s explore the paths feature of our Facebook chatbot mockup. We will begin by creating a path for our user response.
Click the Bot Says window to input a reply for the Facebook chatbot. You are given the option to include a picture of the mountains that will show up in the conversation along with the Facebook chatbot’s response.
Select the camera icon on the top toolbar and click add image in the space below.
Select a photo that will be relevant to the response produced by your user. Use the top text box located right above the image and write what you’d like your Facebook chatbot to say. Click the Add button when you’ve successfully completed the response. We’ve chosen to go with “I think that you would enjoy it here.”
4. Creating a Different Path
The above process would be perfect if every person on earth had the exact same thought process. Unfortunately, that isn’t the case. You can enable your Facebook chatbot to take different user responses into account by creating a second path.
First, begin by closing the User says box so that the Open flowchart button becomes exposed beneath it.
Select Open flowchart and an overview of the conversation between your Facebook Chatbot and the user should appear.
Hover over the second box displaying the Facebook chatbot’s original question.
In our example, this would be “Do you prefer the beach or the mountains?” Click on the Add Path button that is represented by the pink plus sign below.
Next, select User says to enter a different user response.
Once you’ve entered your alternative answer, click on the Add button.
The second option to your Facebook chatbot’s question should now appear in the flowchart.
Hover over your second answer and select the mobile phone icon to be taken back to the main page.
Once we’ve arrived back at our home screen, we can now create a Facebook chatbot response to our second answer.
We will follow the exact same steps as before, except that this time we will send our user a photograph of our favorite beach amusement park.
You can continue building your Facebook chatbot by repeating the steps listed above. Depending upon business need your chatbot may require additional steps or decision choices. Botsociety streamlines this experience by allowing customers to tweak their design as they see fit.
5. Test Your Facebook Chatbot
It’s time to see just how well your chatbot will work. By selecting the green Play button located in the top right-hand corner, you will be brought to a simulated demo of your new Facebook chatbot.
In addition, you can adjust the preview speed to make your presentation slower or faster.
Following these steps will preview the path for the beach, but what if you would rather test the other path?
Simply re-open the flowchart and you should see an arrow connecting the initial question to the current answer. To preview the other path, click on the other option to change the simulated user’s reply.
By following the same steps you used to preview the first, you may now view a simulation of the second path.
As a result, you can now see what will happen when a user prefers the mountains.
6. User Testing
Awesome. You’ve just finished your brand new Facebook chatbot and you’ve successfully tried it out for yourself. You are happy with your design but would like to get some feedback from others. Botsociety’s new User Testing feature allows you to do just that.
First, select the Test button located just next to the Export button on the top toolbar. You will be brought to a screen similar to the one located above. Enter the number of tests you’d like to run and a date range to get started.
Once you’ve successfully determined the number of users you’d like to test your mockup, you will be brought to the screen above. Enter the user’s email or share the direct link with them to begin testing.
The individuals that you invite to test your Facebook chatbot will receive a message like this one.
After you’ve selected and invited the users you want to test your mockup, you may reference the above screen to get an update on how many people have started. This will enable you to increase the number of examiners if you find you aren’t getting the response you would have hoped for.
7. Share Your App
When you’ve finally completed your Facebook chatbot mockup, you can share it with friends, family, and coworkers. Let them play with your app and get first-hand feedback. You will find the Share button located right next to the green Play button.
Next, a dialogue box will pop up listing the available platforms that may be used to share your mockup.
Facebook, Twitter, LinkedIn, and email are currently supported but stay tuned as Botsociety is actively working to add new options.
Toggling the Interactive button will allow users to play with your chatbot Facebook and choose between your two paths. You can make your chatbot as complicated as you’d like with as many branches as you see fit.
For users looking to share their Facebook chatbot with team members at work, an email will probably be the best bet. By simply entering the email addresses of your team members you will enable them to make adjustments to the mock-up on their own. They can leave comments provided you give them access by selecting “Can edit” in the box located just right of the address form.
Head on over to Botsociety and experiment with your very own Facebook chatbot today!
Originally published at Botsociety Blog.
