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:

Contribution

We welcome your comments and PRs!

haganbt/Wit-Facebook