diff --git a/README.md b/README.md index 0451986..afefc09 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Here is the diagram to understand the flow: - Webhook endpoint to receive messages from WhatsApp - Integration with Dify and Rasa for natural language processing and response generation -- Verification of incoming webhook requests +- Displaying interactive whatsapp message like [List](https://developers.facebook.com/docs/whatsapp/cloud-api/messages/interactive-list-messages), [Reply Buttons](https://developers.facebook.com/docs/whatsapp/cloud-api/messages/interactive-reply-buttons-messages), and [Flow](https://developers.facebook.com/docs/whatsapp/cloud-api/messages/interactive-flow-messages) ## Prerequisites @@ -91,6 +91,53 @@ Now just use your WhatsApp app to send a text message to the WhatsApp Business n ![configuration](./docs/whatsapp-configuration.png) ![api setup](./docs/whatsap-api-setup.png) +## Interactive Message Configuration + +### Flow + +To create a Flow, you must setup many things like in the [docs](https://developers.facebook.com/docs/whatsapp/flows). I will mention over-simplified version for easy starting point: + +1. Create a Flow +2. Setup server endpoint +3. Setup Dify to trigger sending HTTP Request with this [JSON format](https://developers.facebook.com/docs/whatsapp/flows/gettingstarted/sendingaflow). Here is the example request body: + +```json +{ + "recipient_type": "individual", + "messaging_product": "whatsapp", + "to": "{{#sys.user_id#}}", + "type": "interactive", + "interactive": { + "type": "flow", + "header": { + "type": "text", + "text": "Event Registration" + }, + "body": { + "text": "Click button below to authenticate yourself" + }, + "action": { + "name": "flow", + "parameters": { + "mode": "draft", // delete this field for production use (when your flow is published) + "flow_message_version": "3", + "flow_token": "auth_flow-{{#sys.user_id#}}.", + "flow_id": "1234567812345678", + "flow_cta": "Start", + "flow_action": "data_exchange" + } + } + } +} +``` + +4. It will send CTA button to trigger the Flow + ![flow cta](./docs/flow-cta.jpeg) +5. Fill in, complete, and submit the form + ![flow form](./docs/flow-form.jpeg) +6. Sent status will be displayed + ![flow sent](./docs/flow-sent.jpeg) + ## Deployment You can deploy this app to any server that runs Node.js. The easiest one is to use Vercel. Just clone this repo and connect it from Vercel Dashboard then you are good to go. diff --git a/api/webhook.ts b/api/webhook.ts index 5bacd65..b387a87 100644 --- a/api/webhook.ts +++ b/api/webhook.ts @@ -45,6 +45,9 @@ webhookRoutes.post("/", async (req, res) => { return; } + // aknowledge that the message has been read and be processed + await markChatAsRead(message.id); + let chatbotReply = null; let queryText = ""; @@ -54,6 +57,8 @@ webhookRoutes.post("/", async (req, res) => { queryText = message.interactive.button_reply.id; } else if (message.interactive.type === "list_reply") { queryText = message.interactive.list_reply.id; + } else if (message.interactive.type === "nfm_reply") { + queryText = ""; } break; default: @@ -61,6 +66,11 @@ webhookRoutes.post("/", async (req, res) => { break; } + if (!queryText) { + res.sendStatus(200); + return; + } + if (CONNECTION_PLATFORM === DIFY) { chatbotReply = await queryToDify({ req, query: queryText }); } else if (CONNECTION_PLATFORM === RASA) { @@ -68,13 +78,12 @@ webhookRoutes.post("/", async (req, res) => { } console.log("Chatbot Reply:\n", chatbotReply); - if (!chatbotReply) { + if (!chatbotReply || !chatbotReply.text) { res.sendStatus(200); return; } await sendChatbotReply({ to: message.from, chatbotReply }); - await markChatAsRead(message.id); res.sendStatus(200); }); diff --git a/docs/flow-cta.jpeg b/docs/flow-cta.jpeg new file mode 100644 index 0000000..5acbe40 Binary files /dev/null and b/docs/flow-cta.jpeg differ diff --git a/docs/flow-form.jpeg b/docs/flow-form.jpeg new file mode 100644 index 0000000..8711a0e Binary files /dev/null and b/docs/flow-form.jpeg differ diff --git a/docs/flow-sent.jpeg b/docs/flow-sent.jpeg new file mode 100644 index 0000000..434839f Binary files /dev/null and b/docs/flow-sent.jpeg differ