Facebook Tutorials

In this tutorial, we start by create a simple facebook bot. In addition, we will import and setup the application with advanced message features (such as templates and buttons).

By the end of this tutorial, you will be able to:
  • configure a facebook bot
  • understand the input and output of the Facebook nodes
  • configure templates and buttons

Creating a simple echo bot

In this part of the tutorial, we will show you how to configure the facebook nodes.

1. Create a new facebook page

  1. Go to Create a Page.
  2. Choose a category, name your organization, and click on “Get Started”.
_images/createPage.png

Note

You can skip the next 4 steps.

2. Create the facebook application

  1. Go to the Create Facebook Application page.
  2. Enter your application’s name (ex. “ChatFlow app”) and click “Create New Facebook App ID”.
_images/createApp.png
  1. Enter your email into the email field, choose a category, and click “Create App ID”. You can skip all other steps on that page by clicking “Skip Quick Start” button.

  2. Now you are on the dashboard page. This is where you can setup your new Facebook application by follow these steps:

    1. Click on “+ Add Product”
    2. Click on “Get Started” button in the “Messenger” section. A new page will load.
    3. Click on “Get Started”
  3. You are now on the Messenger Setup Page. We will return to this page after you create your ChatFlow application.

_images/messengerSetup.png

3. Create the ChatFlow application

  1. Go to the apps page.
  2. Click on “CREATE NEW APP” button.
_images/new-app.png
  1. Under “Start with a clean project”, enter your project’s name and click on create. You see the app under your appliactions list. To edit, click on the newly created app’s name.
_images/echobot_applist.png
  1. In the Node Library, search for “facebook” to filter facebook nodes. Drag Facebook In and Facebook Out into the workspace and connect them.

    Note

    If the Facebook In and Facebook Out nodes are not in your Node Library, click on Settings in the right hand corner. A drop down will open. Click on Node Installer:

    _images/settings_install_node.png

    In the Node Installer, search for Facebook. Click on the blue arrow to the right of Facebook to add the nodes into your palette:

    _images/install_nodes_pop_up.png
  2. Double click the Facebook In node. Select “Add new facebook-controller…” and click the “edit” button.

  3. Click “Start Verification Process”.

_images/startVerification.png
  1. Click the “Webhook URL” input field to copy URL onto your clipboard.
  2. On “Messenger Settings” page from the 2. Create the facebook application, click on “Setup Webhooks”. Paste the Webhook URL stored on your clipboard.
  3. In ChatFlow, click on the “Random” button near the “Verify Token” field. Then click on “Copy”. It will copy the “Verify Token” to your clipboard.
  4. Paste the Token on the “Messenger Settings” page.
  5. Check all options under the “Subscriptions” section.
  6. Click “Verify and Save”.
_images/pasteVerify.png
  1. Under the “Token Generation” section, select the page you created.
  2. Click on the access token to copy it onto the clipboard.
  3. Under webhooks select your page and click “Subscribe”.
  4. In ChatFlow, paste your token into the “Access Token” field. In the “Config Name” Fields, name your config (ex. “Facebook”). Click the “Add” button.
_images/pasteToken.png
  1. Double click the Facebook Out node. Under the “Facebook” token field, select “Faebook” configuration.
  2. Click on deploy button in the upper right hand corner to deploy your application.
_images/deploy1.png

After the application is deployed, your bot should be online. It should echo back your message!

Facebook In and Out Nodes

In this section of the tutorial, we will explore the inputs and outputs of the Facebook Nodes.

Facebook In

The Facebook In receives input from Facebook and outputs the following msg:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
msg = {
       facebook: {
                  message: "message",
                  attachments: "message.attachments",
                  user: "message.sender.id",
                  timestamp: "message.timestamp",
                  seq: "message.message.seq",
                  mid: "message.message.mid"
                },
       payload: "message.message.text",
       kitt: {
              _session_id: message.sender.id,
              _user_id: message.sender.id,
              _timeout: 120
            }
      }
Variable Type Description
payload String Contains the message text
facebook.message Object Original message object received from Facebook
facebook.user String Facebook user ID
facebook.timestamp String Facebook’s timestamp
facebook.seq String Facebook sequence counter
facebook.mid String Facebook message ID
facebook.attachments Array Array of attachments
kitt Object used by the Router for session management and timeout

Warning

Both payload and attachments are optional. But one is required!

Facebook Out

The Facebook Out Node sends its output back to Facebook and must receive input in the following format:

1
2
3
4
5
6
7
8
msg = {
       facebook: {
                   user: "message.recipient.id",
                   attachments: array_of("message.attachment"),
                   attachment: "message.attachment"
                 }
       payload: "message.text"
     }
Variable Type Description
payload String Contains the message text
facebook.user String Facebook user ID
facebook.attachments Array Array of attachments
facebook.attachment String An attachment object (Ex. written documentation)

Warning

Although payload and attachments/attachment are optional, either payload, attachments, or attachment must contain a value. However, only one can be set otherwise you will not receive a reply.

Advanced: templates and buttons

In this part of the tutorial, we will import an application that use advanced features, such as generic template and buttons.

1. Importing the “Weather forecast” application

  1. Import the application to ChatFlow by either:
  • Download json our application and import the project on the applications page, or,
  • Use the “Facebook - Weather forecast” sample application under “Use a Sample Project” when clicking “CREATE NEW APP” on the applications page.
_images/weather.png

2. NLU setup

  1. Download NLU json and import it as an NLU application.
  2. Go to NLU and import the NLU json you downloaded from 1. Importing the “Weather forecast” application.
_images/import_JSON.png
  1. Under “Deployment Information”, copy the Deployment URL.
_images/deployment_url.png
  1. Go back to ChatFlow. Open the KITT.AI NLU node and paste the Deployment URL. Add {{{payload}}}, so your final string would look like:

    http://api-nlu.kitt.ai/v1/api/900584f4-7360-479c?token=xxx?q={{{payload}}}
    
_images/kitt.png

3. Setup Weather forecast application

  1. Repeat all steps, described in Creating a simple echo bot to connect ChatFlow to the Facebook page.

After deploying your applciation, You may ask about the weather in any city. Example requests: * “Hello” - the bot will answer with the greeting * “Is it Raining in Cambridge?” - will show you the weather for current day in Cambridge. * “Show the weather forecast for Cleveland” - shows you 7 days weather forecast for Cleveland.