/Wit-Facebook

Wit-Faebook Messenger Example

Primary LanguageJavaScript

Wit-Facebook

Build Status Codacy Badge

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.

image

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

image

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

image

Facebook Messenger Setting

image

  • Select Messenger and get started:

image

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

image

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:

Deploy

  • 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.

image

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

image

  • 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

image

  • 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.

image

  • Then, you will see the green complete!

image

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

image

  • 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!

image

image

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!