Wit.ai and Facebook Messenger Integration Example
Fork this repository and clone.
git clone https://github.com/{forked}/Wit-Facebook.git
cd Wit-Facebook
npm installGo 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 botYou 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
>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.
- 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):
- 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:
- 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"
- 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!
npm test$WIT_TOKEN=insert_token_here node botFirst, run the server
$WIT_TOKEN=insert_token_here node indexIn other shell, fire this command:
$curl -X POST -H "Content-Type: application/json" -d @__tests__/msg.json http://localhost:8445/webhookYou 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!".
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
We welcome your comments and PRs!