Repository files navigation

Original Coast Clothing (OC) is a fictional clothing brand created to showcase key features of the Messenger Platform. OC leverages key features to deliver a great customer experience. Using this demo as inspiration, you can create a delightful messaging experience that leverages both automation and live customer support. We are also providing the open source code of the app and a guide to deploy the experience on your local environment or remote server.

Access the Messenger experience

See theDeveloper Documentations on this experience.

• Facebook Page: Will be used as the identity of your messaging experience. When people chat with your page. To create a new Page, visithttps://www.facebook.com/pages/create.
• Facebook Developer Account: Required to create new apps, which are the core of any Facebook integration. You can create a new developer account by going to theFacebook Developers website and clicking the "Get Started" button.
• Facebook App: Contains the settings for your Messenger automation, including access tokens. To create a new app, visit yourapp dashboard.

Before you begin, make sure you have completed all of the requirements listed above. At this point you should have a Page and a registered Facebook App.

1. Go to your app Basic Settings,Find your app here
2. Save theApp ID number and theApp Secret

1. Go to your app Dashboard
2. UnderAdd Product findMessenger and clickSet Up
3. Now you should be in the App Messenger Settings
4. Under Access Tokens, click onAdd or Remove Pages
5. Select the desired page and allow "Manage and access Page conversations" in Messenger
6. Select the desired page and an access token should appear
7. Get the Page ID from the page access token by using theAccess Token Debugger
8. In the section Built-In NLP, select your page and enable the toggle

Clone this repository on your local machine:

$ git clone git@github.com:fbsamples/original-coast-clothing.git$cd original-coast-clothing

You will need:

• Node 10.x or higher
• Remote server service such asHeroku, a local tunneling service such asngrok, or your own webserver.

If not already installed, install ngrok viadownload or via command line:

npm install -g ngrok

In the directory of this repo, request a tunnel to your local server with your preferred port

ngrok http 3000

The screen should show the ngrok status:

Session Status                onlineAccount                       Redacted (Plan: Free)Version                       2.3.35Region                        United States (us)Web Interface                 http://127.0.0.1:4040Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000Connections                   ttl     opn     rt1     rt5     p50     p90                              0       0       0.00    0.00    0.00    0.00

Note the https URL of the external server that is fowarded to your local machine. In the above example, it ishttps://1c3b838deacb.ngrok.io.

Open a new terminal tab, also in the repo directiory.

$ npm install

Alternatively, you can useYarn:

$ yarn install

Copy the file.sample.env to.env

cp .sample.env .env

Edit the.env file to add all the values for your app and page. Note thatAPP_URL will be the external URL from step 1.

node app.js

You should now be able to access the application in your browser athttp://localhost:3000

Confirm that you canalso access it at the external URL from step 1.

Use theVERIFY_TOKEN that you created in.env file and call the/profile endpoint in your browser or via cURL:

http://localhost:3000/profile?mode=all&verify_token=verify-tokenl

This will configure your webhook.

Send a message to your Page from Facebook or in Messenger.

You should see the webhook called in the ngrok terminal tab, and in your application terminal tab.

If you see a response to your message in messenger, you have fully set up your app! Voilà!

Download and install theHeroku CLI

heroku apps:create# Creating app... done, ⬢ mystic-wind-83# Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git

Note the name given to your app. In this example, it wasmystic-wind-83.

On theHeroku App Dashboard, find your app and set up the config vars following the comments in the file.sample.env

Alternatively, you can set env variables from the command line like this:

heroku config:set PAGE_ID=XXXX

git push heroku main

heroku logs --tail

You should now be able to access the application. Use theVERIFY_TOKEN that you created as a config var and call the/profile endpoint on your app like so:

http://<YOUR APP NAME>.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

Send a message to your page from Facebook or in Messenger. If your webhook receives an event, you have fully set up your app! Voilà!

Sample Messenger App Original Coast Clothing is BSD licensed, as found in the LICENSE file.

See theCONTRIBUTING file for how to help out.

Terms of Use -https://opensource.facebook.com/legal/termsPrivacy Policy -https://opensource.facebook.com/legal/privacy