\n<\/span><\/p>\n
The Configuration and Setup Process<\/b><\/p>\n
In order to make things easier for you, we have simplified the whole process in a few steps as given below:<\/span><\/p>\n 1) Create an FB page:<\/strong> https:\/\/www.facebook.com\/pages\/create<\/span><\/a><\/p>\n 2) Create an FB app<\/strong> – <\/span>https:\/\/developers.facebook.com\/apps<\/span><\/a><\/p>\n 3) Install & configure nodejs on your server<\/strong>, if it isn’t already available.<\/span><\/p>\n (nodejs based example).<\/span><\/p>\n 4)<\/strong> Once you have created your app, let’s <\/span>add messenger to it<\/b>. Go to the App Dashboard and under Product Settings click <\/span>“Add Product”<\/b> and select <\/span>“Messenger.”<\/b><\/p>\n 5)<\/strong> Now, <\/span>link your page with the messenger<\/b> and get the page access token. The below screenshot gives an idea of this:<\/span><\/p>\n 6)<\/strong> <\/span>Set Up\u00a0webhooks<\/b><\/p>\n The below screenshot gives an idea of how webhooks are set up.<\/span><\/p>\n In the sample app, this method is defined in app.js:<\/span><\/em> Now change the following lines:-<\/span><\/em> 7) <\/strong>Subscribe the App to the Page<\/b><\/p>\n In the Web-hooks section, <\/span>subscribe the\u00a0<\/b>web-hook<\/b>\u00a0for your page. The below screenshot would help you get a clearer picture of how it’s done.<\/span><\/p>\n 8)<\/strong> The chatbot can now be accessed from the messenger section within your FB profile with the below-mentioned URL,<\/span><\/p>\n https:\/\/www.facebook.com\/messages\/t\/{FB_PAGE_MSG_ID<\/span>}<\/span><\/p>\n eg:- if your FB page ID is PAGENAME-119052895406724, {FB_PAGE_MSG_ID} would be 119052895406724<\/span><\/p>\n 9) Now that the configuration is completed, let us <\/span>listen for incoming messages & echo back the same to the user.<\/b><\/p>\n In the sample app, this method is also defined in app.js:-<\/span><\/em> api.ai would help us out with this. You can use your Google account to sign up for a new api.ai account:-<\/span><\/p>\n https:\/\/console.api.ai\/api-client\/#\/login<\/span><\/a><\/p>\n 12)<\/strong> Once your account is ready, use the <\/span>‘Create Agent’<\/b> link in the dashboard. The below screenshot will give you an idea of the same.<\/span> 13)<\/strong> Now, go <\/span>to the settings section<\/b> of your agent and <\/span>copy the ‘Client access token’<\/b> as shown in the below screenshot.<\/span><\/p>\n 14)<\/strong> Since intents & Entities form the backbone of the api.ai agent. proper manipulation of these would help in training the agent to handle different types of client queries you would expect for your business.<\/span><\/p>\n Since the details of these are beyond the scope of this article. please refer to the docs link for more info:-<\/span> https:\/\/api.ai\/docs\/getting-started\/basics<\/span><\/a>.<\/span><\/p>\n 15)<\/strong> Besides training our agent, api.ai comes with a set of predefined query\/responses. Then <\/span>navigate to ‘Small Talk’<\/b> section in the left menu and <\/span>enable it<\/b>.<\/span><\/p>\n This would let the agent answer the usual banter with the user (eg:- how are you?\/what are you? etc).<\/span><\/p>\n 16)<\/strong> Next, <\/span>install the apiai package for nodejs <\/b>on your server. then <\/span>add the following lines to app.js –<\/b> Now we will see how FB Messenger would provide us with the chat interface & api.ai would work as the agent to analyze the user input and generate the corresponding responses. The casual messages would be answered by the AI, for other queries, the Bot uses Google’s search API to look it up in stack-overflow & provide some suggestions (so it would be accurate only in case of technical questions, in other cases the answer might not be spot on). The level of interaction can be improved by further training the AI.<\/p>\n Demo<\/strong><\/span><\/p>\n\n
\n
![\"\"](\"https:\/\/www.armia.com\/blog\/wp-content\/uploads\/2017\/08\/Picture1-300x145.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.armia.com\/blog\/wp-content\/uploads\/2017\/08\/Picture2-300x160.png\")
<\/a><\/p>\n
\n
\napp.get('\/webhook', function(req, res) {
\nif (req.query['hub.mode'] === 'subscribe' &&
\nreq.query['hub.verify_token'] === ) {
\nconsole.log(\"Validating webhook\");
\nres.status(200).send(req.query['hub.challenge']);
\n} else {
\nconsole.error(\"Failed validation. Make sure the validation tokens match.\");
\nres.sendStatus(403);
\n}
\n});
\n<\/code>
\nsince FB requires a valid SSL certificate, we need to make some minor changes to the script. before we start, note the path of the SSL files on your server.<\/span><\/p>\n
\n
\napp.listen(app.get('port'), function() {
\nconsole.log('Node app is running on port', app.get('port'));
\n});
\n<\/code>
\nto<\/span><\/em>
\n
\nconst fs = require('fs');
\nvar privateKey = fs.readFileSync('path_to_key.pem');
\nvar certificate = fs.readFileSync('path_to_cert.pem');
\nvar certificateAuth = fs.readFileSync('path_to_ca.crt');
\nvar credentials = {
\nkey: privateKey,
\ncert: certificate,
\nca: certificateAuth
\n};
\nhttps.createServer(credentials, app).listen(app.get('port'), function(){
\nconsole.log('Node app updated running on port', app.get('port'));
\n});
\n<\/code>
\nThis allows FB to verify the SSL issued to your domain (without this change, the setup webhooks step won’t be completed) and hence its mandatory.<\/span><\/p>\n![\"\"](\"https:\/\/www.armia.com\/blog\/wp-content\/uploads\/2017\/08\/Picture3-300x145.png\")
<\/a><\/p>\n
\n
\nfunction receivedMessage(event) {
\nvar senderID = event.sender.id;
\nvar message = event.message;
\nvar messageText = message.text;
\nsendTextMessage(senderID, messageText);
\n}
\n<\/code>
\nsendTextMessage formats the data in the request:-<\/span><\/em>
\n
\nfunction sendTextMessage(recipientId, messageText) {
\nvar messageData = {
\nrecipient: {
\nid: recipientId
\n},
\nmessage: {
\ntext: messageText
\n}
\n};
\ncallSendAPI(messageData);
\n}
\n<\/code>
\ncallSendAPI calls the Send API:-<\/span><\/em>
\n
\nfunction callSendAPI(messageData) {
\nrequest({
\nuri: 'https:\/\/graph.facebook.com\/v2.6\/me\/messages',
\nqs: { access_token: PAGE_ACCESS_TOKEN },
\nmethod: 'POST',
\njson: messageData
\n}, function (error, response, body) {
\nif (!error && response.statusCode == 200) {
\nvar recipientId = body.recipient_id;
\nvar messageId = body.message_id;
\nconsole.log(\"Successfully sent generic message with id %s to recipient %s\", messageId, recipientId);
\n} else {
\nconsole.error(\"Unable to send message.\");
\nconsole.error(response);
\nconsole.error(error);
\n}
\n});
\n}
\n<\/code>
\n11)<\/strong> Right now our chat-bot just echoes back whatever the user sends to it. So the next step would be to <\/span>process the messages received & send back appropriate responses.<\/b><\/p>\n![\"\"](\"https:\/\/www.armia.com\/blog\/wp-content\/uploads\/2017\/08\/Picture4-300x145.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.armia.com\/blog\/wp-content\/uploads\/2017\/08\/Picture5-300x145.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.armia.com\/blog\/wp-content\/uploads\/2017\/08\/Picture6-300x145.png\")
<\/a><\/p>\n
\n
\nconst apiai = require('apiai');
\nvar srv = apiai(CLIENT_ACCESS_TOKEN);
\nfunction receivedMessage(event) {
\nvar senderID = event.sender.id;
\nvar message = event.message;
\nvar messageText = message.text;
\nvar requestAPI = srv.textRequest(messageText, {
\nsessionId: Math.floor((Math.random() * 100000) + 1)
\n});
\nrequestAPI.on('response', function(response) {
\nconsole.log(response);
\n\/\/check the response type from api.ai
\nif(response.result.fulfillment.speech != '') {
\nsendTextMessage(senderID, response.result.fulfillment.speech);
\n} else {
\nsendTextMessage(senderID, \"I'm sorry, could you be more specific?\");
\n}
\n});
\nrequestAPI.on('error', function(error) {
\nconsole.log(error);
\nsendTextMessage(senderID, \"Sorry, but I just couldn't figure that out!\");
\n});
\nrequestAPI.end();
\n}
\n<\/code>
\n17)<\/strong> Now that it’s all done, you can head over to your FB Messenger and indulge in some small talk with your chat-bot.<\/span><\/p>\nCase Study of FB Messenger & api.ai<\/b><\/h2>\n
![\"Download](\"https:\/\/no-cache.hubspot.com\/cta\/default\/2725694\/34cf44bc-8e96-49ac-840a-50211a6f8c8d.png\")
<\/a><\/span>