diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-1-dark.png b/integrations/integration-guides/assets/messenger-reply-in-dm-1-dark.png new file mode 100644 index 00000000..b968aee0 Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-1-dark.png differ diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-1.png b/integrations/integration-guides/assets/messenger-reply-in-dm-1.png new file mode 100644 index 00000000..62ccb516 Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-1.png differ diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-2-dark.png b/integrations/integration-guides/assets/messenger-reply-in-dm-2-dark.png new file mode 100644 index 00000000..21473b3a Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-2-dark.png differ diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-2.png b/integrations/integration-guides/assets/messenger-reply-in-dm-2.png new file mode 100644 index 00000000..1ce78642 Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-2.png differ diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-3-dark.png b/integrations/integration-guides/assets/messenger-reply-in-dm-3-dark.png new file mode 100644 index 00000000..2caa8f1d Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-3-dark.png differ diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-3.png b/integrations/integration-guides/assets/messenger-reply-in-dm-3.png new file mode 100644 index 00000000..b5007018 Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-3.png differ diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-4-dark.png b/integrations/integration-guides/assets/messenger-reply-in-dm-4-dark.png new file mode 100644 index 00000000..ab1685a2 Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-4-dark.png differ diff --git a/integrations/integration-guides/assets/messenger-reply-in-dm-4.png b/integrations/integration-guides/assets/messenger-reply-in-dm-4.png new file mode 100644 index 00000000..f7a99981 Binary files /dev/null and b/integrations/integration-guides/assets/messenger-reply-in-dm-4.png differ diff --git a/integrations/integration-guides/messenger.mdx b/integrations/integration-guides/messenger.mdx index f4d4160e..d9413eb6 100644 --- a/integrations/integration-guides/messenger.mdx +++ b/integrations/integration-guides/messenger.mdx @@ -4,6 +4,8 @@ description: Add your bot to Messenger and Facebook using the official integrati icon: '/integrations/integration-guides/assets/icons/messenger-and-facebook.svg' --- +import { AiIcon } from '/snippets/ai-icon.jsx' + {/* vale off */} import integrationVersions from '/snippets/integrations/versions.mdx' @@ -222,6 +224,161 @@ Expiry time (in hours) for downloaded media files. An expiry time of 0 means the --- +## Replying to comments in DM + +You can configure your bot to reply to user comments in a direct message (DM). + +### Step 1: Check where the conversation started + +First, add a router Node that checks whether the conversation originated from a user's comment. + + + + In Botpress Studio, enter your [Main Workflow](/studio/concepts/workflows#main). + + + [Add a new Node](/studio/concepts/nodes/introduction#add-a-node) to the Workflow. + + + Rename the Node to `Router`, then move it between the [Start Node](/studio/concepts/nodes/introduction) and any other existing Nodes: + + + Reply to comments in DMs 1 + Reply to comments in DMs 1 + + + + Add two [Expression Cards](/studio/concepts/cards/flow-logic#expression) to the `Router` Node. + + + Open the second Expression Card's [inspector](/studio/concepts/cards/introduction#configure-a-card). Next to the **Condition** field, toggle to disable generative AI. + + + Configure this Card for conversations started normally: + + - In the **Label** field, paste in: `Conversation started` + - In the **Condition** field, paste in: `{{event.channel == 'channel'}}` + + + Open the first Expression Card's [inspector](/studio/concepts/cards/introduction#configure-a-card). Next to the **Condition** field, toggle to disable generative AI. + + + Configure this Card for conversations started from a comment reply: + + - In the **Label** field, paste in: `Conversation started from comment` + - In the **Condition** field, paste in: `{{event.channel == 'commentReplies'}}` + + + Attach the Start Node to the `Router` Node. Then, attach the `Conversation started` Expression Card to your regular conversation logic: + + + Reply to comments in DMs 2 + Reply to comments in DMs 2 + + + + +### Step 2: Reply to the user's comment + +Next, add logic to reply to the user's comment. This lets them know that the bot will continue the conversation in a DM. + + + + Add a new Node to your Workflow and rename it to `Reply_to_comment`. + + + Add a [Text Card](/studio/concepts/cards/send-messages#text) to the new Node. + + + Open the Text Card's inspector. + + In the **Message to send** field, enter the message you want to reply to the user's comment. For example: `Check your DMs!`. + + + Attach the `Conversation started from comment` Expression Card to the `Reply_to_comment` Node: + + + Reply to comments in DMs 3 + Reply to comments in DMs 3 + + + + + +### Step 3: Start a DM conversation from the comment + +Finally, add logic to start a DM conversation whenever a user leaves a comment. + + + + Add a new Node to your Workflow and rename it to `DM_reply`. + + + Add the [Start DM Conversation from Comment](#start-dm-conversation-from-comment) Card to the new Node. + + + Open the Start DM Conversation from Comment Card's inspector. + + - In the **Comment ID** field, paste in: `{{event.payload.commentId}}` + - In the **Message** field, enter the first message you want to send the user in a DM. For example: `Hey! Received your comment.` + + + If you want to send the user's original comment back to them, you can add `{{event.payload.text}}` to the **Message** field. + + + + Attach the `Reply_to_comment` Node to the `DM_reply` Node. Then, attach the `DM_reply` Node to the [End Node](/studio/concepts/nodes/introduction#end): + + + Reply to comments in DMs 4 + Reply to comments in DMs 4 + + + + + + When a user comments on a post, your bot will now: + + - Reply to their comment, letting them know to check their DMs + - Continue the conversation in a DM + + You can further modify your Workflow depending on your desired behaviour. + + +--- + ## Cards diff --git a/snippets/ai-icon.jsx b/snippets/ai-icon.jsx new file mode 100644 index 00000000..9d3204a3 --- /dev/null +++ b/snippets/ai-icon.jsx @@ -0,0 +1,22 @@ +export const AiIcon = () => { + return ( + + + + + + ) +} diff --git a/studio/concepts/cards/flow-logic.mdx b/studio/concepts/cards/flow-logic.mdx index 69683efa..ac7aff9b 100644 --- a/studio/concepts/cards/flow-logic.mdx +++ b/studio/concepts/cards/flow-logic.mdx @@ -2,6 +2,8 @@ title: Flow Logic --- +import { AiIcon } from '/snippets/ai-icon.jsx' + {/* vale Botpress.workflows = NO */} Flow Logic Cards **direct the flow of your bot's conversation** based certain conditions. You can use them to guide the conversation based on user input, bot state, or external factors. @@ -37,7 +39,7 @@ Here are some examples of conditions you could enter in the **Label** field: You can also describe the condition manually using a JavaScript expression: -1. To the right of the **Condition** field, toggle to disable generative AI for the field. +1. To the right of the **Condition** field, toggle to disable generative AI for the field. 2. Enter a valid JavaScript expression in the **Condition** field.