How to Make a Facebook Messenger Chatbot in 1Hr

Complete Tutorial with Code

Learn to How to Make a Facebook Messenger Chat Bot

How to Build a Chatbot for Messenger

Setting up Server for Chatbot

How to put your Chatbot on the cloud

Use node.js to make a Chatbot

Download Node.js

We will be using JavaScript and Node.js for this tutorial.

You do not need to know node.js or be a coder. Sample code is provided.

>> Download Node.js: https://nodejs.org <<

Visual Studios for Chatbots

Visual Studio IDE

Visual Studios is a very simple and fun IDE created by Microsoft that supports javascript and node.js. Best of all it free.

>> Download: https://code.visualstudio.com/Download <<

Work on Chatbots with other coders in GitHub

GitHub Repository

Github is a Great repository for your code. You can also collaborate with developers and get sample code.

You can download project sample code here:

>> Sign up at: https://github.com/ <<

Use Heroku to host Chatbot in the Cloud

Hosting for Apps

Heroku offers free accounts and is a great place to host your chat bot.

>> Sign up at: https://www.heroku.com <<

Get the Heroku Toolbelt

Download Heroku toolbelt to be able to launch, stop and monitor instances.

>> Download: https://toolbelt.heroku.com <<

Setting up NPM & Dependencies

In Command Line:

Make Sure you have latest version of npm:

sudo npm install npm — global

To Initialize npm in Project: npm init

Install Node Dependency for sending and requesting messages:

npm install express request body-parser — save

Index.js File

This index.js file is the main working file for your app. If you don’t have an index.js file or code you can do one of the following:

1. Use the Parrot Bot Code: Get it here
2. Create own Bot App
3. Get Sample Bot Code from online repository

You can also get the index.js file via our FB Community in Files and Email

Step 1: Join FB Chat Bot Group: https://www.facebook.com/groups/aichatbots

Step 2: Get Files from Group: https://www.facebook.com/groups/aichatbots/files/

Step 3: Copy & Past or Download File Named, “Sample Code for Parrot Bot” and save it as an index.js file in your Project Folder

OR Get Parrot index.js via email: click here

Procfile

Procfile lets Heroku know what files to run. Creating a Procfile takes one line of code:

web: node index.js

Save it as ‘Procfile’ in your project. You can also use procfile sample in https://www.facebook.com/groups/aichatbots/files/

OR Get the Parrot Procfile via email: click here

Deploy Code to Heroku

In Terminal type:

Chech status for your files via:

git status

Next add your new files via:

git add .

Next, commit your files via:

git commit — -message ‘your message’

Last, push your code to heroku and deploy via:

git push heroku master

Chatbot is Live

How to Connect your Chat Bot with Facebook Messenger

Become a FB Developer

Messenger for Chatbots

Sign up to Facebook Developer Program

Sign up: https://developers.facebook.com/products/messenger/

Creating Facebook App for Messenger

Make Facebook Messenger Chat Bot: Select Messenger Get Started

For Messenger Chatbot you must select a Facebook Page and a Token will be Generated!

Setting up Webhooks

How toSetup Webhooks for FB Messenger Bot

Setting up NPM & Dependencies

Download Chatbot Dependencies

Open Up Terminal / Command Line

In Command Line: Trigger FB to Send Messages:

curl -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<PAGE_ACCESS_TOKEN>"

Quick Checklist

1. Added New FB App
2. Linked it to FB Page
3. Set up Webooks
4. Input Access Token in index file
5. Curl command?
6. Saved and Pushed changes to Heroku?

It’s Alive!!!

Go to your Bot’s Corresponding FB Page and Send your Bot a Message. Try typing ‘hi’ then type ‘yo’.

Explore what’s possible with Chatbots

Facebook Messenger Chat Bot User Experience

Text Interactions

People can interact with you bot via text and structured messages.

Using Text Interactions

Trigger words can be programed so each time a trigger word is used, your bot respond with a specific type of message. For example your bot can respond with a text, photo, or structured message.

Responding with Photos

For more Check out: wit.ai

Messenger Cards

FB provides templates so you can create the Generic Cards. This template is included in the sample parrot bot.

Generic Cards for FB Messenger Bots

Messenger Carousels

Messenger Carousels for Bots

You can easily manipulate the Parrot Bot’s trigger words, generic cards & carousels in the index.js file.

Here is a Video Tutorial That Can Help: Video Tutorial

Chat Bot Discovery

Discovery is currently a problem for Chat bots. Here are a few communities that can help with this:

Chat Bots on Reddit:

Reddit Ai Chatbots Community

Chat Bots Group on FB:

Facebook Chat Bots Group

Follow Chatbots on Twitter

ChatBots on Twitter

Check out the Step by Step Video Guide

>> How to Make a Chat Bot for Facebook Messenger Video Tutorial <<

Let’s Hack Chatbots Together

Creator of 10+ bots, including Smart Notes Bot. Founder of Chatbot’s Life, where we help companies create great chatbots and share our insights along the way.

Want to Talk Bots? Best way to chat directly and see my latest projects is via my Personal Bot: Stefan’s Bot.

Chatbot Projects

Currently, I’m consulting a number of companies on their chatbot projects. To get feedback on your Chatbot project or to Start a Chatbot Project, contact me.