• Stars
    star
    202
  • Rank 193,691 (Top 4 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Sample Messenger App - Original Coast Clothing

Original Coast Clothing Messenger Bot

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

Messenger Experience

See the Developer Documentations on this experience.

Setting up your Messenger App

Requirements

  • Facebook Page: Will be used as the identity of your messaging experience. When people chat with your page. To create a new Page, visit https://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 the Facebook 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 your app dashboard.

Setup Steps

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.

Get the App id and App Secret

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

Grant Messenger access to your Facebook App

  1. Go to your app Dashboard
  2. Under Add Product find Messenger and click Set Up
  3. Now you should be in the App Messenger Settings
  4. Under Access Tokens, click on Add 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 the Access Token Debugger
  8. In the section Built-In NLP, select your page and enable the toggle

Installation

Clone this repository on your local machine:

$ git clone [email protected]:fbsamples/original-coast-clothing.git
$ cd original-coast-clothing

You will need:

  • Node 10.x or higher
  • Remote server service such as Heroku, a local tunneling service such as ngrok, or your own webserver.

Usage

Using ngrok

1. Install tunneling service

If not already installed, install ngrok via download 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                online
Account                       Redacted (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000

Connections                   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 is https://1c3b838deacb.ngrok.io.

2. Install the dependencies

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

$ npm install

Alternatively, you can use Yarn:

$ yarn install

3. Set up .env file

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 that APP_URL will be the external URL from step 1.

4. Run your app locally

node app.js

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

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

5. Configure your webhook subcription and set the Messenger profile

Use the VERIFY_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.

6. Test that your app setup is successful

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à!

Using Heroku

1. Install the Heroku CLI

Download and install the Heroku CLI

2. Create an app from the CLI

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

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

3. Set your environment variables

On the Heroku 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

4. Deploy the code

git push heroku main

5. View log output

heroku logs --tail

6. Configure your webhook subscription and set the Messenger profile

You should now be able to access the application. Use the VERIFY_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>

6. Test that your app setup is successful

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à!

License

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

See the CONTRIBUTING file for how to help out.

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

More Repositories

1

f8app

Source code of the official F8 app of 2017, powered by React Native and other Facebook open source projects.
JavaScript
13,987
star
2

messenger-platform-samples

Messenger Platform samples for sending and receiving messages. Walk through the Get Started with this code. https://developers.facebook.com/docs/messenger-platform/quickstart
JavaScript
1,717
star
3

360-video-player-for-android

Sample code for creating a 360 video player on Android. Creates an OpenGL ES scene that renders a sphere textured with video frames from MediaPlayer playback. Does not use the NDK. This is a simple example of the core elements of 360 video rendering and is not intended to be production quality code. The code may be unstable. This is won't be maintained.
Java
616
star
4

messenger-bot-samples

Messenger Bot Samples
JavaScript
554
star
5

Canvas-Streaming-Example

This project contains example code showing how to go live on Facebook using a <canvas> element as a source.
JavaScript
340
star
6

audience-network

Open source projects to demonstrate SDK and sample code usages and integration, and to collaborate and support peers in this community.
319
star
7

oculus-networked-physics-sample

This is a networked physics sample for Rift built in Unity.
C#
310
star
8

WhatsApp-Business-API-Postman-Collection

A Postman collection that contains the full set of sample WhatsApp Business API calls.
294
star
9

fbinstant-samples

Sample projects for the Facebook Instant Games platform
JavaScript
256
star
10

graph-api-webhooks-samples

These are sample clients for Facebook's Graph API Webhooks and Instagram's Real-time Photo Updates API.
CoffeeScript
236
star
11

whatsapp-api-examples

Examples of how to use WhatsApp Cloud API on the WhatsApp Business Platform
JavaScript
203
star
12

fbctf-2019-challenges

The challenge source code and solutions for FBCTF 2019
Python
200
star
13

threads_api

This repository contains a sample app for developers who are interested in integrating with the Threads API.
JavaScript
187
star
14

workplace-platform-samples

Sample code to enable Workplace customers to make the most of the features of the Workplace Custom Integrations platform.
PowerShell
183
star
15

ghc-hotswap

Example code for how we swap compiled code within a running Haskell process.
Haskell
172
star
16

kotlin_ast_tools

Utilities and examples used in Meta to simplify migration from Java to Kotlin and maintenance of Kotlin code.
Kotlin
149
star
17

fblogin-sample

Sample implementations for developers to take as reference when building into fb login products.https//developers.facebook.com/docs/facebook-login/messenger-integration
JavaScript
120
star
18

sculpting-and-simulations-sample

Sample code that supplements the Sculpting And Simulations talk.
C++
96
star
19

live-comments-teleprompter

Example code shows how to retrieve comments and reactions for a Facebook Live video.
JavaScript
89
star
20

bucksamples

Samples for the Buck build tool.
Objective-C
72
star
21

original-coast-clothing-ig

Sample Instagram App - Original Coast Clothing
JavaScript
51
star
22

glTF-Renderer

Sample glTF Renderer for Android
Java
50
star
23

marketing-api-samples

Solution samples using the Facebook marketing API.
JavaScript
49
star
24

reels_publishing_apis

This repository contains sample apps for developers who are interested in integrating with Reels APIs.
JavaScript
41
star
25

OpenNetNorad

Sample system to manage Uping and Upong (UdpPinger) instances, used to measure / graph network latency and loss on Linux
Python
38
star
26

VRDeepLinkSDK

VRDeepLinkSDK provides a quick way to integrate your app to display a 360 photo/video content from Facebook.
Java
37
star
27

android-native-library-merging-demo

Buck demo showing how to safely merge native libraries in Android apps.
C
36
star
28

sdstudio

sdstudio project for image generation and modification
Python
30
star
29

rusty-bunny

a tool that lets you write smart bookmarks
Rust
23
star
30

pytorch-quantization-workshop

Code for a workshop hosted at the MLOps World Summit '22
Jupyter Notebook
16
star
31

insights_dashboard

Insights Dashboard is a sample app that integrates with Meta's Insights APIs
JavaScript
14
star
32

lead-ads-webhook-sample

Sample code to accelerate client's adoption of Lead Ads and Conversion Leads products, by integrating with our advertising platform. Developers can also take this as reference when building integrations, without having to start from scratch.
C#
14
star
33

ListViewToRecyclerView

Library to help products migrate from ListView to RecyclerView.
Java
11
star
34

fbrell

An interactive environment to explore the Facebook JavaScript SDK.
Go
11
star
35

GetRecommendations

A complete, sample android application that uses the Audience Network SDK.
Java
10
star
36

share_to_reels_android

Android sample app with Share to Reels
Java
10
star
37

OptiMate

Sample codes that allows to fetch different Reach and Frequency curves from the Facebook Marketing API.
Python
10
star
38

discord-help-bot

This is the code used in a tutorial called "Build a Discord bot with Rust and Serenity"
Rust
9
star
39

share_to_reels_ios

iOS sample app with Share to Reels
Swift
7
star
40

f8-2014

For sample code used during sessions at the 2014 F8 conference.
Objective-C
7
star
41

cp_reference

We are building a 3rd party commerce platform partner reference implementation.
Python
7
star
42

typefast

An auto-deployable scripting environment that enables people to quickly leverage powerful automation tools.
JavaScript
6
star
43

python-typing-tutorial

A sample Python project to demonstrate basic type checking concepts and best practices.
Python
5
star
44

mit-dl-workshop

Jupyter Notebook
5
star
45

caldera-security-tests

This project was created to provide examples of a TTP Runner and Security Regression Pipeline using vulnerabilities discovered in MITRE CALDERA by Jayson Grace from Meta's Purple Team.
Go
5
star
46

video-template-builder

An intuitive tool for creating dynamic video templates. Seamlessly integrate and customize videos, images, and audio files to produce new media at scale.
Python
4
star
47

transparent-automated-ads-demo-app

A demo web app to simulate the marketplace integration for Transparent Automated Ads
JavaScript
3
star
48

NeurIPS2018

Notebooks from the NIPS 2018 booth screen rolling deck
Jupyter Notebook
3
star
49

Facebook-Reels-Publishing-API-Postman-Collection

A Postman Collection that contains requests to upload Reels to Facebook
3
star
50

marketing_messages_measurement

This project provides best practices on how to measure WhatsApp marketing messages effectively, understand how many incremental conversions businesses canget as well as how to compare the effectiveness of marketing messages against other external platforms such as email/SMS.
R
2
star
51

MediaSpatialAppTemplate

A sample media Android app works on Quest devices, in both Android 2D Panel Mode and Immersive Mode supported by Meta Spatial SDK.
Kotlin
2
star
52

wamquery

Collection of runtime primitives for implementing a SQL-like query language
C
2
star
53

portal-sdk-samples

Sample implementations demonstrating how to integrate various Portal SDK feature modules into an Android App for Portal
Java
1
star
54

cppcon24-async-demo

Demo application for C++con 2024 to showcase async stacks
Python
1
star