diff --git a/pages/trigger-nodes/whatsapp-bot.mdx b/pages/trigger-nodes/whatsapp-bot.mdx
index 921cd70..b78f4ab 100644
--- a/pages/trigger-nodes/whatsapp-bot.mdx
+++ b/pages/trigger-nodes/whatsapp-bot.mdx
@@ -1,6 +1,8 @@
---
title: WhatsApp Bot
-description: The WhatsApp Bot is a powerful trigger that allows you to connect and create a WhatsApp Bot using using WhatsApp Business Account by Meta.
+description:
+ The WhatsApp Bot is a powerful trigger that allows you to connect and create a WhatsApp Bot using using WhatsApp
+ Business Account by Meta.
---
# WhatsApp Bot
@@ -21,22 +23,50 @@ import step9 from '/public/nodes/whatsapp/step9.png';
import step10 from '/public/nodes/whatsapp/step10.png';
import step11 from '/public/nodes/whatsapp/step11.png';
import step12 from '/public/nodes/whatsapp/step12.png';
+import whatsappProduct from '/public/nodes/whatsapp/whatsapp-product.png';
+import createBusinessProfile from '/public/nodes/whatsapp/create-business-profile.png';
+import waDevQuickStart from '/public/nodes/whatsapp/wa-dev-quickstart.png';
+import getAcessToken from '/public/nodes/whatsapp/get-access-token.png';
+
+The WhatsApp Bot trigger enables seamless integration and creation of interactive chatbots on WhatsApp by leveraging
+Meta's WhatsApp Business API. It verifies and parses messaging payloads from the WhatsApp Webhook, empowering developers
+to build context-aware, multimedia-rich conversational experiences efficiently.
-The WhatsApp Bot trigger enables seamless integration and creation of interactive chatbots on WhatsApp by leveraging Meta's WhatsApp Business API. It verifies and parses messaging payloads from the WhatsApp Webhook, empowering developers to build context-aware, multimedia-rich conversational experiences efficiently.
+
+Checkout the full video tutorial đŋ:
+
+
+
+
## Prerequisites
+
Before you can create a chatbot on WhatsApp, you need to have the following:
-1. A verified business on Facebook.
-2. A registered WhatsApp business phone number.
-3. Access to the official WhatsApp Business API.
+1. A Meta developer account. Sign up for a Meta Developer Account [here](https://developers.facebook.com/).
+2. A business app. Learn how to create a business app
+ [here](https://developers.facebook.com/docs/development/create-an-app/).
+3. A verified business on Facebook. Click
+ [here](https://developers.facebook.com/docs/whatsapp/overview/business-accounts/) to learn how to verify your
+ business.
+4. A registered WhatsApp business phone number.
+5. Access to the official WhatsApp Business API.
-## Setting up a Meta Developer Account
+## Setting up a Business App
-- **Sign up for a Meta Developer Account**: Go to https://developers.facebook.com and click the "Login" button. You can use your Facebook account associated with your company or create a new account.
+- **Sign up for a Meta Developer Account**: Go to https://developers.facebook.com and click the "Login" button. You can
+ use your Facebook account associated with your company or create a new account.
-
+ {' '}
+
+
### Create a new app
@@ -45,35 +75,52 @@ Before you can create a chatbot on WhatsApp, you need to have the following:
### Select Other in "What do you want your app to do" section.
- "Select Other" on What do you want your app to do section.
+
+"Select Other" on What do you want your app to do section.
### Select Business
+
"Select Business" - the type of app you want to create and use for your business.
### Create App details
- Give your app a name, enter a contact email, and connect it with your business account.
+
+Give your app a name, enter a contact email, and connect it with your business account.
-
-
-- **Add WhatsApp to your app**: In your app, add WhatsApp. Meta will provide you with a test phone number and a temporary token that needs to be refreshed every 24 hours. If you have an existing business account, you can add that instead.
+### Add WhatsApp to your app
+
+In your app, add the WhatsApp product.
-
+
-- **Set up the webhook in BuildShip**: In BuildShip, clone the WhatsApp webhook verification template and ship you workflow.
+First, you'll need to select a business profile if you already have one setup. Then continue.
- Copy the "shipped" URL and add it to the Callback URL on Meta Developer Account in your dahsboard under WhatsApp --> Configuration. Enter the verify token you saved earlier, then click "Verify" and "Save".
+{' '}
-
+
-- **Configure the webhook**: To connect the WhatsApp API to BuildShip, you need to configure a webhook. In your Meta Developer Account, go to "WhatsApp" >> "Configuration" >> "Edit Webhook". Enter the callback URL (see step 5 for setting up BuildShip) and a verify token (any text or number that you'll save for later).
+**Note:** If you don't have a business profile set up, then you'll be met with a different screen. From here, just let
+the platform guide you through the process of setting up a business profile.
-
+
+
+Then after adding the WhatsApp product you'll be redirected to the quickstart page
+
+
+
+
+
+## Webhook Verification
+
+To get notified of incoming messages from WhatsApp, you need to set up a webhook. Here's how you can do it:
+
+
+ ### Clone the WhatsApp Bot - Verification template
Direct remix link for this step: **Set up the webhook in BuildShip**: In BuildShip, clone the WhatsApp webhook
@@ -81,69 +128,151 @@ Before you can create a chatbot on WhatsApp, you need to have the following:
https://buildship.app/remix?template=whatsapp-bot-verification.
-- **Subscribe to messaging on webhooks**: To receive all events from WhatsApp in BuildShip, you need to subscribe to messaging on webhooks. Click "Manage" (Webhook fields) and subscribe to messages.
+This workflow is required to verify the webhook endpoint as your setting it in the Meta dashboard. Next enter the verify
+token, this can be any text or number you want to use, just take note of it as you'll need it later. Then ship đ your
+workflow and copy the endpoint URL.
+
+
+
+### Save the webhook in Meta
+
+To connect the WhatsApp API to BuildShip, you need to configure a webhook. In your Meta Developer Account, go to
+"WhatsApp" >> "Configuration" >> "Edit Webhook". Enter the endpoint URL you copied from step 1 as well as the verify
+token you saved earlier. Then click "Verify" and "Save".
+
+{' '}
+
+
+
+### Subscribe to messaging notifications
+
+To receive all messaging events from WhatsApp in BuildShip, you need to subscribe to messaging on webhooks. Click
+"Manage" (Webhook fields) and subscribe to messages.
-
+{' '}
-- **Update BuildShip's flow**: Update BuildShip's flow to send an API response for all the events received from WhatsApp.
+
- {/* ![Update BuildShip's flow](update-buildship-flow.png) */}
+### Test setup with test message
-- **Test setup with test message**: Go to "WhatsApp" >> "API Setup". Add your number and test if you're receiving a message from WhatsApp. You'll recieve a test of successful connection from WhatsApp
+First, go to "WhatsApp" >> "API Setup".
-
+- For the From number, select the test number that Meta provides.
+- For the To number, select a number from the recipient phone number list or add your own if not listed.
+- Then click send message to test if you're receiving a message from WhatsApp. If it works, you'll receive a Hello World
+ message from WhatsApp.
-## Get App ID and App Secret
+{' '}
+
+
+
+{' '}
+
+
+
+## Using the WhatsApp Bot - Auto Reply template
+
+To start auto replying to incoming messages, you can to clone the WhatsApp Bot - Auto Reply template from BuildShip.
+
+
+ ### Clone the WhatsApp Bot - Auto Reply template
+
+The WhatsApp Bot - Auto Reply template uses the WhatsApp Bot trigger to verify incoming messages webhook payload from
+the WhatsApp Webhook by Meta. It then uses the Claude AI to automatically generate and send responses to the incoming
+messages.
+
+
+ Direct remix link for this step: **Set up the bot in BuildShip**: In BuildShip, clone the WhatsApp Bot - Auto Reply
+ template and ship you workflow. Remix link - https://buildship.app/remix?template=whatsapp-bot.
+
+
+
+
+### Get App ID and App Secret
On the Meta dahsboard, go to your app and click App settings where you'll find your App ID and App Secret.
+
Note: Your app must be verified by Meta before obtaining App ID and App secret.
-## Setting up a Permanent Token
+### Configuring the WhatsApp Bot trigger
-To set up a permanent token, you need a Meta Business Account. Full documentation [link](https://developers.facebook.com/docs/whatsapp/business-management-api/get-started#access-tokens).
+Trigger Inputs:
-1. **Create a system user**: Log in to your Meta Business Account (https://developers.facebook.com) >> "Settings" >> "Business Assets". If you've already set up your Meta Developer Account, you'll see your app and WhatsApp Test Account. Go to "Settings" >> "Business Settings" >> "System users" >> "Add". Enter a system username and system user role.
+- Path: This field specifies the endpoint path for receiving webhook requests from the WhatsApp API. The default value
+ is `/handle-webhook`.
+ {' '}
-2. **Associate the system user with your app**: Go to "Add Assets" >> "App". Select your app and give the system user partial or full access. Click "Save changes".
+
+ This path needs to be the same as the path specified in the [WhatsApp
+ Verification](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#verify-webhook) workflow on the
+ Meta Developer Platform.
+
+- Method: This field indicates the HTTP method to be used for the webhook requests. It is set to `POST`, which is the
+ required method for receiving webhook data from the WhatsApp Cloud API.
-3. **Generate a new token**: Click "Generate new token" >> Select your app from the dropdown menu. Make sure "whatsapp_business_messaging" and "whatsapp_business_management" are turned on. Click "Generate token".
+- App ID: (mentioned in previous step) This field requires entering the App ID provided by the
+ [WhatsApp Business Manager Cloud API](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#app-setup).
+ It is a unique identifier for your application, displayed on top of your Meta App Dashboard.
+- App Secret: (mentioned in previous step) This field requires entering the App Secret provided by the
+ [WhatsApp Business Manager Cloud API](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#app-setup).
+ It is a secret key used for authentication and securing communication with the WhatsApp Cloud API.
-4. **Save the token**: Save the Access Token as it's not saved in Facebook. This is a permanent token that can be used for your Meta Developer app.
+{' '}
+### Configuring the Claude AI Text Generator node
-By following these steps, you'll be able to set up a WhatsApp bot using the Meta Developer Account and the WhatsApp Business API, connected to the BuildShip platform.
+The Claude AI Text Generator node is used to generate automatic responses to incoming messages. You'll need to select
+your Anthropic API key or create a new one.
+### Configuring the Auto-Responder node
-## Trigger Inputs
+The Auto-Responder node is used to send the generated response to the incoming message. The only field you need to enter
+is the Access Token. You can use the temporary access token provided by Meta for testing purposes.
-- Path:
-This field specifies the endpoint path for receiving webhook requests from the WhatsApp API. The default value is `/handle-webhook`. This path needs to be the same as the path specified in the [WhatsApp Verification](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#verify-webhook) workflow on the Meta Developer Platform.
+In the Meta dashboard, you can get this by going to WhatsApp >> API Setup >> Temporary access token.
-- Method:
-This field indicates the HTTP method to be used for the webhook requests. It is set to `POST`, which is the required method for receiving webhook data from the WhatsApp Cloud API.
+
-- App ID: (mentioned in prerequisites)
-This field requires entering the App ID provided by the [WhatsApp Business Manager Cloud API](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#app-setup). It is a unique identifier for your application, displayed on top of your Meta App Dashboard.
+{' '}
-- App Secret: (mentioned in prerequisites)
-This field requires entering the App Secret provided by the [WhatsApp Business Manager Cloud API](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#app-setup). It is a secret key used for authentication and securing communication with the WhatsApp Cloud API.
+
+ Note that this access token is temporary and will expire after 24 hours. See creating a permanent token below for a
+ permanent token.
+
-## Use the WhatsApp Bot - Auto Reply template
-1. Clone the WhatsApp Bot - Verification template from BuildShip App. Add your verification token and ship your workflow. Add the shipped URL and verify the webhook in the Meta Dashboard (follow prerequisites).
+### Testing the bot
-**Remix Link** - https://buildship.app/remix?template=whatsapp-bot-verification.
+First, ship đ your workflow.
-2. Clone the WhatsApp Bot - Auto Reply template, Thi workflow verifies the incoming messages webhook payload from the WhatsApp Webhook by Meta with the power of Claude AI to automatically generate and send responses to the incoming messages.
+If everything is set up correctly, you can now test the bot by sending a message to the test WhatsApp phone number which
+you can obtain in the Meta dashboard from WhatsApp >> API setup.
-**Remix Link** - https://buildship.app/remix?template=whatsapp-bot.
+Then you should receive an automatic response generated by Claude AI â .
-
+If you don't receive a response, check the workflow for any errors, and make sure you followed all the steps correctly.
-
- To Get Started and built your first WhatsApp Bot, Clone the **WhatsApp Bot - Verification** template first and follow the instruction from the prerequisites then clone the **WhatsApp Bot - Auto Reply** templates from BuildShip App add secrets and required fields and ship your workflow.
-
\ No newline at end of file
+
+
+## Setting up a Permanent Token
+
+To set up a permanent token, you need a Meta Business Account. Full documentation
+[link](https://developers.facebook.com/docs/whatsapp/business-management-api/get-started#access-tokens).
+
+1. **Create a system user**: Log in to your Meta Business Account (https://developers.facebook.com) >> "Settings" >>
+ "Business Assets". If you've already set up your Meta Developer Account, you'll see your app and WhatsApp Test
+ Account. Go to "Settings" >> "Business Settings" >> "System users" >> "Add". Enter a system username and system user
+ role.
+
+2. **Associate the system user with your app**: Go to "Add Assets" >> "App". Select your app and give the system user
+ partial or full access. Click "Save changes".
+
+3. **Generate a new token**: Click "Generate new token" >> Select your app from the dropdown menu. Make sure
+ "whatsapp_business_messaging" and "whatsapp_business_management" are turned on. Click "Generate token".
+
+4. **Save the token**: Save the Access Token as it's not saved in Facebook. This is a permanent token that can be used
+ for your Meta Developer app.
diff --git a/public/nodes/whatsapp/create-business-profile.png b/public/nodes/whatsapp/create-business-profile.png
new file mode 100644
index 0000000..b384da5
Binary files /dev/null and b/public/nodes/whatsapp/create-business-profile.png differ
diff --git a/public/nodes/whatsapp/get-access-token.png b/public/nodes/whatsapp/get-access-token.png
new file mode 100644
index 0000000..dfa1d41
Binary files /dev/null and b/public/nodes/whatsapp/get-access-token.png differ
diff --git a/public/nodes/whatsapp/wa-dev-quickstart.png b/public/nodes/whatsapp/wa-dev-quickstart.png
new file mode 100644
index 0000000..19d4d4b
Binary files /dev/null and b/public/nodes/whatsapp/wa-dev-quickstart.png differ
diff --git a/public/nodes/whatsapp/whatsapp-product.png b/public/nodes/whatsapp/whatsapp-product.png
new file mode 100644
index 0000000..e3b2536
Binary files /dev/null and b/public/nodes/whatsapp/whatsapp-product.png differ