Wit-Facebook

Wit.ai and Facebook Messenger Integration Example

Initial Installation

Fork this repository and clone.

git clone https://github.com/{forked}/Wit-Facebook.git
cd Wit-Facebook
npm install

Configuration

Wit Setting

Go to https://wit.ai/home and create a wit app for you. Read https://wit.ai/docs/quickstart and see a demo at: https://wit.ai/sungkim/weather/stories. Then, go to the setting in your wit app and get the token id.

Test the bot.js with your WIT_TOKEN, and make sure the bot is working.

 $WIT_TOKEN=insert_token_here node bot

You can type your text, and see bot's response.

 Bot testing mode.
> What is the weather?                        # your msg
Executing merge action
Executing say with message: Where exactly?
Where exactly?                                # bot
> In Seoul?                                   # your msg
Executing merge action
Executing action: fetch-weather
Executing say with message: I see it’s sunny in Seoul today!
I see it’s sunny in Seoul today!              # bot
>

Facebook Page Creation

First you need to make a Facebook Page at https://www.facebook.com/pages/create/?ref_type=pages_browser, since the messenger bot will be connected to your facebook page.

Facebook App Creation

• Add a new app at https://developers.facebook.com/quickstarts/?platform=web. Name it and click "Create New Facebook App ID":

• Add email, select category, an add web site. (Any URL is OK):

Facebook Messenger Setting

• From https://developers.facebook.com/apps/, select the created app:

• Select Messenger and get started:

• Select the page you have created and get the Page Access Token:

Launch Server in Heroku

• Run heroku create and push to heroku:

cd Wit-Facebook
heroku create
git push heroku master

• Alternatively, click the button below:

• You need to set WIT_TOKEN and FB_PAGE_TOKEN. You can set your FB_VERIFY_TOKEN which is a token used to verify the server. The default value is "just_do_it". Set the WIT_TOKEN, FB_PAGE_TOKEN, and FB_VERIFY_TOKEN config variables.

• Make sure "Deploy to Heroku" is green and click the "View" button:

• If it is set correctly, you will see something like this from https://{yourspecificedname}.herokuapp.com/: "Only those who will risk going too far can possibly find out how far one can go." - T.S. Eliot"

Facebook Webhooks Setting

• The final step is to put this server URL in the Facebook app setting. From https://developers.facebook.com/apps/, select your app and messenger. You will see Webhooks:

• Select "Setup Webhooks", and you will see callback URL and verify token. For the callback URL put your Hherokuapp URL + "/webhook". For example, my callback URL is https://fbwitbot.herokuapp.com/webhook.

• Type the Verify Token that you set in the Heruku app setting. If you haven't set, the default value is "just_do_it".

• Click all items in the Subscription Fields.

• Then, you will see the green complete!

• You may need to select the Facebook Page one more time and get the access token.

• You need to fire this command to activate your messanger.

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

• You may see:

{"success":true}

• Finally, go to the Facebook page you created/selected, and talk to your bot. Enjoy!

Testing

Jest

npm test

Bot testing

$WIT_TOKEN=insert_token_here node bot

Server testing

First, run the server

 $WIT_TOKEN=insert_token_here node index

In other shell, fire this command:

$curl -X POST -H "Content-Type: application/json" -d @__tests__/msg.json http://localhost:8445/webhook

You will see something like this:

I'm wating for you @8445

Executing merge action
Executing action: fetch-weather
Executing say with message: I see it’s sunny in Hong Kong today!
I see it’s sunny in Hong Kong today!
Oops! An error occurred while forwarding the response to USER_ID : An active access token must be used to query information about the current user.
Waiting for futher messages.

The USER_ID error is OK, but make sure the bot says, "I see it’s sunny in Hong Kong today!".

Credit

I reused soruce code and configuration from:

• https://github.com/wit-ai/node-wit
• https://github.com/jw84/messenger-bot-tutorial
• https://developers.facebook.com/docs/messenger-platform/quickstart

Contribution

We welcome your comments and PRs!