• Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office
AnonyViet - English Version
  • Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office
No Result
View All Result
  • Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office
No Result
View All Result
AnonyViet - English Version
No Result
View All Result
Home Tips

Instructions to create BOT Chat Facebook Messenger on FanPage

AnonyViet by AnonyViet
February 19, 2023
in Tips
0
0
SHARES
Share on FacebookShare on Twitter

These days, famous Pages all use BOT Chat to automatically reply to messages, like the autistic Simsimi app, today. AnonyViet I will guide you to create your own Facebook Messenger Chat BOT on FanPage, just follow the steps below in sequence.

Join the channel Telegram belong to AnonyViet ? Link ?

Instructions to create BOT Chat Facebook Messenger on FanPage

Here are the steps to create a chat bot on Facebook Messenger.

1. Setup

The Messenger bot uses a web server to process the messages it receives or figure out which messages to send.

1.1. Build server

1. Download and install Heroku Toolbet here: https://toolbelt.heroku.com/ to start, stop, and monitor problems.

If you don’t have an account, you can sign in for free at https://www.heroku.com.

2. Access https://nodejs.org to install Node create a server environment.

Then proceed to open Terminal or Command Line Prompt to make sure you have the latest version of npm installed by installing nmp again:

sudo npm install npm –g

3. Create a new folder and create a new Node project. Press Enter to accept the default value:

npm init

4. Install more Node Dependencies service pack. Express for the server requires sending the message, and the body-parser is for handling the message:

npm install express request body-parser --save

5. Create the index.js file in the directory and copy the following code to confirm the bot:

var express = require('express')
var bodyParser = require('body-parser')
var request = require('request')
var app = express()

app.set('port', (process.env.PORT || 5000))

// Process application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}))

// Process application/json
app.use(bodyParser.json())

// Index route
app.get('/', function (req, res) {
    res.send('Hello world, I am a chat bot')
})

// for Facebook verification
app.get('/webhook/', function (req, res) {
    if (req.query['hub.verify_token'] === 'my_voice_is_my_password_verify_me') {
        res.send(req.query['hub.challenge'])
    }
    res.send('Error, wrong token')
})

// Spin up the server
app.listen(app.get('port'), function() {
    console.log('running on port', app.get('port'))
})

6. Create a file and name it Procfile, then copy the following line of code in so that Heroku can know which file to run:
web: node index.js

Validate all the code with Git then generate a new Heroku code and “push” the codes to the cloud:

web: node index.js

7. Validate all code with Git then generate a new Heroku code and “push” the code to the cloud:

git init
git add .
git commit --message 'hello world'
heroku create
git push heroku master

1.2. Set up the Facebook App

1. Access https://developers.facebook.com/apps/ to create or configure a Facebook App or Page.

configure Facebook App or Page

2. On the app, switch to the Messenger tab then click Setup Webhook. Here enter the URL code of the Heroku server and the token.

enter the Heroku server URL and token

3. Get Page Access Token and save this code.

Page Access Token

4. Return to Terminal and enter the command below to activate the Facebook app to send messages. Note, use the token that you used before.

  1. curl -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<PAGE_ACCESS_TOKEN>"

1.3. Set up Bot

1. Add an API endpoint to index.js to handle the message. Note, including the token you received earlier:

app.post('/webhook/', function (req, res) {
    messaging_events = req.body.entry[0].messaging
    for (i = 0; i < messaging_events.length; i++) {
        event = req.body.entry[0].messaging[i]
        sender = event.sender.id
        if (event.message && event.message.text) {
            text = event.message.text
            sendTextMessage(sender, "Text received, echo: " + text.substring(0, 200))
        }
    }
    res.sendStatus(200)
})

var token = "<PAGE_ACCESS_TOKEN>"

2. Add a function to respond to messages:

function sendTextMessage(sender, text) {
    messageData = {
        text:text
    }
    request({
        url: 'https://graph.facebook.com/v2.6/me/messages',
        qs: {access_token:token},
        method: 'POST',
        json: {
            recipient: {id:sender},
            message: messageData,
        }
    }, function(error, response, body) {
        if (error) {
            console.log('Error sending messages: ', error)
        } else if (response.body.error) {
            console.log('Error: ', response.body.error)
        }
    })
}

3. Validate the code again and push to Heroku:

git add .
git commit -m 'updated the bot to speak'
git push heroku master

4. Go to Facebook and click Message to start chatting.

Go to Facebook and click Message to start chatting

2. Customize the “speak” bot message

2.1. Send a message structure of Message

Facebook Messenger can send a Message structure in the form of cards or buttons.

Message structure Message

1. Copy the code below some index.js to send a double check message as 2 cards:

function sendGenericMessage(sender) {
    messageData = {
        "attachment": {
            "type": "template",
            "payload": {
                "template_type": "generic",
                "elements": [{
                    "title": "First card",
                    "subtitle": "Element #1 of an hscroll",
                    "image_url": "http://messengerdemo.parseapp.com/img/rift.png",
                    "buttons": [{
                        "type": "web_url",
                        "url": "https://www.messenger.com",
                        "title": "web url"
                    }, {
                        "type": "postback",
                        "title": "Postback",
                        "payload": "Payload for first element in a generic bubble",
                    }],
                }, {
                    "title": "Second card",
                    "subtitle": "Element #2 of an hscroll",
                    "image_url": "http://messengerdemo.parseapp.com/img/gearvr.png",
                    "buttons": [{
                        "type": "postback",
                        "title": "Postback",
                        "payload": "Payload for second element in a generic bubble",
                    }],
                }]
            }
        }
    }
    request({
        url: 'https://graph.facebook.com/v2.6/me/messages',
        qs: {access_token:token},
        method: 'POST',
        json: {
            recipient: {id:sender},
            message: messageData,
        }
    }, function(error, response, body) {
        if (error) {
            console.log('Error sending messages: ', error)
        } else if (response.body.error) {
            console.log('Error: ', response.body.error)
        }
    })
}

2. Update Webhook API to look for special messages to trigger on the card:

app.post('/webhook/', function (req, res) {
    messaging_events = req.body.entry[0].messaging
    for (i = 0; i < messaging_events.length; i++) {
        event = req.body.entry[0].messaging[i]
        sender = event.sender.id
        if (event.message && event.message.text) {
            text = event.message.text
            if (text === 'Generic') {
                sendGenericMessage(sender)
                continue
            }
            sendTextMessage(sender, "Text received, echo: " + text.substring(0, 200))
        }
    }
    res.sendStatus(200)
})

2.2. Respond to user messages

What happens when the user clicks the button or card on the Message? In this case update the Webhook API again to send the postback function:

    ```
app.post('/webhook/', function (req, res) {
    messaging_events = req.body.entry[0].messaging
    for (i = 0; i < messaging_events.length; i++) {
        event = req.body.entry[0].messaging[i]
        sender = event.sender.id
        if (event.message && event.message.text) {
            text = event.message.text
            if (text === 'Generic') {
                sendGenericMessage(sender)
                continue
            }
            sendTextMessage(sender, "Text received, echo: " + text.substring(0, 200))
        }
        if (event.postback) {
            text = JSON.stringify(event.postback)
            sendTextMessage(sender, "Postback received: "+text.substring(0, 200), token)
            continue
        }
    }
    res.sendStatus(200)
})
```

Add Git, commit and push to Heroku again.

You can now chat with the bot and enter “Generic” to see the bot.

Author: Quantrimang.com

The article achieved: 5/5 – (100 votes)

Previous Post

Javascript Falling apricot blossoms decorate the Website for Tet

Next Post

Speed ​​up Chrome browser 2018

AnonyViet

AnonyViet

Related Posts

Instructions to design your own room using AI RoomGPT
Tips

Instructions to design your own room using AI RoomGPT

March 30, 2023
[Facebook]Instructions to UnLock Facebook Account
Tips

[Facebook]Instructions to UnLock Facebook Account

March 29, 2023
Tips

Bruter Facebook password cracking tool

March 28, 2023
DNS Spoofing – Hack Facebook
Tips

DNS Spoofing – Hack Facebook

March 27, 2023
Instructions to create your own ChatGPT Bot on Telegram
Tips

Instructions to create your own ChatGPT Bot on Telegram

March 27, 2023
How to use ChatGPT-4 for free on Chrome and FireFox
Tips

How to use ChatGPT-4 for free on Chrome and FireFox

March 27, 2023
Next Post
Speed ​​up Chrome browser 2018

Speed ​​up Chrome browser 2018

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent News

What is uraqt?  What does uraqt stand for?

What is uraqt? What does uraqt stand for?

March 30, 2023
Instructions to design your own room using AI RoomGPT

Instructions to design your own room using AI RoomGPT

March 30, 2023
[Facebook]Instructions to UnLock Facebook Account

[Facebook]Instructions to UnLock Facebook Account

March 29, 2023
Tips to create many attractive hot pot dishes in the game Sugar Hanh Phuc Hot Pot Shop

Tips to create many attractive hot pot dishes in the game Sugar Hanh Phuc Hot Pot Shop

March 29, 2023
What is uraqt?  What does uraqt stand for?

What is uraqt? What does uraqt stand for?

March 30, 2023
Instructions to design your own room using AI RoomGPT

Instructions to design your own room using AI RoomGPT

March 30, 2023
[Facebook]Instructions to UnLock Facebook Account

[Facebook]Instructions to UnLock Facebook Account

March 29, 2023
AnonyViet – English Version

AnonyViet

AnonyViet is a website share knowledge that you have never learned in school!

We are ready to welcome your comments, as well as your articles sent to AnonyViet.

Follow Us

Contact:

Email: anonyviet.com[@]gmail.com

Main Website: https://anonyviet.com

Recent News

What is uraqt?  What does uraqt stand for?

What is uraqt? What does uraqt stand for?

March 30, 2023
Instructions to design your own room using AI RoomGPT

Instructions to design your own room using AI RoomGPT

March 30, 2023
No Result
View All Result
  • Home
  • News
  • Software
  • Knowledge
  • MMO
  • Tips
  • Security
  • Network
  • Office

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.