Jasper's Market is a fictional grocery brand created to showcase key features of the WhatsApp Business Platform. The bot leverages key features to deliver a great customer experience. Using this demo as inspiration, you can create a delightful WhatsApp experience that leverages both automation and live customer support.

Access the WhatsApp experience

Keep the existing link above for the Developer Docs QR placement. It prefills Get started, which the application attributes to developer_docs. For simplified DevX onboarding, use this link to prefill Try it out, which is attributed to simplified_devx_onboarding.

The application writes one JSON event to stdout after the user sends either recognized phrase. AppRunner forwards stdout to CloudWatch Logs. Matching is case-sensitive after trimming surrounding whitespace. Other messages, including edited phrases and older tokenized formats, do not produce attribution events.

The event name is entry_source_attributed. Its fields are schema_version, source_surface, inbound_message_id, receiver_phone_number_id, and event_timestamp. The event does not include the sender phone number or raw message text. This measures attributed conversation starts, not QR scans or link opens.

WhatsApp can retry the same webhook, so use inbound_message_id to deduplicate events instead of adding Redis state to the message path. This CloudWatch Logs Insights query returns one row per inbound WAMID while retaining the delivery count:

fields @timestamp, event_timestamp, source_surface,
       inbound_message_id, receiver_phone_number_id
| filter event_name = "entry_source_attributed"
| stats latest(@timestamp) as last_seen,
        count(*) as webhook_delivery_count,
        latest(event_timestamp) as event_timestamp,
        latest(source_surface) as source_surface,
        latest(receiver_phone_number_id) as receiver_phone_number_id
  by inbound_message_id
| sort last_seen desc

See the Developer Documentation on this experience.

• Meta Developer Account: Required to create new apps, which are the core of any Meta integration. You can create a new developer account by going to the Meta Developers website and clicking the "Get Started" button.
• Meta App: Contains the settings for your WhatsApp automation, including access tokens. To create a new app, visit your app dashboard.
• Meta Business: This is a pre-requisite for building with WhatsApp. If you don't have a business, you can create one in the app creation flow.
• WhatsApp Business Account: This is needed to send and receive messages in WhatsApp. To create a new WhatsApp Business account, visit Meta Business Suite.

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

1. Go to your app Basic Settings, Find your app here
2. Save the App ID number and the App Secret
3. Go to your Business in Meta Business Suite and find your desired WhatsApp Business Account under the WhatsApp tab.
4. Save the Waba ID
5. Create a system user token for your app. Save this App token. Find instructions here

1. Go to your app Dashboard
2. Under Add Product find WhatsApp and click Set Up
3. Now you should be in the App's WhatsApp Settings.
4. Navigate to the Configuration tab.

Clone this repository on your local machine:

$ git clone git@github.com:fbsamples/whatsapp-business-jaspers-market.git
$ cd whatsapp-business-jaspers-market

You will need:

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

In order for the app to send templated messages, you need to first create those templates under your WhatsApp Business Account. You can either do this by running ./template.sh or through WhatsApp Manager.

Template example handles are only used while creating templates. Runtime sends require media IDs uploaded for the phone number that sends the messages.

Upload each image used by the templates through the WhatsApp Cloud API media endpoint for your sender phone number. Save the returned IDs as GROCERIES_MEDIA_ID, STRAWBERRIES_MEDIA_ID, SHEET_PAN_DINNER_MEDIA_ID, and SALAD_BOWL_MEDIA_ID in .env. Use assets that you own and do not use Asset Manager URLs or the upload-session handles printed by template.sh as runtime media IDs.

Media IDs are scoped to the phone number that uploaded them and expire after 30 days. Re-upload your assets, update all four environment variables, and restart the application before they expire.

If not already installed, install redis via download.

You can then start a redis daemon locally via command line:

redis-server --daemonize yes

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 8080

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 forwarded to your local machine. In the above example, it is https://1c3b838deacb.ngrok.io.

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

$ npm install

Alternatively, you can use Yarn:

$ yarn install

Copy the file .sample.env to .env

cp .sample.env .env

Edit the .env file to add all saved credentials and the four media IDs returned by the WhatsApp Cloud API media endpoint. VERIFY_TOKEN is a passphrase you create for the webhook subscription handshake. The application refuses to start when a media ID is missing, blank, or still set to the example value 1234567890.

node app.js

Use the VERIFY_TOKEN that you created in .env file and subscribe your webhook server's URL for WhatsApp webhooks in your developer page's Configuration tab. Make sure to subscribe to the messages field. Note that the app listens to webhooks on the /webhook endpoint.

Send a message to your WhatsApp Business Account from a consumer WhatsApp number.

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 WhatsApp, you have fully set up your app! Voilà!

Exercise all three reply buttons and verify the grocery image, strawberry image, and both recipe carousel images render. Run the unit tests with:

npm test

Sample WhatsApp App Jasper's Market is Apache 2.0 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