Facebook Messenger Chatbot tutorial

A chatbot is a computer program which conducts a conversation via auditory or textual methods. Such programs are often designed to convincingly simulate how a human would behave as a conversational partner, thereby passing the Turing test

This chatbot is for Facebook Messenger

Go to developers.facebook.com
Login with fb account & create an app id
Go to App
Go to Add Products ->Messenger
In Messenger -> go to webhooks

It will be used in Callback Url of messenger webhook
SignUp/login
Create app
The only purpose for Heroku is that it just provides us a platform to push my code and this would be my webhook in messenger webhook seting. Otherwise , if you have https:// website, you dont need heroku.
Now install herolu-cli
sudo npm install heroku-cli -g
Open a terminal and type : heroku login
Enter your credentials and login
type : git init
type : touch index.php
type :git add .
type : git commit -m "First Commit"
type : heroku git:remote -a nameless-peak-18519 : This will make a git repo
type : git push heroku master
Open the app in Heroku . Copy the Url of app & Paste the url in Callback Url of messenger.
Now generate Token in Facebook by selecting the page
In webhook , select the same page and subscribe it

sudo apt-get install php7.0-curl
sudo service apache2 restart

Download ngrok from https://ngrok.com/
Go to the downloaded folder & Type : ./ngrok http 80
Now make an index.php and paste it /var/www/html/ . Code is in repo
Now paste this URL generated by ngrok into Messenger CallbackUrl
Generate Page Access Token and subcribe to that same page

Now after setting this much open facebook.com/page_on_which_it_was_subscribed
Message something and a reply will come

Make the following Curl Request either through git bash or with npm package fb-get-started-button:

curl -X POST -H "Content-Type: application/json" -d '{
"setting_type":"call_to_actions",
"thread_state":"new_thread",
"call_to_actions":[
 {
  "payload":"first hand shake"
 }
]
}' "https://graph.facebook.com/v2.6/1491142357630044/thread_settings?access_token=<PAGE_ACCCESS_TOKEN>"

Following is the JSON , if u want to send an image in a reply :

$jsonData= "{
     'recipient':{
	        'id': $userID
		    },
	    'message':{
	  	     'attachment' : {
	  		          'type' : 'image' ,
	  	           'payload' : {
			                  'url': 'https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
	  	             }
	            }
	}   	
	}" ;

Go to the app on facebook
In the products section on LHS select webhook
Now click on Edit Subscriptions
Add a new CallbackURL or updated CallbackUrl and Token . Save & verify
Now u r done with it. NO need of deleting the app and creating it again

$senderActionResponse='{
			"recipient":{
    				"id":"'.$userID.'"
  			},
  			"sender_action":"typing_on"
		}';

$response =  '{
			  "recipient":{
			    "id": "'.$userID.'" 
			  },
			  "message":{
			    "attachment":{
			      "type":"template",
			      "payload":{
			        "template_type":"button",
			        "text":"Hi, there ! I\'m a minified version of a Bot . ",
			        "buttons":[
			          {
			            "type":"web_url",
			            "url":"https://www.linkedin.com/in/vidit2709",
			            "title":"Visit Developers LinkedIn"
			          },
			          {
			            "type":"web_url",
			            "url":"https://github.com/vidit-agarwal",
			            "title":"Visit Developers github"
			          },
			          {
			            "type":"web_url",
			            "url":"https://m.facebook.com/vidit.agarwal.79?ref=bookmarks",
			            "title":"Visit Developers Facebook"
			          }
			          
			        ]
			      }
			    }
			  }
			}';