diff --git a/integrations/integration-guides/whatsapp/introduction.mdx b/integrations/integration-guides/whatsapp/introduction.mdx index fdbc09e5..91551d8d 100644 --- a/integrations/integration-guides/whatsapp/introduction.mdx +++ b/integrations/integration-guides/whatsapp/introduction.mdx @@ -22,55 +22,68 @@ The official WhatsApp integration allows your users to chat with your bot by mes + + You will need: - -You will need: + - A [published bot](https://botpress.com/docs/botpress-quickstart) + - A [Facebook account](https://www.facebook.com/signup) + + + + Visual learner? + + Check out our [WhatsApp guide](https://www.youtube.com/watch?v=qdFSwBwWG1Q) on YouTube for a step-by-step video guide. + + + + + In Botpress Studio, select **Explore Hub** in the upper-right corner. + + + Search for the **WhatsApp** integration, then select **Install Integration**. + + + In the **Configuration** menu, select **Authorize WhatsApp**. + + + Follow the instructions to connect Botpress to your WhatsApp account. + + -- A [published bot](https://botpress.com/docs/botpress-quickstart) -- A [Facebook account](https://www.facebook.com/signup) - + + Additional requirements: - -Visual learner? + - While setting up your WhatsApp integration, we will ask you to create or select: -Check out our [WhatsApp guide](https://www.youtube.com/watch?v=qdFSwBwWG1Q) on YouTube for a step-by-step video guide. - + - A [Facebook business page](https://www.facebook.com/business/help/1968057156746246?id=939256796236247) + - A [WhatsApp business account](https://business.whatsapp.com) -1. In Botpress Studio, select **Explore Hub** in the upper-right corner. -2. Search for the **WhatsApp** integration, then select **Install Integration**. -3. In the **Configuration** menu, select **Authorize WhatsApp**. -4. Follow the instructions to connect Botpress to your WhatsApp account. + - After setup is complete, your business will undergo a [verification process by Meta](https://www.facebook.com/business/help/1095661473946872?id=180505742745347), the parent company of WhatsApp. This verification confirms the identity and eligibility of your business to use Meta's platforms. + + - -Additional requirements: + -- While setting up your WhatsApp integration, we will ask you to create or select: + For advanced use cases, you can use your own Meta app with our integration. - - A [Facebook business page](https://www.facebook.com/business/help/1968057156746246?id=939256796236247) - - A [WhatsApp business account](https://business.whatsapp.com) + + You will need: -- After setup is complete, your business will undergo a [verification process by Meta](https://www.facebook.com/business/help/1095661473946872?id=180505742745347), the parent company of WhatsApp. This verification confirms the identity and eligibility of your business to use Meta's platforms. - - + - A [Meta developer app](https://developers.facebook.com/apps/creation/) with the . Check out the [Meta developer documentation](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#set-up-developer-assets) to learn more about the setup process. + - -For advanced use cases, you can use your own Meta app with our integration. + ### Step 1: Install the integration in Botpress - -You will need: + + In Botpress Studio, select **Explore Hub** in the upper-right corner. + Search for the **WhatsApp** integration, then select **Install Integration**. + In the **Configuration** menu, open the drop-down menu and select **Manual Configuration**. + -- A [Meta developer app](https://developers.facebook.com/apps/creation/). Check out the [Meta developer documentation](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#set-up-developer-assets) to learn more about the setup process. - + ### Step 2: Configure the integration - - - 1. In Botpress Studio, select **Explore Hub** in the upper-right corner. - 2. Search for the **WhatsApp** integration, then select **Install Integration**. - 3. In the **Configuration** menu, open the drop-down menu and select **Manual Configuration**. - - - To configure the integration, you need to create a webhook endpoint for the WhatsApp integration. To do this, fill in the integration's configuration fields: + Next, fill in the integration's configuration fields using information from your Meta app: - 1. In your Meta App's left sidebar, expand the **WhatsApp** menu and select **API Setup**. - 2. In the **Access Token** section, select **Generate access token**. - 3. Follow the instructions in the popup, then copy your access token. + + + In your Meta app's left sidebar, go to **Use cases > Connect with customers through WhatsApp > Customize**. + + + If you haven't added WhatsApp as a use case yet, select **Add use cases**, then **Connect with customers through WhatsApp**. + + + + Select a WhatsApp business portfolio (if you haven't already). + + + Go to **API testing**. + + + Select **Generate access token**, then copy the token. + + + In Botpress, paste the token into the integration's **Access Token** configuration field. + + - 1. In your Meta App's left sidebar, expand the **App Settings** menu and select **Basic**. - 2. In the **App Secret** field, select **Show**, then copy your secret. + + In your Meta App's left sidebar, expand the **App Settings** menu and select **Basic**. + In the **App Secret** field, select **Show**, then copy your secret. + In Botpress, paste the secret into the integration's **Client Secret** configuration field. + - 1. In your Meta App's left sidebar, expand the **WhatsApp** menu and select **API Setup**. - 2. In the **Send and receive messages** section, copy your **Phone Number ID**. + + + In your Meta app's left sidebar, go to **Use cases > Connect with customers through WhatsApp > Customize**. + + + If you haven't added WhatsApp as a use case yet, select **Add use cases**, then **Connect with customers through WhatsApp**. + + + + Select a WhatsApp business portfolio (if you haven't already). + + + Go to **API testing**. + + + Under **Select a 'From' phone number**, copy the **Phone number ID**. + + + In Botpress, paste the ID into the integration's **Default Bot Phone Number ID** configuration field. + + - 1. In your Meta App's left sidebar, expand the **WhatsApp** menu and select **API Setup**. - 2. In the **Send and receive messages** section, copy your **WhatsApp Business Account ID**. + + + In your Meta app's left sidebar, go to **Use cases > Connect with customers through WhatsApp > Customize**. + + If you haven't added WhatsApp as a use case yet, select **Add use cases**, then **Connect with customers through WhatsApp**. + + + + Select a WhatsApp business portfolio (if you haven't already). + + + Go to **API testing**. + + + Under **Select a 'From' phone number**, copy the **WhatsApp Business Account ID**. + + + In Botpress, paste the ID into the integration's **WhatsApp Business Account ID** configuration field. + + When you've filled in all the fields, select **Save Configuration**. This will automatically enable your integration. - - - Now that you've enabled your integration, you can add your webhook to your Meta app's configuration: - 1. Copy the webhook URL and **Verify Token** from the **Configuration** section. - 2. In your Meta App's left sidebar, expand the **WhatsApp** menu and select **Configuration**. - 3. Paste the webhook URL into the **Callback URL** field. - 4. Paste your **Verify Token** in the **Verify Token** field. + ### Step 3: Add your webhook - - For more information, check out WhatsApp's guide on [getting started with Cloud API](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#send-test-message). - - - - - - You've manually configured your WhatsApp integration! - - - - If you want to test your bot's behaviour in WhatsApp before going through the actual setup process, you can use the WhatsApp integration playground. - - - You will need: + Now that you've enabled your integration, you can add your webhook to your Meta app's configuration: - - A [published bot](https://botpress.com/docs/botpress-quickstart) - - A [WhatsApp account](https://web.whatsapp.com) - - - 1. In Botpress Studio, select **Explore Hub** in the upper-right corner. - 2. Search for the **WhatsApp** integration, then select **Install Integration**. - 3. Select **Test your agent on WhatsApp**. - 4. Follow the instructions to set up the playground. - + + In Botpress, copy the webhook URL and **Verify Token** from the integration's **Configuration** section. + + In your Meta app's left sidebar, go to **Use cases > Connect with customers through WhatsApp > Customize**. + + If you haven't added WhatsApp as a use case yet, select **Add use cases**, then **Connect with customers through WhatsApp**. + + + + Select a WhatsApp business portfolio (if you haven't already). + + Go to **Configuration**. + Paste the webhook URL into the **Callback URL** field. + Paste your **Verify Token** in the **Verify Token** field. + + Select **Verify and save**. Then, subscribe to the following webhook fields: + + - `message_template_components_update` + - `message_template_quality_update` + - `message_template_status_update` + - `messages` + - `template_category_update` + + + + + You've manually configured your WhatsApp integration! + + For more information, check out WhatsApp's guide on [getting started with Cloud API](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#send-test-message). + + + + If you want to test your bot's behaviour in WhatsApp before going through the actual setup process, you can use the WhatsApp integration playground. + + + You will need: + + - A [published bot](https://botpress.com/docs/botpress-quickstart) + - A [WhatsApp account](https://web.whatsapp.com) + + + + In Botpress Studio, select **Explore Hub** in the upper-right corner. + Search for the **WhatsApp** integration, then select **Install Integration**. + Select **Test your agent on WhatsApp**. + Follow the instructions to set up the playground. + + ---