# How to set up WooCommerce order notifications with Flow Builder

In this guide, we’ll show you how to send WooCommerce order notifications to customers using Flow Builder.

###  Requirements

* A [MessageBird account](https://dashboard.messagebird.com/en/sign-up)
* WhatsApp for Business account or any other channel from MessageBird's offering
  * Using WhatsApp? You'll need an [approved message template](https://support.messagebird.com/hc/en-us/articles/360001853778)
* A workflow to handle the messages in [Flow Builder](https://dashboard.messagebird.com/en/flow-builder)
* A [WooCommerce powered website](https://woocommerce.com/)

 

### How will we send order notifications?

At the end of this process, we will have configured a webhook inside your WooCommerce website. That webhook will notify a flow in Flow Builder every time an order changes status.\
Flow Builder listens to the order status changes, and when the proper transition is detected (e.g. an order moves to “processing”), it will automatically reach out to the customer on your preferred channel, and notify them of the pending delivery.

 

### Download the Flow

You can download our [pre-made flow here](https://app.box.com/s/fon9s834dwf5tw7lssimt1lx7ou51twx). This JSON file can be imported via the flows dashboard. To do so, simply head to Flow Builder and click Import.

If you'd prefer to build your flow from scratch, follow the instructions in step one. If you're using our pre-made flow, jump ahead to Step two.

 

### Step one: Create a flow in Flow Builder

1. Log in to your [MessageBird Dashboard](https://dashboard.messagebird.com/) and go to [Flow Builder](https://dashboard.messagebird.com/en/flow-builder)
2. Click **Create new flow**, then **Create custom flow**, then select **Webhook** from the list of triggers\ <br>

   <figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-d981c601a542167f4751c23d97375fe263f8106b%2FFlow_Builder_Webhook_Trigger.png?alt=media" alt=""><figcaption></figcaption></figure>

   \ <br>
3. At this stage, we only need the flow's callback address, so drag and drop an End of flow step into your flow\ <br>

   <figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-8fddf60b1635a96eccae5724ea481819174e024a%2FWebhook_End_of_Flow.png?alt=media" alt=""><figcaption></figcaption></figure>

   \ <br>
4. Click **Publish**, then copy the **webhook URL** that appears, as we'll need it for the next step\ <br>

   <figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-9e25c1ce5e5bccc16d0440ae42fa5e6698a85dba%2FWebhook_URL.png?alt=media" alt=""><figcaption></figcaption></figure>

&#x20;

### Step two: Create a WooCommerce webhook for order status updates

1. Log in to your WooCommerce website
2. Navigate to WooCommerce and click on **Settings**
3. Select the **Advanced** tab, click on **Webhooks**, then click **Add webhook**\
   \
   \ <br>
4. Several fields will appear that you can configure as follows:\ <br>

   | **Name**         | Enter a descriptive name to show that this is the webhook that will trigger customer notifications                                                                      |
   | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | **Status**       | Choose **Active** from the drop-down list to ensure that the notifications are triggered. You can pause or disable the trigger in the future if you no longer need them |
   | **Topic**        | Choose **Order updated** from the drop-down menu to send notifications when an order is moved to a “processing” state                                                   |
   | **Delivery URL** | Paste the Flow Builder webhook URL that you created and copied in the previous step into the field                                                                      |
   | **Secret**       | Leave this field empty, as this is not required                                                                                                                         |
   | **API version**  | Select **WP Rest API Integration v3** from the drop-down menu                                                                                                           |

   \ <br>
5. Click **Save webhook** to save your configuration. A 204 error will appear, but you can ignore this message as your webhook will still have been saved and configured correctly\ <br>

   <figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-1ff37abef1977a7a4d7856652e9916396d956a14%2Fwoocommerce_204_error_message.png?alt=media" alt=""><figcaption></figcaption></figure>

&#x20;

### Step three: Configure the Flow Builder feedback to send notifications

Now, if you change the status update for an order, you can see in the flow’s logs the payload that is sent to Flow Builder.\ <br>

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-44425adafc1752e2df72a653ee53c2732de19ea2%2FWooCommerce_Order_Payload.png?alt=media" alt=""><figcaption></figcaption></figure>

\ <br>

We can use all this information to customize our flow and make it react whenever needed.

&#x20;

#### Create a branch

To make sure that we only send notifications when the order status is **processing**, we can add a check inside the flow. To do this, follow these steps:

1. Add a Branch step to the flow
2. Check that the \[\[status]] parameter is equal to **processing** (NOTE: by including something within {{ }} we are specifying that this is a parameter received at runtime, a variable)\ <br>

   <figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-49268b86bf8797ea79e7631d808a2b9b6c009690%2Fwebhook_branching.png?alt=media" alt=""><figcaption></figcaption></figure>

   \ <br>
3. **Save** the step

&#x20;

#### Send a WhatsApp message

If the parameter received by Flow Builder is equal to **processing**, it will be passed. Now, we can set up the flow to send a WhatsApp message to the user, informing them that their order is now processing.

To do this, we'll need to use an existing [WhatsApp message template](https://docs.bird.com/connectivity-platform/getting-started/working-with-whatsapp-message-templates). We'll use the **billing.phone** parameter from the billing details and the order number to refer back to the order. Depending on the message that you would like to send to your customer, you could make use of other variables such as **shipping.state**, **id** (the order ID), or total. Inspect the Logs for a full list of available variables.

To set this up, follow these steps:

1. In the **equals** branch of your flow, add a Send WhatsApp HSM step\ <br>

   <figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-62dbf5af89d9a1843c99b293f622c20fa949993b%2FSend_WhatsApp_HSM.png?alt=media" alt=""><figcaption></figcaption></figure>

   \ <br>
2. In the step settings, select the WhatsApp channel from the dropdown menu
3. In the **Recipient** field, use the **billing.phone** parameter
4. In the WhatsApp HSM template field, select the approved Template Message that you want to use
5. Use the **number** variable to include the order number in the message text
6. **Save** the step
7. **Publish** your flow, and you're done! Keep an eye on your Logs to make sure that everything is working as expected, and that notifications are being sent out

&#x20;

**Note:** the WooCommerce payload may vary depending on your exact system configuration so using the logs to actually see what is happening at runtime would be your best course of action.