Voiceflow Messenger JS

This creates an node/express server for creating and handling a messenger chatbot running off a Voiceflow project.

Getting Started

Code Setup

• make sure you have nodejs and npm/yarn installed
• Fork/Clone this repository
• run yarn or npm install
• create an .env file in your root folder and populate it with this:

PORT=4000

VERIFY_TOKEN='[your messenger verify token]'
PAGE_ACCESS_TOKEN='[your messenger page access token]'

VOICEFLOW_VERSION_ID='[voiceflow version id]'
VOICEFLOW_API_KEY='[your voiceflow workspace api-key]'
# VOICEFLOW_RUNTIME_ENDPOINT='[optional]'

NODE_TLS_REJECT_UNAUTHORIZED='0'

Voiceflow Setup

First, you build a fully-functioning conversational app on Voiceflow. This project can also be reused for various other channels. Make sure to test your project with the Test Tool on Voiceflow, and everything is working the way you want it.

When you are inside a Voiceflow project on , your address bar should have a URL that looks like this. This is your VOICEFLOW_VERSION_ID that you will put into your .env file.

Go to https://creator.voiceflow.com/workspace/[YOUR WORKSPACE]/api-keys to generate an API Key. Add that to your .env file as VOICEFLOW_API_KEY.

By now you should have VOICEFLOW_VERSION_ID and VOICEFLOW_RUNTIME_ENDPOINT defined in your .env file.

Messenger Setup

You first need a public Facebook page, go here to create one if you don't have a page already.

You now need a Facebook application that is connected to your page. If you don't have one, go here to create an application for your bot.

When you are on the dashboard of your app, add the Messenger product.

On the Messenger page, locate the Access Tokens section and then connect your app to the Facebook page. Then generate a token.

This is your PAGE_ACCESS_TOKEN that you will put in your .env file.

Next, go to the Webhooks section, and hit Add Callback URL. There you want to run a tunneling service like ngrok (It is recommended you signup and authenticate ngrok so your link is consistent). Next run:

ngrok http 4000

This will give you a link, take it and put it into the Callback section, along with /webhook behind it.

In the Verify Token field, think of a token yourself, ideally a random string. This is your VERIFY_TOKEN that you will put in your .env file.

Now run your server with yarn start, hit Verify and Save.

Finally link your page to the Callback section, and add messages and messaging_postbacks as subscription fields.

Now just chat up your bot!

Notes

To update the chatbot with your Voiceflow changes, run the Test Tool again. It is always synced with the latest version of your test.