Git Product home page Git Product logo

thunderbot-boilerplate's Introduction

Thunderbot - Your simple Facebook Messenger Boilerplate

ThunderBot Logo

Create your own Messenger Bot from Zero to Hero

Creating your first Messenger Bot from Zero will be as easy as 1, 2, 3... 10 Minutes

  1. Bootstrap your local development environment
  2. Config your Facebook App for Messenger Account
  3. Start handling conversation with peoples

You can use the editor on GitHub to maintain and preview the content for your website in Markdown files.

1 - Bootstrap your local development environment

A - Install a HTTPS Tunnel

Using HTTPS is required to communicate with Facebook Messenger, and the easiest way to get it on development mode is to use NGROK

NGROK

You can follow the instruction to download and install NGROK.

B - Install the Boilerplate

1 - Download the ThunderBot boilerplate

git clone https://github.com/jamaity-tn/ThunderBot-Boilerplate

2 - Run the local server:

php -S localhost:1337

3 - Deploy the https tunnel

ngrok http 1337

You are up !

You can now use the ngrok url as Facebook Messenger webhook. Beware that the ngrok url is changing each time you execute ngrok command, so make sure to update the webhook url.

2 - Config your Facebook App for Messenger Account

In this section, we will simply follow the Facebook Messenger Plateform quick start accessible following this link.

A - Create an App and a Page

Go ahead and Create a Facebook Fan page, you can also use an existing page you admin.

Make sure that "Messenger" producted is on under "Product Settings".

Create Facebook Messenger App

B - Setup a Webhook

Webhooks are used to send you a variety of different events including messages, authentication events and callback events from messages.

In the Messenger Platform tab, find the Webhooks section and click Setup Webhooks. Enter a URL for a webhook, define a Verify Token and select message_deliveries, messages, messaging_optins, and messaging_postbacks under Subscription Fields.

Webhook Config

Add your webhook URL (**Ngrok generated secure url https://RANDOM.ngrok.com/ **/), add code for verification. Your code should expect the Verify Token you previously defined, and respond with the challenge sent back in the verification request. Click the "Verify and Save" button in the New Page Subscription to call your webhook with a GET request.

Important:

Since the Webhook only accepts HTTPS urls, we recommand to install NGROK locally in order to test your bot under development mode (Go to Step 1/A to know how)

You can find all the details related to the Webhook by following this link.

C - Get a page access token

A Page Access Token is based on an app, page and user and has scopes associated with it. In the developer app, go to the Messenger tab. Select your page and generate a token:

Page access token

This will generate a non-expiring Page Access Token with the manage_pages, pages_messaging, and pages_messaging_phone_number scopes. Save this token as it will be used throughout your integration. You must be an admin on the page in order to generate a valid page access token.

D - Subscribe the App to a Page

In order for your webhook to receive events for a specific page, you must subscribe your app to the page. You can do this in the Webhooks section under the Messenger Tab.

Page Subscription

Or you can do this via API by using your Page Access Token and making a POST request to /me/subscribed_apps

You can use tools like Postman to get easily this done.

curl -X POST "https://graph.facebook.com/v2.8/me/subscribed_apps?access_token=**PAGE_ACCESS_TOKEN**"

If successful, you will receive a response:

{
  "success": true
}

3 - Start handling conversation with peoples

To test you're receiving updates via the Webhook, simply send a message to your page. You can do that from your page on facebook.com, the Facebook mobile app, searching your page on Messenger, or using your Messenger short url https://m.me/PAGE_USERNAME.

If you don't receive an update via your Webhook, please ensure you didn't receive any errors when you setup your Webhook and you subscribed your App to your page.

In order to inspect requests that are received and sent to Facebook Messenger, you can access: http://localhost:4040/ after running the Ngrok command.

You should now see the first replies of your bot to messages like: "hello", "me"...

Develop / Test / Repeat

The main development process will be concentrated on the index.php file which always do the same 3 main steps: 1 - Verify the integrity and security of the data received 2 - Get the message / payload 3 - Return the appropriate result (SWITCH blocks) according to preformatted templates made by Facebook Messenger

You can find almost all of those templates implemented with samples.


ThunderBot Boilerplate is brought to you by Open Jamaity

Open Jamaity

thunderbot-boilerplate's People

Contributors

a-zog avatar jamaity avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.