{"id":3281,"date":"2020-10-25T13:37:00","date_gmt":"2020-10-25T19:37:00","guid":{"rendered":"https:\/\/yyc.ninja\/?p=3281"},"modified":"2022-03-26T19:07:48","modified_gmt":"2022-03-27T01:07:48","slug":"chat-bot-with-wit-ai-and-facebook-messanger-in-under-10-minutes","status":"publish","type":"post","link":"https:\/\/yyc.ninja\/index.php\/2020\/10\/25\/chat-bot-with-wit-ai-and-facebook-messanger-in-under-10-minutes\/","title":{"rendered":"Chat bot with wit.ai and Facebook Messanger in under 10 minutes"},"content":{"rendered":"\n
\"\"\/<\/a><\/figure>\n\n\n\n

[Unedited]<\/strong> <\/p>\n\n\n\n

Licene : MIT open source<\/p>\n\n\n\n

<\/a>Level :<\/h2>\n\n\n\n

Beginner \/ intermediate<\/p>\n\n\n\n

<\/a>Requirements :<\/h2>\n\n\n\n

Does not require any chatbot developmenet expereince, does not require software development expereince<\/p><\/blockquote>\n\n\n\n

You’ll only need :<\/p>\n\n\n\n

  1. Facebook.com<\/a> account<\/li>
  2. wit.ai<\/a> account.<\/li>
  3. glitch.com<\/a> account.<\/li><\/ol>\n\n\n\n

    <\/a>Goals :<\/h2>\n\n\n\n

    Chatbots are considered one of the most successful customer service tools, it is also free using wit.ai free Natural Language Processing (NLP) frameork.<\/p>\n\n\n\n

    In this tutorial we will create a chatbot in easy and simple steps using wit.ai The chatbot will automatically answer questions from the customers of a fictional bus operator which we will call Safety Travels. These questions will be posed by customers using Facebook Messenger.<\/p>\n\n\n\n

    <\/a>Steps:<\/h2>\n\n\n\n

    <\/a>1. Creating an app on wit.ai<\/h3>\n\n\n\n

    <\/a>2. Creating a Facebook page<\/h3>\n\n\n\n

    <\/a>3. Creating a Facebook App that uses Messenger<\/h3>\n\n\n\n

    <\/a>4. Cloning a glitch.com projeict that will connect wit.ai with messanger Messenger service<\/h3>\n\n\n\n

    <\/a>5. Testing our bot using Facebook messenger<\/h3>\n\n\n\n
    \n\n\n\n

    <\/a>1. Creating an app on wit.ai<\/h3>\n\n\n\n

    Why we’re using wit.ai? It’s easy to create a bot that answers a single question like “\u064bwhat’s the distance between Chicago and Seattle?” But what if the users ask different variations of the question? Like for example “How many Miles between Chicago and Seattle?” our chatbot will fail if we don’t include all those variations, luckily we don’t have to go this route. We can simply use and train an NLP tool like wit.ai to respond to all variation of a questions Utterances<\/strong><\/em> by grouping them into ### Intents<\/strong><\/em> , for example one intent for questions related to time “What’s the time now in Boston?” or distance, tempreture, price etc. The intent output, will help us match the question asked with the relevant answers as we will see below.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    We can also train the wit.ai app with more variations of the questions to increase it’s accuracy. wit.ai is free and open for all.<\/p>\n\n\n\n

    After you signup or login into wit.ai , create a “New App”<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    and choose a unique name for your app<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    You will be greeted by “Train Your App” page<\/p>\n\n\n\n

    Here you’ll enter the questions that you expect the customers will ask “Utterances”<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    To understand what’s going on on this page, let’s reiterate again our goal here:<\/p>\n\n\n\n

    we’re training our wit.ai app to understand what the customer has typed , or said. Is the customer asking for the time? or is the customer asking for a distance? The app also extracts the details “Entities” that help us find a more accurate answers.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>Utterance<\/strong><\/em><\/h3>\n\n\n\n

    These are examples of what the customer might ask from our bot.<\/p>\n\n\n\n

    <\/a>Intent<\/strong><\/em><\/h3>\n\n\n\n

    An intent is derived from the Utterance, so at this point we know the category of the questions, if it is about a time or a distance etc. But if it is a distance, we still don’t have enough information to find an answer, the bot stilll don’t know what distance the customer is asking about. This is why we have<\/p>\n\n\n\n

    <\/a>Entities<\/strong><\/em><\/h3>\n\n\n\n

    Entities are the details that will help us answer the customer’s question, so if the customer is asking about the distance between Chicagk and Seattle, then Chicago is an Entity of type location, as well as Seattle.<\/p>\n\n\n\n

    It’s the same when the customer asks about the time, the Entity here is of type location.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    Obviously the more Utterances we enter to train the wit.ai app the more the chatbot is able to guess what the customer needs to know.<\/p>\n\n\n\n

    <\/a>wit.ai supports more than 130 languages<\/h3>\n\n\n\n

    After the above, we should faceno problem in following the coming steps to enter Utterances and train our wit.ai app<\/p>\n\n\n\n

    we can enter some variations of questions asking for the distance between 2 locations.<\/p>\n\n\n\n

    Because we will handle each Intent differently we need to name each Intent a descriptive name, so Intents related to distance between 2 locations we will cal them distanceBetween<\/code> it’s very important to get them correctly.<\/p>\n\n\n\n

    We make sure that we highlight city names in our Utterance, these are our Entities, choose type location<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    Let’s also add Utterances\/Questions about local time in few cities<\/p>\n\n\n\n

    Let’s name this Intent timeAtPlace<\/code> Highlight the city, the city is our Entitiy and we select type location, if not auto detected.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    After you click “Train Your App” training takes between seconds to minutes Wait until training is complete then explore your Intents and Entities from the left menu to make sure that that they’re all set correctly.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    You can also revise all the Utterances from the Utterances section on the left<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    wit.ai also stores all the Utterances \/ Questions which your customers has asked, this is extremly useful in going in retraining and refining how your bot interperts the customers’ questions.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    All we need at this point is to copy and save the “Server Access Token” for our app, from the settings section, we will need this Access Token soon.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n
    \n\n\n\n

    <\/a>2. Creating a Facebook page<\/h3>\n\n\n\n

    Why?<\/p>\n\n\n\n

    We will need to create a new Facebook page for our fictional company “Safet Travels”, We do this because we want when the customers send Messenger messages to be assoicated with this page. To create a facebook page, visit the following link<\/p>\n\n\n\n

    \nhttps:\/\/www.facebook.com\/pages\/creation\n<\/div><\/figure>\n\n\n\n

    If you are already a Facebook user all you’ll need to do is to choose a name for your new page, if you aren’t you’ll need to sign up to facebook first.<\/p>\n\n\n\n

    Click on “+” and choose crate new “Page” , enter the name and description for your new page.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n
    \n\n\n\n

    <\/a>3. Creating a Facebook App that uses Messenger<\/h3>\n\n\n\n

    Why?<\/p>\n\n\n\n

    We can connect our wit.ai app to web page on Safety Travels website, or its mobile app, but for this tutorial we’ve choosen to connect our wit.ai app to Facebook Messanger. So we don’t need to build and host a web page or create a mobile app from scratch.<\/p>\n\n\n\n

    The other reason is Facebook has a huge user base, and many of Safety Travels clients would be Facebook users, and would likely have Facebook Messanger app on their mobile devices.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    To create your Facebook app head to<\/p>\n\n\n\n

    \nhttps:\/\/developers.facebook.com\/apps\/\n<\/div><\/figure>\n\n\n\n

    click on “Create App”<\/p>\n\n\n\n

    Then select “Manage Business Integrations”<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    Select a name for your Facebook app, because you’re creating this app to access your own data on Facebook, meaning your Page and the associated Messenger messeges, in the App Purpose field select “Yourself or your own business”<\/p>\n\n\n\n

    This relates to the (A) part in the Facebook diagram<\/a> above.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    A new App ID and an App Secret will automatically be generated for your new app, we will need to copy and save the App Secret , because we will need it later on.<\/p>\n\n\n\n

    We can find it under Settings > Basic<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    Head back to the Dashboard and you’ll be offered many Facebook products to incorporate in your app, for our app we only want to select Messanger<\/p>\n\n\n\n

    This relates to the (B) part in the Facebook diagram<\/a> above.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    Customers will reach out to Safety Travels through Facebook Messenger associated with Safety Travels Facebook page.<\/p>\n\n\n\n

    This is why we will need to connect our application to this Safety Travels Page.<\/p>\n\n\n\n

    This is illustrated in the (C) part in the Facebook diagram<\/a> above.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n

    To be able to post messages back to our customers over Messenger, we need a token, we can get one by clicking on “Generate Token”<\/p>\n\n\n\n

    This relates to the (C) i) part in the Facebook diagram<\/a> above.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    \n\n\n\n

    <\/a>4. Cloning a glitch.com projeict that will connect wit.ai with messanger Messenger service<\/h3>\n\n\n\n

    Why?<\/p>\n\n\n\n

    Wit.ai is great in interperting what the customer would type, and translate the customers questions into Intents and Entities and produce them as output. But wit.ai cannot answer those questions on its own.<\/p>\n\n\n\n

    We will still need to use this categorized output, that we got from step 1 above, to find matching answers.<\/p>\n\n\n\n

    So for example when a customer asks about “The distance between Chicago and Seattle” then wit.ai will give us an output that reflects the customer has the intent to learn the distance between 2 locations, and the output will include the lattitudes and longitudes of these 2 cities.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    Below is a sample for the output from wit.ai<\/p>\n\n\n\n

    {\n    \"text\": \"What's the distance between Beirut and Amman?\",\n    \"intents\": [\n        {\n            \"id\": \"340263910599935\",\n            \"name\": \"distanceBetween\",\n            \"confidence\": 0.97\n        }\n    ],\n    \"entities\": {\n        \"wit$location:location\": [\n            {\n                \"id\": \"3487207574650572\",\n                \"name\": \"wit$location\",\n                \"role\": \"location\",\n                \"start\": 28,\n                \"end\": 34,\n                \"body\": \"Beirut\",\n                \"confidence\": 0.9195,\n                \"entities\": [],\n                \"resolved\": {\n                    \"values\": [\n                        {\n                            \"name\": \"Beirut\",\n                            \"domain\": \"locality\",\n                            \"coords\": {\n                                \"lat\": 33.89331817627,\n                                \"long\": 35.501571655273\n                            },\n                            \"timezone\": \"Asia\/Beirut\",\n                            \"external\": {\n                                \"geonames\": \"276781\",\n                                \"wikidata\": \"Q3820\",\n                                \"wikipedia\": \"Beirut\"\n                            },\n                            \"attributes\": {}\n                        }\n                    ]\n                },\n                \"type\": \"resolved\"\n            },\n            {\n                \"id\": \"3487207574650572\",\n                \"name\": \"wit$location\",\n                \"role\": \"location\",\n                \"start\": 39,\n                \"end\": 44,\n                \"body\": \"Amman\",\n                \"confidence\": 0.9328,\n                \"entities\": [],\n                \"resolved\": {\n                    \"values\": [\n                        {\n                            \"name\": \"Amman\",\n                            \"domain\": \"locality\",\n                            \"coords\": {\n                                \"lat\": 31.955219268799,\n                                \"long\": 35.945030212402\n                            },\n                            \"timezone\": \"Asia\/Amman\",\n                            \"external\": {\n                                \"geonames\": \"250441\",\n                                \"wikidata\": \"Q3805\",\n                                \"wikipedia\": \"Amman\"\n                            },\n                            \"attributes\": {}\n                        },\n                        {\n                            \"name\": \"Amman Governorate\",\n                            \"domain\": \"region\",\n                            \"coords\": {\n                                \"lat\": 31.583690643311,\n                                \"long\": 36.333351135254\n                            },\n                            \"timezone\": \"Asia\/Amman\",\n                            \"external\": {\n                                \"geonames\": \"250439\",\n                                \"wikidata\": \"Q472788\",\n                                \"wikipedia\": \"Amman Governorate\"\n                            },\n                            \"attributes\": {}\n                        }\n                    ]\n                },\n                \"type\": \"resolved\"\n            }\n        ]\n    },\n    \"traits\": {}\n}\n<\/code><\/pre>\n\n\n\n
    Now it’s up to us to use the information above to calculate the distance between the 2 cities.<\/p>\n\n\n\n
    Luckily you don’t need to do any calculation, our gilitch.com project has all the code needed to calculate the distance.<\/p>\n\n\n\n
    You can clone and add the glitch.com project to your account with a single click of a button.<\/p>\n\n\n\n
    We’re using glitch because it makes it extremely easy to deploy an app that connects our app on wit.ai and the our Facebook app with Facebook Messenger, without the need for hosting or complicated setups.<\/p>\n\n\n\n
    Our chatbot also make use of the output from questions about time, such as “What’s the time now in Toronto?” to get the local time for a city from the following API<\/p>\n\n\n\n
    worldtimeapi.org\/api<\/a><\/p>\n\n\n\n
    Below is a sample output for when the customer asks about the time in a certain city<\/p>\n\n\n\n
    {\n    \"text\": \"What's the time in Tunis?\",\n    \"intents\": [\n        {\n            \"id\": \"3303593069738308\",\n            \"name\": \"timeAtPlace\",\n            \"confidence\": 0.9944\n        }\n    ],\n    \"entities\": {\n        \"wit$location:location\": [\n            {\n                \"id\": \"3487207574650572\",\n                \"name\": \"wit$location\",\n                \"role\": \"location\",\n                \"start\": 19,\n                \"end\": 24,\n                \"body\": \"Tunis\",\n                \"confidence\": 0.9342,\n                \"entities\": [],\n                \"resolved\": {\n                    \"values\": [\n                        {\n                            \"name\": \"Tunis\",\n                            \"domain\": \"locality\",\n                            \"coords\": {\n                                \"lat\": 36.818969726562,\n                                \"long\": 10.165789604187\n                            },\n                            \"timezone\": \"Africa\/Tunis\",\n                            \"external\": {\n                                \"geonames\": \"2464470\",\n                                \"wikidata\": \"Q3572\",\n                                \"wikipedia\": \"Tunis\"\n                            },\n                            \"attributes\": {}\n                        }\n                    ]\n                },\n                \"type\": \"resolved\"\n            }\n        ]\n    },\n    \"traits\": {}\n}\n<\/code><\/pre>\n\n\n\n
    To complete this step , just head to the glitch project at<\/p>\n\n\n\n
    \nhttps:\/\/glitch.com\/~aeolian-sponge-glade\n<\/div><\/figure>\n\n\n\n
    in a nutshell, it’s a Node.JS end point that will glow our other components together<\/p>\n\n\n\n
    To copy this project, click on the button below “Remix This” If you’re not logged into glitch.com you would want to login.<\/p>\n\n\n\n
    \"remix<\/a><\/figure>\n\n\n\n
    Within few minutes glitch will automatically add the project to your account, clone and deploy the app for you witha new URL.<\/p>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    Now you can open the project that you have cloned<\/p>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    On the left side of the screen click on “Share”, and click on the “Live App” tab<\/p>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    This now is the URL that points to your app, click on copy because this URL will be the where the Facebook app will send in the questions from Messenger, so we can forward it to wit.ai and get the output that will help us in generating an answer.<\/p>\n\n\n\n
    Now we head to the Facebook app, and click on Messenger on the left menu, and Settings<\/p>\n\n\n\n
    Find the Webhook section in the page and click on “Add Callback URL”<\/p>\n\n\n\n
    This relates to the (C) ii) part in the Facebook diagram<\/a> above.<\/p>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    Paste the URL we’ve copied earlier from our glitch.com project and add the suffix \/webhook<\/code> to the end of the URL, so the correct address is https:\/\/YOUR_PROJECT_URL\/webhook<\/code><\/p>\n\n\n\n
    Remember that the address to your glitch.com project will be different than the one you see here.<\/p>\n\n\n\n
    In the field below, “Verify Token” enter verifytoken<\/code>, we choose this randomly it could be any other word or sentence, but we need to be consistent with the one we will enter later in our glitch project.<\/p>\n\n\n\n
    After entering the Webhook and Verify Token, now we need to choose when we need to be notified by the Facebook App, we need to be notified when there’s a message or action taken by the customer on the Messanger.<\/p>\n\n\n\n
    So we need the pessages<\/code> and pessaging_postbacks<\/code><\/p>\n\n\n\n
    \"\"\/<\/a><\/figure>\n\n\n\n
    Now our Facebook app knows where to forward the questions coming from the Messenger<\/p>\n\n\n\n
    We return now to our glitch.com project to complete its configuration<\/p>\n\n\n\n
    From the left menu select the “.env” file, this is where we will enter our configuration<\/p>\n\n\n\n
    Again it’s needless to say that most of the values below will be different than the ones you will enter in your configuration file, just follow along to know where you’ll get those values.<\/p>\n\n\n\n\n\n
    To configure the glitch.com project and allow it to work with the other compnents of the chatbot, we will need to enter the following:<\/p>\n\n\n\n