Git Product home page Git Product logo

original-coast-clothing's Introduction

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

original-coast-clothing's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

original-coast-clothing's Issues

Short description of the feature

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when ...

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

Documentation

Reference any technical documentation that would be needed to build this feature.

Short description of the issue

@#### Describe the bug
A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Send message '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

App Type needs to be "Business"

The guide says "Facebook App: Contains the settings for your app, including access tokens. To create a new app, visit https://developers.facebook.com/ and click on Add New App"

It should specify when given the choice, you must select "Business" as the app type or there won't be the option to add Messenger as a product.

Pass the thread to the Page inbox with the Handover Protocol

Is your feature request related to a problem? Please describe.

Currently, we call the Persona API to visually pass the thread to a dedicated agent but we don't actually leverage the Handover Protocol to switch to a different application.

Describe the solution you'd like

We want to pass the thread to the Page inbox to enable the user to live chat with the customer support agent, using the Handover Protocol:
Sample-Bot-Flow-Diagram-V2

Documentation

Short description of the feature

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when ...

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

Documentation

Reference any technical documentation that would be needed to build this feature.

Setting of Nested Persistent Menu has been deprecated for v8.0 and higher

Describe the bug

While following the tutorial to create a FB messenger bot I get a 400 error after validating my application by following the verification link.

Unable to create a persona: Error: 400
    at Request.<anonymous> (/Users/janmeppe/Documents/Projects/original-coast-clothing/services/graph-api.js:250:20)
    at Request.emit (events.js:198:13)
    at Request.onRequestResponse (/Users/janmeppe/Documents/Projects/original-coast-clothing/node_modules/request/request.js:1066:10)
    at ClientRequest.emit (events.js:198:13)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:556:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
    at TLSSocket.socketOnData (_http_client.js:442:20)
    at TLSSocket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:269:11) [ <Buffer 7b 22 65 72 72 6f 72 22 3a 7b 22 6d 65 73 73 61 67 65 22 3a 22 59 6f 75 72 20 6d 65 73 73 61 67 65 20 63 6f 75 6c 64 6e 2

I think it is due to a deprecation that happened somewhere, as shown here

Request sent: { error:
   { message:
      '(#11) Setting of Nested Persistent Menu has been deprecated for v8.0 and higher',
     type: 'OAuthException',
     code: 11,
     fbtrace_id: 'xxx' } }

To Reproduce

Expected behavior

  • An app that is listening to the localtunnel's webhook

Actual behavior

  • 400 error message

Full logs

Content of https://fast-o.../profile?mode=all&verify_token=...

Set app xxxx.... call to https://fast-ot...../webhook

Set Messenger Profile of Page xxx.....

Set Personas for xxxx.....

To persist the personas, add the following variables to your environment variables:

PERSONA_BILLING = undefined
PERSONA_CARE = undefined
PERSONA_ORDER = undefined
PERSONA_SALES = undefined
Enable Built-in NLP for Page xxxx....

Whitelisting domains: https://fast-o.....ca.lt,

Console logs

~/Documents/Projects/original-coast-clothing % node app.js
WARNING: Missing the environment variable SHOP_URL
Your app is listening on port 3000
Is this the first time running?
Make sure to set the both the Messenger profile, persona and webhook by visiting:
https://stupi......./profile?mode=all&verify_token=test
Test your app by messaging:
https://m.me/xxx.....
Setting app xxxx.... callback url to https://stupid-....../webhook
messages, messaging_postbacks, messaging_optins,         message_deliveries, messaging_referrals
Subscribing app xxxx to page xxxx
messages, messaging_postbacks, messaging_optins,         message_deliveries, messaging_referrals
{ locale: 'default',
  text:
   'Welcome to Original Coast Clothing {{user_first_name}}! Click get started to enjoy our sample automated messaging experience. If you want to build a similar one visit https://fb.me/get-sample-oc' }
{ locale: 'fr_FR',
  text:
   'Bienvenue à Original Coast Clothing {{user_first_name}}! Cliquez sur démarrer pour voir notre exemple d’expérience de messagerie automatique. Si vous souhaitez en élaborer une semblable, visitez https://fb.me/get-sample-oc' }
{ locale: 'es_ES',
  text:
   '¡{{user_first_name}}, te damos la bienvenida a Original Coast Clothing! Haz clic para empezar a disfrutar de nuestra experiencia de mensajes automatizados de ejemplo. Si quieres crear una experiencia similar, visita https://fb.me/get-sample-oc' }
{ locale: 'es_LA',
  text:
   '¡Te damos la bienvenida a Original Coast Clothing, {{user_first_name}}! Haz clic para empezar a disfrutar de nuestra experiencia de mensajes automáticos de muestra. Si quieres crear una experiencia similar, visita https://fb.me/get-sample-oc' }
{ locale: 'pt_BR',
  text:
   'Bem-vindo(a) à Original Coast Clothing {{user_first_name}}! Clique em Começar para conferir nosso exemplo de experiência de mensagens automáticas. Se você deseja criar uma semelhante, acesse https://fb.me/get-sample-oc.' }
{ locale: 'id_ID',
  text:
   'Selamat datang di Original Coast Clothing {{user_first_name}}! Klik untuk mulai menikmati sampel pengalaman berkirim pesan otomatis kami. Jika Anda ingin membuat pengalaman serupa, kunjungi https://fb.me/get-sample-oc' }
{ locale: 'ar_AR',
  text:
   'مرحبًا بك في Original Coast Clothing {{user_first_name}}! انقر على بدء الاستخدام للاستمتاع بتجربة المراسلة التلقائية النموذجية التي نوفرها. وإذا كنت ترغب في إنشاء تجربة مماثلة، فتفضل بزيارة موقع https://fb.me/get-sample-oc على الويب' }
{ locale: 'de_DE',
  text:
   'Herzlich willkommen bei Original Coast Clothing, {{user_first_name}}! Klicke auf „Los geht’s“, um unser Beispiel für automatisierte Nachrichten zu entdecken. Wenn du ein ähnliches Kundenerlebnis anbieten möchtest, besuche die Seite https://fb.me/get-sample-oc.' }
{ locale: 'it_IT',
  text:
   'Ti diamo il benvenuto su Original Coast Clothing, {{user_first_name}}! Clicca su Inizia per provare i nostri messaggi automatici. Se vuoi creare un\'esperienza simile, visita https://fb.me/get-sample-oc.' }
{ locale: 'ja_JP',
  text:
   '{{user_first_name}}さん、Original Coast Clothingへようこそ![スタート]をクリックして、サンプルの自動メッセージングサービスをお試しください。同様のサービスを構築する場合はhttps://fb.me/get-sample-ocをご覧ください。' }
{ locale: 'ko_KR',
  text:
   '{{user_first_name}}님, 안녕하세요. Original Coast Clothing입니다! 시작하기를 클릭하여 샘플 자동 메시지 기능을 활용해보세요. 비슷한 메시지를 만들려면 visit https://fb.me/get-sample-oc를 방문하세요.' }
{ locale: 'ru_RU',
  text:
   'Добро пожаловать в магазин Original Coast Clothing, {{user_first_name}}! Нажмите "Начать", чтобы написать нашему боту. Хотите такой же бот? Перейдите по адресу https://fb.me/get-sample-oc.' }
{ locale: 'th_TH',
  text:
   'ยินดีต้อนรับสู่ Original Coast Clothing {{user_first_name}}! คลิกเริ่มต้นใช้งานเพื่อทดลองตัวอย่างประสบการณ์การส่งข้อความอัตโนมัติของเรา หากคุณต้องการสร้างประสบการณ์ที่คล้ายกัน โปรดไปที่ https://fb.me/get-sample-oc' }
{ locale: 'vi_VN',
  text:
   'Chào mừng bạn đến với Original Coast Clothing {{user_first_name}}! Hãy nhấp vào nút Bắt đầu để tận hưởng trải nghiệm nhắn tin mẫu và hoàn toàn tự động của chúng tôi. Nếu bạn muốn xây dựng trải nghiệm tương tự, hãy truy cập https://fb.me/get-sample-oc' }
{ locale: 'zh_CN',
  text:
   '欢迎来到 Original Coast Clothing{{user_first_name}}!点击“立即开始”进入我们的自动消息体验示例。如果您想打造类似的体验,请访问 https://fb.me/get-sample-oc' }
{ locale: 'zh_HK',
  text:
   '{{user_first_name}},歡迎來到 Original Coast Clothing!點擊「立即開始」,在範例中體驗我們的自動訊息功能。如果您想建立類似的自動訊息,請前往 https://fb.me/get-sample-oc' }
{ locale: 'zh_TW',
  text:
   '{{user_first_name}},歡迎來到 Original Coast Clothing!點擊「立即開始」,在範例中體驗我們的自動訊息功能。如果您想要建立類似的自動訊息,請前往 https://fb.me/get-sample-oc' }
{ locale: 'default',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Customer Support',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Outfit suggestions',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Shop now',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'fr_FR',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Service clientèle',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Suggestions vestimentaires',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Acheter maintenant',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'es_ES',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Atención al cliente',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Sugerencias de ropa',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Comprar',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'es_LA',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Atención al cliente',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Sugerencias de ropa',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Comprar',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'pt_BR',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Suporte ao cliente',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Sugestões de roupas',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Compre agora',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'id_ID',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Dukungan Pelanggan',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Saran pakaian', type: 'postback', payload: 'CURATION' },
     { type: 'web_url',
       title: 'Belanja sekarang',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'ar_AR',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'خدمة العملاء',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'اقتراحات لأطقم ملابس',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'تسوق الآن',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'de_DE',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Kundensupport',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Outfit-Vorschläge',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Jetzt einkaufen',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'it_IT',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Assistenza clienti',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Suggerimenti sui look',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Acquista ora',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'ja_JP',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'カスタマーサポート', type: 'nested', call_to_actions: [Array] },
     { title: 'コーディネートのおすすめ', type: 'postback', payload: 'CURATION' },
     { type: 'web_url',
       title: '購入する',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'ko_KR',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: '고객 지원', type: 'nested', call_to_actions: [Array] },
     { title: '의상 추천', type: 'postback', payload: 'CURATION' },
     { type: 'web_url',
       title: '지금 구매하기',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'ru_RU',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Служба поддержки клиентов',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Советы по выбору одежды',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'В магазин',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'th_TH',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'ฝ่ายบริการลูกค้า',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'คำแนะนำเกี่ยวกับชุด',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'เลือกซื้อเลย',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'vi_VN',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: 'Hỗ trợ khách hàng',
       type: 'nested',
       call_to_actions: [Array] },
     { title: 'Gợi ý về trang phục',
       type: 'postback',
       payload: 'CURATION' },
     { type: 'web_url',
       title: 'Mua ngay',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'zh_CN',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: '客户支持', type: 'nested', call_to_actions: [Array] },
     { title: '穿搭建议', type: 'postback', payload: 'CURATION' },
     { type: 'web_url',
       title: '去逛逛',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'zh_HK',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: '客戶支援團隊', type: 'nested', call_to_actions: [Array] },
     { title: '服裝建議', type: 'postback', payload: 'CURATION' },
     { type: 'web_url',
       title: '立即購買',
       url: '',
       webview_height_ratio: 'full' } ] }
{ locale: 'zh_TW',
  composer_input_disabled: false,
  call_to_actions:
   [ { title: '客戶支援團隊', type: 'nested', call_to_actions: [Array] },
     { title: '服裝建議', type: 'postback', payload: 'CURATION' },
     { type: 'web_url',
       title: '立即購買',
       url: '',
       webview_height_ratio: 'full' } ] }
Setting Messenger Profile for app 729...
Fetching personas for app 729...
Enable Built-in NLP for Page 10702....
{ whitelisted_domains: [ 'https://stupid-....., '' ] }
Setting Messenger Profile for app 729757....
Request sent: {"error":{"message":"Your message couldn't be sent because it includes content that other people on Facebook have reported as abusive.","type":"OAuthException","code":368,"error_data":{"sentry_block_data":"xxxxxx-hSywduRlFJH3QBTPg4okGTF4P9EheWiojwmPzxr-xxxxx-KFepjESWg9Lisa0-PtdaBq_OJHqyr1AuaYNHiFTuo-udeTiL3wXh7ulkEV6U9eO_LHakeSiyRitFMLfOFtV6EPV95bH3o7hlsxqBthB4WbK3948cO7290Q","help_center_id":0},"error_subcode":1346003,"error_user_msg":"","fbtrace_id":"A6-xxxx"}}
{}
Creating a Persona for app xxx
Creating a Persona for app xxx
Creating a Persona for app xxx
Creating a Persona for app xxx
Request sent: { error:
   { message:
      'Your message couldn\'t be sent because it includes content that other people on Facebook have reported as abusive.',
     type: 'OAuthException',
     code: 368,
     error_data:
      { sentry_block_data:
         'xxxx-m0SIDlFKfnkyrtjRsagOtkQ',
        help_center_id: 0 },
     error_subcode: 1346003,
     error_user_msg: '',
     fbtrace_id: 'AitVh0xI-xxxx' } }
Unable to create a persona: Error: 400
    at Request.<anonymous> (/Users/janmeppe/Documents/Projects/original-coast-clothing/services/graph-api.js:250:20)
    at Request.emit (events.js:198:13)
    at Request.onRequestResponse (/Users/janmeppe/Documents/Projects/original-coast-clothing/node_modules/request/request.js:1066:10)
    at ClientRequest.emit (events.js:198:13)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:556:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
    at TLSSocket.socketOnData (_http_client.js:442:20)
    at TLSSocket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:269:11) [ <Buffer 7b 22 65 72 72 6f 72 22 3a 7b 22 6d 65 73 73 61 67 65 22 3a 22 59 6f 75 72 20 6d 65 73 73 61 67 65 20 63 6f 75 6c 64 6e 27 74 20 62 65 20 73 65 6e 74 ... > ]
{ Daniel: undefined }
Unable to create a persona: Error: 400
    at Request.<anonymous> (/Users/janmeppe/Documents/Projects/original-coast-clothing/services/graph-api.js:250:20)
    at Request.emit (events.js:198:13)
    at Request.onRequestResponse (/Users/janmeppe/Documents/Projects/original-coast-clothing/node_modules/request/request.js:1066:10)
    at ClientRequest.emit (events.js:198:13)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:556:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
    at TLSSocket.socketOnData (_http_client.js:442:20)
    at TLSSocket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:269:11) [ <Buffer 7b 22 65 72 72 6f 72 22 3a 7b 22 6d 65 73 73 61 67 65 22 3a 22 59 6f 75 72 20 6d 65 73 73 61 67 65 20 63 6f 75 6c 64 6e 27 74 20 62 65 20 73 65 6e 74 ... > ]
{ Daniel: undefined, Riandy: undefined }
Unable to create a persona: Error: 400
    at Request.<anonymous> (/Users/janmeppe/Documents/Projects/original-coast-clothing/services/graph-api.js:250:20)
    at Request.emit (events.js:198:13)
    at Request.onRequestResponse (/Users/janmeppe/Documents/Projects/original-coast-clothing/node_modules/request/request.js:1066:10)
    at ClientRequest.emit (events.js:198:13)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:556:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
    at TLSSocket.socketOnData (_http_client.js:442:20)
    at TLSSocket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:269:11) [ <Buffer 7b 22 65 72 72 6f 72 22 3a 7b 22 6d 65 73 73 61 67 65 22 3a 22 59 6f 75 72 20 6d 65 73 73 61 67 65 20 63 6f 75 6c 64 6e 27 74 20 62 65 20 73 65 6e 74 ... > ]
{ Daniel: undefined, Riandy: undefined, Laura: undefined }
Unable to create a persona: Error: 400
    at Request.<anonymous> (/Users/janmeppe/Documents/Projects/original-coast-clothing/services/graph-api.js:250:20)
    at Request.emit (events.js:198:13)
    at Request.onRequestResponse (/Users/janmeppe/Documents/Projects/original-coast-clothing/node_modules/request/request.js:1066:10)
    at ClientRequest.emit (events.js:198:13)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:556:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
    at TLSSocket.socketOnData (_http_client.js:442:20)
    at TLSSocket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:269:11) [ <Buffer 7b 22 65 72 72 6f 72 22 3a 7b 22 6d 65 73 73 61 67 65 22 3a 22 59 6f 75 72 20 6d 65 73 73 61 67 65 20 63 6f 75 6c 64 6e 27 74 20 62 65 20 73 65 6e 74 ... > ]
{ Daniel: undefined,
  Riandy: undefined,
  Laura: undefined,
  Jorge: undefined }
Request sent: {"success":true}
Request sent: { error:
   { message:
      '(#11) Setting of Nested Persistent Menu has been deprecated for v8.0 and higher',
     type: 'OAuthException',
     code: 11,
     fbtrace_id: 'xxxxx' } }

Error: "Unable to create a persona"(400)

Describe the bug

After following the guide and deploy on heroku, when access this link: https://xxxxxxx.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

I got the error:
2020-10-29T07:06:31.872953+00:00 app[web.1]: Setting Messenger Profile for app 3476353462387655
2020-10-29T07:06:31.874542+00:00 app[web.1]: Fetching personas for app 3476353462387655
2020-10-29T07:06:31.876053+00:00 app[web.1]: Enable Built-in NLP for Page 618148791910439
2020-10-29T07:06:31.876893+00:00 app[web.1]: {
2020-10-29T07:06:31.876894+00:00 app[web.1]: whitelisted_domains: [
2020-10-29T07:06:31.876895+00:00 app[web.1]: 'https://fbmessengerbot2020.herokuapp.com',
2020-10-29T07:06:31.876896+00:00 app[web.1]: 'https://fbmessengerbot2020.herokuapp.com'
2020-10-29T07:06:31.876896+00:00 app[web.1]: ]
2020-10-29T07:06:31.876896+00:00 app[web.1]: }
2020-10-29T07:06:31.876946+00:00 app[web.1]: Setting Messenger Profile for app 3476353462387655
2020-10-29T07:06:32.163092+00:00 app[web.1]: {}
2020-10-29T07:06:32.163403+00:00 app[web.1]: Creating a Persona for app 3476353462387655
2020-10-29T07:06:32.164430+00:00 app[web.1]: Creating a Persona for app 3476353462387655
2020-10-29T07:06:32.165240+00:00 app[web.1]: Creating a Persona for app 3476353462387655
2020-10-29T07:06:32.165857+00:00 app[web.1]: Creating a Persona for app 3476353462387655
2020-10-29T07:06:32.336198+00:00 app[web.1]: Request sent: {"success":true}
2020-10-29T07:06:32.371938+00:00 app[web.1]: Request sent: { result: 'success' }
2020-10-29T07:06:32.441556+00:00 app[web.1]: Unable to create a persona: Error: 400
2020-10-29T07:06:32.441567+00:00 app[web.1]: at Request. (/app/services/graph-api.js:250:20)
2020-10-29T07:06:32.441567+00:00 app[web.1]: at Request.emit (node:events:327:20)
2020-10-29T07:06:32.441568+00:00 app[web.1]: at Request.onRequestResponse (/app/node_modules/request/request.js:1059:10)
2020-10-29T07:06:32.441568+00:00 app[web.1]: at ClientRequest.emit (node:events:327:20)
2020-10-29T07:06:32.441569+00:00 app[web.1]: at HTTPParser.parserOnIncomingClient (node:_http_client:652:27)
2020-10-29T07:06:32.441569+00:00 app[web.1]: at HTTPParser.parserOnHeadersComplete (node:_http_common:126:17)
2020-10-29T07:06:32.441570+00:00 app[web.1]: at TLSSocket.socketOnData (node:_http_client:518:22)
2020-10-29T07:06:32.441570+00:00 app[web.1]: at TLSSocket.emit (node:events:327:20)
2020-10-29T07:06:32.441570+00:00 app[web.1]: at addChunk (node:internal/streams/readable:304:12)
2020-10-29T07:06:32.441571+00:00 app[web.1]: at readableAddChunk (node:internal/streams/readable:279:9) {"error":{"message":"(#100) Upload failed","type":"OAuthException","code":100,"error_subcode":2018007,"fbtrace_id":"Ako2-4yhSDPMyaWbKQzzzjH"}}
2020-10-29T07:06:32.441892+00:00 app[web.1]: { Daniel: undefined }
2020-10-29T07:06:32.451312+00:00 app[web.1]: Request sent: {"error":{"message":"(#2200) Callback verification failed with the following errors: HTTP Status Code = 404; HTTP Message = Not Found","type":"OAuthException","code":2200,"fbtrace_id":"AGQBIX0zxnGpAJrSLVtQoa0"}}
2020-10-29T07:06:32.457417+00:00 app[web.1]: Unable to create a persona: Error: 400
2020-10-29T07:06:32.457418+00:00 app[web.1]: at Request. (/app/services/graph-api.js:250:20)
2020-10-29T07:06:32.457418+00:00 app[web.1]: at Request.emit (node:events:327:20)
2020-10-29T07:06:32.457418+00:00 app[web.1]: at Request.onRequestResponse (/app/node_modules/request/request.js:1059:10)
2020-10-29T07:06:32.457419+00:00 app[web.1]: at ClientRequest.emit (node:events:327:20)
2020-10-29T07:06:32.457419+00:00 app[web.1]: at HTTPParser.parserOnIncomingClient (node:_http_client:652:27)
2020-10-29T07:06:32.457419+00:00 app[web.1]: at HTTPParser.parserOnHeadersComplete (node:_http_common:126:17)
2020-10-29T07:06:32.457420+00:00 app[web.1]: at TLSSocket.socketOnData (node:_http_client:518:22)
2020-10-29T07:06:32.457420+00:00 app[web.1]: at TLSSocket.emit (node:events:327:20)
2020-10-29T07:06:32.457421+00:00 app[web.1]: at addChunk (node:internal/streams/readable:304:12)
2020-10-29T07:06:32.457421+00:00 app[web.1]: at readableAddChunk (node:internal/streams/readable:279:9) {"error":{"message":"(#100) Upload failed","type":"OAuthException","code":100,"error_subcode":2018007,"fbtrace_id":"A9dDNMK7-ze_mHtizEQCK5P"}}
2020-10-29T07:06:32.457527+00:00 app[web.1]: { Daniel: undefined, Jorge: undefined }
2020-10-29T07:06:32.488979+00:00 app[web.1]: Unable to create a persona: Error: 400
2020-10-29T07:06:32.488982+00:00 app[web.1]: at Request. (/app/services/graph-api.js:250:20)
2020-10-29T07:06:32.488982+00:00 app[web.1]: at Request.emit (node:events:327:20)
2020-10-29T07:06:32.488983+00:00 app[web.1]: at Request.onRequestResponse (/app/node_modules/request/request.js:1059:10)
2020-10-29T07:06:32.488983+00:00 app[web.1]: at ClientRequest.emit (node:events:327:20)
2020-10-29T07:06:32.488983+00:00 app[web.1]: at HTTPParser.parserOnIncomingClient (node:_http_client:652:27)
2020-10-29T07:06:32.488984+00:00 app[web.1]: at HTTPParser.parserOnHeadersComplete (node:_http_common:126:17)
2020-10-29T07:06:32.488984+00:00 app[web.1]: at TLSSocket.socketOnData (node:_http_client:518:22)
2020-10-29T07:06:32.488985+00:00 app[web.1]: at TLSSocket.emit (node:events:327:20)
2020-10-29T07:06:32.488985+00:00 app[web.1]: at addChunk (node:internal/streams/readable:304:12)
2020-10-29T07:06:32.488986+00:00 app[web.1]: at readableAddChunk (node:internal/streams/readable:279:9) {"error":{"message":"(#100) Upload failed","type":"OAuthException","code":100,"error_subcode":2018007,"fbtrace_id":"Azjf31i7x3zPm8BeSjMQXT2"}}
2020-10-29T07:06:32.489153+00:00 app[web.1]: { Daniel: undefined, Jorge: undefined, Laura: undefined }
2020-10-29T07:06:32.534736+00:00 app[web.1]: Request sent: {
2020-10-29T07:06:32.534743+00:00 app[web.1]: error: {
2020-10-29T07:06:32.534744+00:00 app[web.1]: message: '(#11) Setting of Nested Persistent Menu has been deprecated for v8.0 and higher',
2020-10-29T07:06:32.534745+00:00 app[web.1]: type: 'OAuthException',
2020-10-29T07:06:32.534745+00:00 app[web.1]: code: 11,
2020-10-29T07:06:32.534746+00:00 app[web.1]: fbtrace_id: 'AHhD6jUM6ARRq8Fkxx5vPub'
2020-10-29T07:06:32.534746+00:00 app[web.1]: }
2020-10-29T07:06:32.534746+00:00 app[web.1]: }
2020-10-29T07:06:32.555942+00:00 app[web.1]: Unable to create a persona: Error: 400
2020-10-29T07:06:32.555944+00:00 app[web.1]: at Request. (/app/services/graph-api.js:250:20)
2020-10-29T07:06:32.555944+00:00 app[web.1]: at Request.emit (node:events:327:20)
2020-10-29T07:06:32.555945+00:00 app[web.1]: at Request.onRequestResponse (/app/node_modules/request/request.js:1059:10)
2020-10-29T07:06:32.555945+00:00 app[web.1]: at ClientRequest.emit (node:events:327:20)
2020-10-29T07:06:32.555946+00:00 app[web.1]: at HTTPParser.parserOnIncomingClient (node:_http_client:652:27)
2020-10-29T07:06:32.555946+00:00 app[web.1]: at HTTPParser.parserOnHeadersComplete (node:_http_common:126:17)
2020-10-29T07:06:32.555947+00:00 app[web.1]: at TLSSocket.socketOnData (node:_http_client:518:22)
2020-10-29T07:06:32.555947+00:00 app[web.1]: at TLSSocket.emit (node:events:327:20)
2020-10-29T07:06:32.555949+00:00 app[web.1]: at addChunk (node:internal/streams/readable:304:12)
2020-10-29T07:06:32.555950+00:00 app[web.1]: at readableAddChunk (node:internal/streams/readable:279:9) {"error":{"message":"(#100) Upload failed","type":"OAuthException","code":100,"error_subcode":2018007,"fbtrace_id":"A-jUFj2JM3yorQNoxtJHoXq"}}
2020-10-29T07:06:32.556053+00:00 app[web.1]: {
2020-10-29T07:06:32.556054+00:00 app[web.1]: Daniel: undefined,
2020-10-29T07:06:32.556054+00:00 app[web.1]: Jorge: undefined,
2020-10-29T07:06:32.556054+00:00 app[web.1]: Laura: undefined,
2020-10-29T07:06:32.556055+00:00 app[web.1]: Riandy: undefined
2020-10-29T07:06:32.556055+00:00 app[web.1]: }

Also when I send message to FB Page, Nothing happen.

To Reproduce

Steps to reproduce the behavior:

  1. Go to heroku and deploy sample app
  2. Click on the link: https://xxxxxxx.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>
  3. Send message to page but got no response.
  4. See error: above

Expected behavior

When sending message to Page, Page should response.

Remove BOM Character from the cz_TW Locale

Describe the bug

The BOM Character (Byte order mark) breaks the loading the locale as a JSON

Repro

var data = fs.readFileSync('./locales/zh_HK.json');
var locale = JSON.parse(data);
SyntaxError: Unexpected token in JSON at position 0

fs.readFileSync('./locales/zh_TW.json', 'utf8').charCodeAt(0);
65279
fs.readFileSync('./locales/es_ES.json', 'utf8').charCodeAt(0);
65279
fs.readFileSync('./locales/zh_HK.json', 'utf8').charCodeAt(0);
65279

Solution

Suggestion: dos2unix can easily remove it

Unable to callSubscriptionsAPI

Describe the bug

I followed the step by step procedure and was successful up to node app.js. however once I sent a message the bot is not replying and in my terminal it says

Unable to callSubscriptionsAPI: Bad Request {
error: {
message: '(#2200) Callback verification failed with the following errors: HTTP Status Code = 404; HTTP Message = Not Found',
type: 'OAuthException',
code: 2200,
fbtrace_id: 'AbYveT9_aL1Xm1ckgbobFCY'
}

Screen Shot 2021-06-28 at 9 25 33 AM

Short description of the issue

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Send message '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Add an option for Deploying with Docker

Is your feature request related to a problem? Please describe.

Although the steps required to deploy the application to a remote sever are minimal, we can make it even easier for developers to run their code in production.

Describe the solution you'd like

Add a Dockerfile to the project to build images automatically. A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Using docker build users can create an automated build that executes several command-line instructions in succession.

Documentation

Improve variables consistency and messenger entrypoint comment in Receive.

In services/receive.js, the handleTextMessage function handles the messenger input with a default handler. The variables of this function are not declared, and also in the default handler the message variable is unused.

The consistency of the variables should be defined with an event variable as handleMessage does. It would also benefit to have a comment to know where the default handler is for the messenger event.

Verbose errors from missing environmental variables.

I was deploying the server on a new heroku instance. When trying to setup /profile?mode=webhook I just got over and over error code 190 and spent 45 min trying to find out why. Since the access token was valid.

Turns out I forgot to add the APP_SECRET config var.

Let's include a check in the profile check for the expected env vars to help developers notice this things when setting up their instance.

Add support for Customer Chat Plugging payloads

Describe the bug

The customer chat plugin on the originalcoastclothing.com site send the ocwebsite-chat-plugin playload. But we are not using it, so on existing threads when the user clicks on continue on the website we send a generic response

Screenshot 2019-07-29 12 01 40

To Reproduce

Having an existing thread:

  1. Visit originalcoastclothing.com
  2. Click continue con the Customer Chat Plugin
  3. See the issue on the thread.

Site configuration

<div class="fb-customerchat"
 page_id="542998526103632"
 theme_color="#FF9100"
 logged_in_greeting="You can chat with us at any time. We are here to help"
 logged_out_greeting="You can connect with us in Messenger"
 ref="ocwebsite-chat-plugin"
>

Localtunnel error

Hi there,

Under Using Local Tunnel to get incoming messages, there is a Localtunnel link that would link me to an external https address. But after I clicked on it returned me this message, "You Can't Go to This Link From Facebook. The link you tried to visit goes against our Community Standards."

I was not sure how to fix this issue, please let me know if anyone knows the solution.

Thank you so much in advance,
Pack

Detect that people need customer support using Built-in NLP

Is your feature request related to a problem? Please describe.

Currently, If a person send a text message containing the keyword help, we will trigger the customer care flow, but this does not cover other type of support request. See https://github.com/fbsamples/original-coast-clothing/blob/master/services/receive.js#L92

Describe the solution you'd like

We should detect that a person needs help using a custom Built-in NLP model, and route them accordingly to the correct experience.

Documentation

Can I request more fields from Graph API?

When try to request more fields from GraphAPI, the request failed.

I am working on a project by using this project as an example. Thanks so much for building all these. I was trying to get more fields from GraphAPI, so that I may connect users to each other by sending out a link of others' Facebook pages.

To Reproduce

Steps to reproduce the behavior:

  1. Go to 'graph-api.js'
  2. Add more fields listed on Graph API User official website on line 134, under function callUserProfileAPI(senderPsid).
  3. Deploy and go to Heroku log console.
  4. See error: (DONATE_MORE is the paylaod I defined.)
2019-08-22T17:54:17.350841+00:00 app[web.1]: Profile already exists PSID: 2343351982428387 with locale: en_US
2019-08-22T17:54:17.350871+00:00 app[web.1]: Received Payload: DONATE_MORE for 2343351982428387
2019-08-22T17:54:17.414932+00:00 app[web.1]: FBA event 'DONATE_MORE'
2019-08-22T17:54:17.436829+00:00 app[web.1]: Fetch failed: Error: 400
2019-08-22T17:54:17.436833+00:00 app[web.1]:     at Request.<anonymous> (/app/services/graph-api.js:143:20)
2019-08-22T17:54:17.436835+00:00 app[web.1]:     at Request.emit (events.js:209:13)
2019-08-22T17:54:17.436838+00:00 app[web.1]:     at Request.onRequestResponse (/app/node_modules/request/request.js:1066:10)
2019-08-22T17:54:17.436840+00:00 app[web.1]:     at ClientRequest.emit (events.js:209:13)
2019-08-22T17:54:17.436842+00:00 app[web.1]:     at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:582:27)
2019-08-22T17:54:17.436844+00:00 app[web.1]:     at HTTPParser.parserOnHeadersComplete (_http_common.js:115:17)
2019-08-22T17:54:17.436846+00:00 app[web.1]:     at TLSSocket.socketOnData (_http_client.js:456:22)
2019-08-22T17:54:17.436849+00:00 app[web.1]:     at TLSSocket.emit (events.js:209:13)
2019-08-22T17:54:17.436850+00:00 app[web.1]:     at addChunk (_stream_readable.js:305:12)
2019-08-22T17:54:17.436852+00:00 app[web.1]:     at readableAddChunk (_stream_readable.js:286:11)

Send fails for Apps without advance User Profile Access

Most new apps won't have access to user extra data, so the API call will fail to execute if the api call requests any of these advance unapproved fields.
https://developers.facebook.com/docs/messenger-platform/identity/user-profile/

Suggestion

Let's include two new env variables that allow developers to setup if advance fields are available for the page and as well as setup their default preferred locale easily.

has_extra_user_field_accesss: process.env.HAS_EXTRA_USER_FIELD_ACCESSS || false,
default_locale: process.env.DEFAULT_LOCALE || 'en_US',

in https://github.com/fbsamples/original-coast-clothing/blob/master/services/config.js

Then use the above vars like:

let fields = 'first_name, last_name';
    if (config.has_extra_user_field_accesss) {
      fields = 'first_name, last_name, gender, timezone, locale';
    }

in https://github.com/fbsamples/original-coast-clothing/blob/master/services/graph-api.js#L138

if (users[senderPsid].locale != null) {
          i18n.setLocale(users[senderPsid].locale);
        } else {
          i18n.setLocale(config.default_locale);
        }

https://github.com/fbsamples/original-coast-clothing/blob/master/app.js#L131

RGPD problems (Europe) : impossible to solve ?

With the new laws in Europe it seems the chatbot doesn't work anymore there.

When running the app after following the tutorial for the local environement
https://developers.facebook.com/docs/messenger-platform/getting-started/sample-experience
I got this :

Request sent: {"error":{"message":"(#10) Cette action n\u2019a pas \u00e9t\u00e9 envoy\u00e9e en raison de nouvelles r\u00e8gles de confidentialit\u00e9 en Europe. Voir la documentation d\u00e9veloppeur pour plus d\u2019informations.","type":"OAuthException","code":10,"error_subcode":2018336,"fbtrace_id":"ATwZHxxCrzYl--VAz7l3vp4"}}
Creation failed: Error: 400

Is it impossible now for Europeans to create Messenger bots ?

Detect people's locale using Built-in NLP Language Identification API

Is your feature request related to a problem? Please describe.

If a person wants to interact with the experience in a different language than the one expected, it will fail with a default message instead of a customised one:

Sorry, but I don’t recognize "Je ne comprends pas".

Also it is not possible for a person to chose a different locale than the one detected from his/her user profile.

Describe the solution you'd like

Leverage Built-in NLP Language Identification API to detect the language that best suit the person preferences and acknowledge its usage with a personalised message.

  • If preferred locale is supported -> Ask to switch the conversation to this new language
  • If preferred locale is NOT supported -> Send a message mentioning the locale

Documentation

Language identification is automatically enabled with built-in NLP. The nlp key in the request sent to the webhook will return the top detected locales for the message.

Error when running the code on AWS EC2.

When attempting to run the example (on an AWS EC2) I get:
/var/www/html/bot1/..bot2/original-coast-clothing/app.js:15
{ urlencoded, json } = require("body-parser"),
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3

I can't read the message from instagram dm

Describe the bug

Hello I'm trying to receive business instagram message for an chatbot
I wrote <page_ID>/conversations?fields=messages{message}&platform=instagram at API graph explorer
but the result is

empty

I ticked all the permissions But didn't work
it's supposed to receive the message, id.. but I received it empty!!

How does OriginalCoastClothing avoid the "User wants to send you a message" speed bump?

When I use this codebase to prototype a interact-able experience for my test_ prefixed IG account I see the Ice Breakers and once pressed and a message is sent -- I get a "User wants to send you a message" request notification.

I approve the notification and there are no further webhook events and I have to resend my message after the request has been approved.

Same account sends a first time message to OriginalCoastClothing hitting an Icebreaker button and gets a response.

What's up?

Short description of the issue

Describe the bug

Reproducible error - Unable to proceed with FB messenger tutorial. HTTP response says

ERROR - Need a proper API_URL in the .env file

Which I already have one in the .env file

Nodejs command line shows error diarrhoea (See below for error messages.)

To Reproduce

Steps to reproduce the behavior:

  1. Setup nodejs (v12.17.0)
  2. git clone https://github.com/fbsamples/original-coast-clothing.git; cd original-coast-clothing
  3. yarn install
  4. Complete .env as required
    API_URL="http://XXXXXXXXXXX.ngrok.io"
  5. node app.js
  6. Set up ngrok as local http tunnel
  7. Send a GET request to http://localhost:3000/profile?mode=all&verify_token=AAAAAA

Expected behavior

Not sure because all I've got are error messages on the http response and on the nodejs console.

Error message

HTTP Response (on web browser)

ERROR - Need a proper API_URL in the .env file

Nodejs console

Setting Messenger Profile for app 13672067XXXXXXXX
Fetching personas for app 13672067XXXXXXXX
Enable Built-in NLP for Page 1061562XXXXXXXX
{ whitelisted_domains: [ 'http://XXXXXXXXXXX.ngrok.io', undefined ] }
Setting Messenger Profile for app 13672067XXXXXXXX
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at write_ (_http_outgoing.js:629:17)
    at ServerResponse.write (_http_outgoing.js:621:15)
    at /Users/kingchangco/Projects/original-coast-clothing/app.js:180:13
    at Layer.handle [as handle_request] (/Users/kingchangco/Projects/original-coast-clothing/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/kingchangco/Projects/original-coast-clothing/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/kingchangco/Projects/original-coast-clothing/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/kingchangco/Projects/original-coast-clothing/node_modules/express/lib/router/layer.js:95:5)
    at /Users/kingchangco/Projects/original-coast-clothing/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Users/kingchangco/Projects/original-coast-clothing/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/kingchangco/Projects/original-coast-clothing/node_modules/express/lib/router/index.js:275:10)
Emitted 'error' event on ServerResponse instance at:
    at writeAfterEndNT (_http_outgoing.js:684:7)
    at processTicksAndRejections (internal/process/task_queues.js:85:21) {
  code: 'ERR_STREAM_WRITE_AFTER_END'
}

Additional context

Add any other context about the problem here.

save whole conversation

In our bot, we mainly use human agents to talk with audiences. Is there any way to store the whole conversation between audiences and human agents. In the source code, I find the place to get audience's responses, but I don't know how to get the utterances from human agents.

Output useful info when running the Node App.

The current output when running the app is:

$ node app.js
Your app is listening on port 3000
$ node app.js
Your app is listening on port 3000
 
Test your app by messaging:
https://m.me/<PAGE_ID>

If persona var is not present let's include:

Is this the first time running? 
  make sure to set the both the Messenger profile, persona and webhook by visiting:
  <APP_URL>?profile?mode=all&verify_token=<VERIFY_TOKEN>

Let's also do warnings based on missing env vars

WARNING: Your APP_URL is missing or does not begin with "https://"

Customer Satisfaction (CSAT) survey interrupts ongoing conversations

Describe the bug

After a person talks to an agent for order, billing or other issues, we send a CSAT survey after ~1 minute. But this survey often interrupt any further conversation with the experience. Also if a person talks to an agent after another, we send 2x the CSAT which add a lot of noise in the conversation.

To Reproduce

Steps to reproduce the behavior:

  1. Send 'help'
  2. Click on 'Order Inquiries'
  3. Click on 'Outfit suggestions' in the persistent menu
  4. Wait until you receive the CSAT survey (~1 min)
  5. Observe that the quick replies sent with 'Are you looking for an outfit for yourself or someone else?' are replaced with the quick replies from the CSAT survey

Expected behavior

The survey should be sent when no recent interaction has occurred between the user and the experience, to avoid interrupting the conversation flow. Also we should flag when a survey has been sent in the past ~24h to avoid repeated CSAT messages.

Screenshots

IMG_903AE94F7B1C-1

Possible Solution

M.me links with referral parameter don't work for first-time users

Describe the bug

When a first-time user click on a m.me link including a referral parameter and/or scan a QR code containing this type of link, they won't enter the expected curation flow, instead they will receive the NUX messages.

To Reproduce

Steps to reproduce the behavior:

  1. Click on https://m.me/OriginalCoastClothing?ref=SUMMER_COUPON
  2. Land on the Get Started page
  3. Click the Get Started button
  4. Observe that you receive the welcome message

Expected behavior

Instead of receiving the default welcome message that is usually triggered with the Get Started flow, you should get the summer coupon.

Additional context

The issue happen because we aren't reading the ref parameter value in the postback event:

{
  "sender":{
    "id":"<PSID>"
  },
  "recipient":{
    "id":"<PAGE_ID>"
  },
  "timestamp":1458692752478,
  "postback":{
    "payload":"<USER_DEFINED_PAYLOAD>",
    "referral": {
      "ref": "ref_data_in_m_dot_me_param",
      "source": "SHORTLINK",
      "type": "OPEN_THREAD",
    }
  }
}

See docs: https://developers.facebook.com/docs/messenger-platform/discovery/m-me-links#reading_parameter

Includes content have reported as abusive

I'm running this sample and it's show this error

Request sent: { error: { message: "Your message couldn't be sent because it includes content that other people on Facebook have reported as abusive.", type: 'OAuthException', code: 368, error_data: { sentry_block_data: 'Aei4oUoPdnkY3kHXoCgrD8__g_sqxljbQdf5FowqWRVAHgZBJ-c5Rf5HawmgnfWLVMcd-Gk5neXILmQHGft4lNjEdB5ak-jCU-2em8u8ghBMS48VDr-zI0SkNs7BrXdqH4LrjdceV2jbOXawarlyOxSloh_nJQQvoTogFWCRBq1KicrZ4raWV2o4_mVKfa6hm7dansbZn12UFilsLwOnn4PCZNZUJxYp-WRLeT-9hWHvH7hWfvuDZV-eUZyYQs3cDFxbpoTyMl3ojCYDY7B0NwFA8qsOraiAwm27IBOhuSuKsAQae2u4fNfGin0ES8lBXGLf7pcZz0PtKXXcnA570oq-Yf0Oq9gPBZSfhtqjtPGeiA', help_center_id: 0 }, error_subcode: 1346003, error_user_msg: '', fbtrace_id: 'AzRnhzCIoElDzFIzNhIV9_L' } }

How to resolve this issue ?

ERROR - Need a proper API_URL in the .env file

ngrok used

After I run the application, it working until i visit "/profile?mode=all&verify_token=******". After that, application shut down and show "ERROR - Need a proper API_URL in the .env file"

I Created proper API_URL int .env file but its still the same.

.env file

# Environment Config

# Store your secrets and config variables here.
# Only invited collaborators will be able to see your .env values.

# Page and Application information
PAGE_ID=<hidden>
APP_ID=<hidden>
PAGE_ACCESS_TOKEN=EAAD4NteDd3IBAKIUxzqG066JkYg6P6sHd9qJJYMqpJanJ9NYqseZBiTmgQj4EZBCIp8wiIJZBSRvBxv7mvCJ6K5yNsLf6ktFDQSJBOe0bq1UoMvumqeV3QR8sJOSHWgTfetwt54UoViLBhwFmksk1ZBVISf1HTUoNaHYmgaq4SDq3vwxY9GU

# Your App secret can be found in App Dashboard -> Settings -> Basic
APP_SECRET=<hidden>

# A random string that is used for the webhook verification request
VERIFY_TOKEN=<hidden>

# URL where you host this code
# You can use a tunneling service or Heroku ex: https://mystic-wind-83.herokuapp.com
# It must be https, and without trailing slash.
APP_URL=a8e9-2a00-1028-8d19-dd6a-71cc-3dfe-6a67-e663.ngrok.io
API_URL=https://a8e9-2a00-1028-8d19-dd6a-71cc-3dfe-6a67-e663.ngrok.io

# URL of your website where the "shop now" is located
# Can be the same as your app domain URL ex: https://www.originalcoastclothing.com/
SHOP_URL=http://a8e9-2a00-1028-8d19-dd6a-71cc-3dfe-6a67-e663.ngrok.io

# Preferred port
PORT=3000

# Note: .env is a shell file so there can't be spaces around =

Error message from node.js:

Error [ERR_STREAM_WRITE_AFTER_END]: write after end at writeAfterEnd (_http_outgoing.js:694:15) at write_ (_http_outgoing.js:706:5) at ServerResponse.write (_http_outgoing.js:687:15) at C:\Users\samue\OneDrive\Plocha\GIT\original-coast-clothing\app.js:158:13 at Layer.handle [as handle_request] (C:\Users\samue\OneDrive\Plocha\GIT\original-coast-clothing\node_modules\express\lib\router\layer.js:95:5) at next (C:\Users\samue\OneDrive\Plocha\GIT\original-coast-clothing\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (C:\Users\samue\OneDrive\Plocha\GIT\original-coast-clothing\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (C:\Users\samue\OneDrive\Plocha\GIT\original-coast-clothing\node_modules\express\lib\router\layer.js:95:5) at C:\Users\samue\OneDrive\Plocha\GIT\original-coast-clothing\node_modules\express\lib\router\index.js:281:22 at Function.process_params (C:\Users\samue\OneDrive\Plocha\GIT\original-coast-clothing\node_modules\express\lib\router\index.js:335:12) Emitted 'error' event on ServerResponse instance at: at writeAfterEndNT (_http_outgoing.js:753:7) at processTicksAndRejections (internal/process/task_queues.js:83:21) { code: 'ERR_STREAM_WRITE_AFTER_END' }

Can't find the place where the Get Started is created

Hello there,
I can't find the place where you are actually creating the Get Started button, nor the Greeting function, and not how you generate those 3 messages after the Get Started button is pressed.
I did find where you store those messages, in the Locales\en_US.json file, and then generated in the i18 file, but i couldn't find whats triggered it in your app. I hoped you'll be able to help me,
Thanks!

Implement the new Beta for Appointment Booking

Let's implement Appointment Booking solution for this so developers can experience it and have an example on how to do it.

The demo will go around the need to book and appointment with a personal stylist from the website to then book the appointment in the Messenger thread

"Grant Messenger access to your Facebook App" Steps Not Consistent / Working?

Describe the bug

In the section called "Grant Messenger access to your Facebook App" on the main README.md at the root of the project, the steps are as follows,

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 Edit Permissions
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

However, after performing the 7th option, I do not see a button form under the "Built-In NLP"

image

I have connected and granted permissions above in the access token section, however, the Built-In NLP section asks me to Subscribe a Page first under the "Webhooks" section to use Built-In NLP .

Clicking on the Add Callback URL under the Webhooks section, I see the following fields,
image

I'm not sure what to do here exactly.

Help would be appreciated. Thank you!

To Reproduce

Follow the steps under Setup Steps -> Grant Messenger access to your Facebook App.

Expected behavior

Expecting some options to appear under the Built-In NLP section.

Screenshots

Added above

Additional context

I came here from this tutorial under the heading for Githubunder Deploy this experience on Messenger.

Short description of the issue

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Send message '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Add account linking functionality for order update

Is your feature request related to a problem? Please describe.

Currently, when a user request an order update we are mocking the account linking feature instead of actually leveraging it.

Describe the solution you'd like

Trigger the account linking flow in place of the current placeholder in https://github.com/fbsamples/original-coast-clothing/blob/master/services/order.js#L51

Documentation

webview does not load on messenger.com

Describe the bug

Hi FB team,
I know this is probably not the best place to report a bug like this,
But I have tried different channels of yours, still no answer from any of them.

So, please bear with me here.

I tried your demo chatbot from https://developers.facebook.com/docs/messenger-platform/getting-started/sample-experience/ on my computer.

But the webview does not load any content from original-coast-clothing website, this situation also applied to all the chatbots on messenger.com.

I've tested on different browsers (Chrome, Safari, Edge, Firefox), OSs (Windows, MacOS), and disable all the plugins that runs on my browser.

And all my colleagues cannot open it either.

It works fine on IOS and Android App and also on facebook.com though.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://www.messenger.com/ (web app)
  2. Click on any chatbot links that will leads you to a webview window.

Expected behavior

Website can be loaded in the iframe.

Screenshots

webview

Additional context

No.

10 Locales are not getting set

Describe the bug

We added 10 more locales but they are not getting set as part of the messenger profile

To Reproduce

Deleted my staging messenger profile

curl -X DELETE \
  'https://graph.facebook.com/v4.0/me/messenger_profile?fields=[%22get_started%22,%22greeting%22,%22persistent_menu%22]' \
  -H 'Authorization: Bearer XXXXXX'

Verified it was empty

curl -X GET \
  'https://graph.facebook.com/v4.0/me/messenger_profile?fields=get_started,greeting,persistent_menu' \
  -H 'Authorization: Bearer XXXXXX' \

Set the profile from my staging

https://xxxxxx.herokuapp.com/profile?mode=all&verify_token=xxxxxxxx

Verified it was only set for locales: ["en_US", "fr_FR", "es_ES", "es_LA", "pt_BR", "id_ID"],

curl -X GET \
  'https://graph.facebook.com/v4.0/me/messenger_profile?fields=get_started,greeting,persistent_menu' \
  -H 'Authorization: Bearer XXXXXX' \

Pause automation on Human Agent Replies from Page Inbox

Thread Automation is key to scale operations, yet when Human agents reply to the thread having the automation interact with the thread at the same time can lead to a bad customer experience.

It is a best practice to pause automation when a human agent is replying. To allow the human to drive the conversation that they have picked up by replying manually.

For Original Coast Clothing sample experience, we can include this as a feature that will signal app developers to implement this best practice. Let's use echo webhooks coming from the Page Inbox as signal to pause automation for ~15 min messages from threads that got a manual human reply.

Note: We probably want to only ignore text based messages after human agent has sent a message while still supporting postback messages since to allow for functionality like persistent menu to continue to be available.

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.