{"id":19399749,"url":"https://github.com/fbsamples/original-coast-clothing","last_synced_at":"2025-06-24T15:12:30.945Z","repository":{"id":39600745,"uuid":"179205456","full_name":"fbsamples/original-coast-clothing","owner":"fbsamples","description":"Sample Messenger App - Original Coast Clothing","archived":false,"fork":false,"pushed_at":"2024-08-17T14:18:57.000Z","size":6875,"stargazers_count":206,"open_issues_count":19,"forks_count":236,"subscribers_count":17,"default_branch":"main","last_synced_at":"2024-12-22T17:03:56.066Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fb.me/get-sample-oc","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fbsamples.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-03T03:42:48.000Z","updated_at":"2024-12-05T00:42:22.000Z","dependencies_parsed_at":"2022-09-20T05:51:06.112Z","dependency_job_id":"9a87ddad-e84b-4c38-994a-91ce896eb6f5","html_url":"https://github.com/fbsamples/original-coast-clothing","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbsamples%2Foriginal-coast-clothing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbsamples%2Foriginal-coast-clothing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbsamples%2Foriginal-coast-clothing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbsamples%2Foriginal-coast-clothing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fbsamples","download_url":"https://codeload.github.com/fbsamples/original-coast-clothing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231768606,"owners_count":18423793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T11:11:05.159Z","updated_at":"2024-12-29T18:02:47.297Z","avatar_url":"https://github.com/fbsamples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Original Coast Clothing Messenger Bot\n\nOriginal 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.\n\n[Access the Messenger experience](https://m.me/OriginalCoastClothing?ref=GITHUB)\n\n![Messenger Experience](public/experience.png)\n\nSee the [Developer Documentations on this experience](https://developers.facebook.com/docs/messenger-platform/getting-started/sample-apps/original-coast-clothing).\n\n# Setting up your Messenger App\n\n## Requirements\n\n- **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.\n- **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](https://developers.facebook.com/) and clicking the \"Get Started\" button.\n- **Facebook App:** Contains the settings for your Messenger automation, including access tokens. To create a new app, visit your [app dashboard](https://developers.facebook.com/apps).\n\n## Setup Steps\n\nBefore 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.\n\n#### Get the App id and App Secret\n\n1. Go to your app Basic Settings, [Find your app here](https://developers.facebook.com/apps)\n2. Save the **App ID** number and the **App Secret**\n\n#### Grant  Messenger access to your Facebook App\n\n1. Go to your app Dashboard\n2. Under _Add Product_ find _Messenger_ and click _Set Up_\n3. Now you should be in the App Messenger Settings\n4. Under Access Tokens, click on _Add or Remove Pages_\n5. Select the desired page and allow \"Manage and access Page conversations\" in Messenger\n6. Select the desired page and an access token should appear\n7. Get the Page ID from the page access token by using the [Access Token Debugger](https://developers.facebook.com/tools/debug/accesstoken/)\n8. In the section Built-In NLP, select your page and enable the toggle\n\n# Installation\n\nClone this repository on your local machine:\n\n```bash\n$ git clone git@github.com:fbsamples/original-coast-clothing.git\n$ cd original-coast-clothing\n```\n\nYou will need:\n\n- [Node](https://nodejs.org/en/) 10.x or higher\n- Remote server service such as [Heroku](https://www.heroku.com/), a local tunneling service such as [ngrok](https://ngrok.com/), or your own webserver.\n\n# Usage\n\n## Using ngrok\n\n#### 1. Install tunneling service\n\nIf not already installed, install ngrok via [download](https://ngrok.com/download) or via command line:\n\n```bash\nnpm install -g ngrok\n```\n\nIn the directory of this repo, request a tunnel to your local server with your preferred port\n```bash\nngrok http 3000\n```\n\nThe screen should show the ngrok status:\n\n```\nSession Status                online\nAccount                       Redacted (Plan: Free)\nVersion                       2.3.35\nRegion                        United States (us)\nWeb Interface                 http://127.0.0.1:4040\nForwarding                    http://1c3b838deacb.ngrok.io -\u003e http://localhost:3000\nForwarding                    https://1c3b838deacb.ngrok.io -\u003e http://localhost:3000\n\nConnections                   ttl     opn     rt1     rt5     p50     p90\n                              0       0       0.00    0.00    0.00    0.00\n```\nNote the https URL of the external server that is fowarded to your local machine. In the above example, it is `https://1c3b838deacb.ngrok.io`.\n\n#### 2. Install the dependencies\n\nOpen a new terminal tab, also in the repo directiory.\n\n```bash\n$ npm install\n```\n\nAlternatively, you can use [Yarn](https://yarnpkg.com/en/):\n\n```bash\n$ yarn install\n```\n\n#### 3. Set up .env file\n\nCopy the file `.sample.env` to `.env`\n\n```bash\ncp .sample.env .env\n```\n\nEdit 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.\n\n#### 4. Run your app locally\n\n```bash\nnode app.js\n```\n\nYou should now be able to access the application in your browser at [http://localhost:3000](http://localhost:3000)\n\nConfirm that you canalso access it at the external URL from step 1.\n\n#### 5. Configure your webhook subcription and set the Messenger profile\n\nUse the `VERIFY_TOKEN` that you created in `.env` file and call the **/profile** endpoint in your browser or via cURL:\n```\nhttp://localhost:3000/profile?mode=all\u0026verify_token=verify-tokenl\n```\n\nThis will configure your webhook.\n\n#### 6. Test that your app setup is successful\n\nSend a message to your Page from Facebook or in Messenger.\n\nYou should see the webhook called in the ngrok terminal tab, and in your application terminal tab.\n\nIf you see a response to your message in messenger, you have fully set up your app! Voilà!\n\n## Using Heroku\n\n#### 1. Install the Heroku CLI\n\nDownload and install the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)\n\n#### 2. Create an app from the CLI\n\n```bash\nheroku apps:create\n# Creating app... done, ⬢ mystic-wind-83\n# Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git\n```\n\nNote the name given to your app. In this example, it was `mystic-wind-83`.\n\n#### 3. Set your environment variables\n\nOn the [Heroku App Dashboard](https://dashboard.heroku.com/), find your app and set up the config vars following the comments in the file ```.sample.env```\n\nAlternatively, you can set env variables from the command line like this:\n\n ```bash\nheroku config:set PAGE_ID=XXXX\n```\n\n#### 4. Deploy the code\n\n```bash\ngit push heroku main\n```\n\n#### 5. View log output\n\n```bash\nheroku logs --tail\n```\n\n#### 6. Configure your webhook subscription and set the Messenger profile\n  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:\n\n  ```\n  http://\u003cYOUR APP NAME\u003e.herokuapp.com/profile?mode=all\u0026verify_token=\u003cVERIFY_TOKEN\u003e\n  ```\n\n#### 6. Test that your app setup is successful\n\nSend a message to your page from Facebook or in Messenger. If your webhook receives an event, you have fully set up your app! Voilà!\n\n## License\n\nSample Messenger App Original Coast Clothing is BSD licensed, as found in the LICENSE file.\n\nSee the [CONTRIBUTING](CONTRIBUTING.md) file for how to help out.\n\nTerms of Use - https://opensource.facebook.com/legal/terms\nPrivacy Policy - https://opensource.facebook.com/legal/privacy\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbsamples%2Foriginal-coast-clothing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffbsamples%2Foriginal-coast-clothing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbsamples%2Foriginal-coast-clothing/lists"}