WhatsApp Customer Care Notification for Shopify

By this time, you should have completed level 2.3 and customized part of the WhatsApp chatbot flow for Shopify. It's time to set up the customer care notification messages (WhatsApp Template Message). WhatsApp is particularly useful if you want to notify any customers because the user's open rate to WhatsApp messages can be up to 90%.

In this section, you will learn how to set up order confirmation & order update messages.

---

Default WhatsApp Template Submission

After you have completed the WhatsApp Shopify integration in level 2.3. "Order Confirmation" and "Order Update" WhatsApp templates will be created automatically.

Default order confirmation template on WhatsApp (Button URL is store URL)

Default order update template on WhatsApp

---

Custom WhatsApp Template Creation

Order Confirmation

What is Your Result?

User receives order confirmation on WhatsApp

---

Getting Hands-on

• Creating the Response Object - Order Confirmation
• Editing the Config Map - Order Confirmation

Submitting a WhatsApp Template Message - Order Confirmation

You will first need to get the content of your WhatsApp Template Message approved by WhatsApp. For supported types of message contents, please refer to the policy here.

1. Click "Message Template" in your WhatsApp channel.

The Message Template section

2. You will see the overview of message templates under your WABA. Select the correct WABA integration.

3. Click "Create" to create a new message template. A new window will pop up.

Fill in WhatsApp Message Contents

4. Fill in the necessary details of this message template. You may check out the example template or the WhatsApp documentation. For any media or text with parameters like {{1}}, you are required to add sample as part of the review process.

Here are the variables for order confirmation WhatsApp Template Message Submission:

Variable	Content	Variable Number in WhatsApp Submission
{{firstName}}	firstName from WhatsApp Profile	{{1}}
{{orderId}}	Order ID (#xxxx) from Shopify store	{{2}}
{{order_status_url}}	Order status url from Shopify store (Store url removed for embedding into button)	{{1}}

The variable number in the above table is for reference only. Obviously, you can re-arrange the position/order of the variable number according to your actual messages.

Add Sample for Body Text

Add Sample for Button URL

5. Click "Submit" to submit your message template. Once submitted, a new row will be created.

Submitted template

---

Creating the Response Object - Order Confirmation

Once the template message is approved (Green), you will need to copy the actual code of the message to your config map.

7. To generate this code, please head to the "Response" Builder. You can either access it in a random tree node or head to "Responses" under "Resources" on the top panel.

8. Create a new response and fill in the following information:

Create response object for order confirmation

• Select the "Message Template" which you have successfully submitted.
• Under "Body", fill in "Variable #1" as {{firstName}} and "Variable #2" as {{orderId}}.
• Under "Button, fill in "Variable #1" as {{order_status_url}}.

The variables in the response builder will order themselves in the same way you mark the variable numbers during the WhatsApp Template Message submission. Please adjust or re-arrange the content as you see fit.

9. Switch to "Advanced" tab and look for the code block under "Response Object".

Response Object of Order Confirmation

Below is the full sample response object for order confirmation:

{
  "type": "TEMPLATE",
  "accountId": "1234566778899",
  "namespace": "bc2ac4dd_123123123_123123_123",
  "elementName": "order_confirmation_shopify",
  "languageCode": "en",
  "languagePolicy": "deterministic",
  "components": [
    {
      "type": "body",
      "parameters": [
        {
          "type": "text",
          "text": "{{firstName}}"
        },
        {
          "type": "text",
          "text": "{{orderId}}"
        }
      ]
    },
    {
      "type": "button",
      "sub_type": "url",
      "index": "0",
      "parameters": [
        {
          "type": "text",
          "text": "{{order_status_url}}"
        }
      ]
    }
  ]
}

10. Copy the content in the following fields from the response object:

• accountId
• namespace
• elementName
• languageCode
• components array (Applicable when the message has button). Copy starting from the [ sign after "components": to the second last line of ].
• params array (Applicable when the message does not have button) Copy starting from the [ sign after "params": to the second last line of ].

Below is a sample code of components array :

Click to view

[
    {
      "type": "body",
      "parameters": [
        {
          "type": "text",
          "text": "{{firstName}}"
        },
        {
          "type": "text",
          "text": "{{orderId}}"
        }
      ]
    },
    {
      "type": "button",
      "sub_type": "url",
      "index": "0",
      "parameters": [
        {
          "type": "text",
          "text": "{{order_status_url}}"
        }
      ]
    }
  ]

---

Editing the Config Map - Order Confirmation

11. Paste the copied content into the Config Map of the Proxy Tree you have created in level 2.3 accordingly (Remember to put components array into OrderCreateComponents or put params array into OrderCreateParameters.).

Field	Content	Required if in use?
accountId	WhatsApp template accountId	Y
namespace	WhatsApp template namespace	Y
OrderCreateElementName	WhatsApp template element name for order creation; Put elementName into OrderCreateElementName	Y
OrderCreateLanguageCode	WhatsApp template element language code for order creation; Put languageCode into OrderCreateLanguageCode	Y
OrderCreateComponents	WhatsApp template element components for order creation; {{firstName}}is user firstname {{orderId}} is order id from shopify store {{order_status_url}}is order status url from shopify store	Y
OrderCreateParameters	WhatsApp template element params for order creation; {{firstName}} is user firstname {{orderId}} is order id from shopify store {{order_status_url}} is order status url from shopify store Either OrderCreateComponents or OrderCreateParameters is required	N

Below is the sample config map for the order confirmation section:

  "accountId": "{{>accountId}}",
  "namespace": "{{>namespace}}",
  "OrderCreateElementName": "{{>OrderCreateElementName}}",
  "OrderCreateLanguageCode": "{{>OrderCreateLanguageCode}}",
  "OrderCreateComponents": [
    {
      "type": "body",
      "parameters": [
        {
          "type": "text",
          "text": "{{firstName}}"
        },
        {
          "type": "text",
          "text": "{{orderId}}"
        }
      ]
    },
    {
      "type": "button",
      "sub_type": "url",
      "index": "0",
      "parameters": [
        {
          "type": "text",
          "text": "{{order_status_url}}"
        }
      ]
    }
  ],

12. Save the config map.

13. Purchase a product and see if you can produce the expected outcome.

---

Order Update

What is Your Result?

User receives order update on WhatsApp

---

Getting Hands-on

• Creating the Response Object - Order Update
• Editing the Config Map - Order Update

Submitting a WhatsApp Template Message - Order Update

1. Repeat step 1 - 5 in order confirmation and submit the order update WhatsApp Template Message with the following variables:

Fill in WhatsApp Message Contents

Add Sample for Body Text

Add Sample for Button

Variable	Content	Variable Number in WhatsApp Submission
{{firstName}}	firstName from Whatsapp Profile	{{1}}
{{orderId}}	Order ID (#xxxx) from shopify store	{{2}}
{{tracking_company}}	Shipping company from shopify store	{{3}}
{{tracking_number}}	Tracking Number from shopify store	{{4}}
{{tracking_url}}	Tracking url from shopify store	{{1}}

The variable number in the above table is for reference only. Obviously, you can re-arrange the position/order of the variable number according to your actual messages.

---

Creating the Response Object - Order Update

Once the template message is approved (Green), you will need to copy the actual code of the message to your config map.

2. To generate this code, please head to the "Response" Builder. You can either access it in a random tree node or head to "Responses" under "Resources" on the top panel.

3. Create a new response and fill in the following information:

Create response object for order Update

• Select the "Message Template" which you have successfully submitted for order update.
• Under "Body", fill in "Variables" according to the variable number table above.

The variables in the response builder will order themselves in the same way you mark the variable numbers during the WhatsApp Template Message submission. Please adjust or re-arrange the content as you see fit.

4. Switch to "Advanced" tab and look for the code block under "Response Object".

Response Object of Order Update

Below is the full sample response object for order confirmation:

{
  "type": "TEMPLATE",
  "accountId": "2164086713815148",
  "namespace": "bc2ac4dd_4df4_1304_d8f6_3120038843bf",
  "elementName": "shopify_order_update_v2",
  "languageCode": "en",
  "languagePolicy": "deterministic",
  "components": [
    {
      "type": "body",
      "parameters": [
        {
          "type": "text",
          "text": "{{firstName}}"
        },
        {
          "type": "text",
          "text": "{{orderId}}"
        },
        {
          "type": "text",
          "text": "{{trackingCompany}}"
        },
        {
          "type": "text",
          "text": "{{trackingNumber}}"
        }
      ]
    },
    {
      "type": "button",
      "sub_type": "url",
      "index": "0",
      "parameters": [
        {
          "type": "text",
          "text": "{{trackingUrl}}"
        }
      ]
    }
  ]
}

5. Copy the content in the following fields from the response object:

• accountId
• namespace
• elementName
• languageCode
• components array (Applicable when the message has button). Copy starting from the [ sign after "components": to the second last line of ].
• params array (Applicable when the message does not have button) Copy starting from the [ sign after "params": to the second last line of ].

Below is a sample code of components array :

Click to view

[
    {
      "type": "body",
      "parameters": [
        {
          "type": "text",
          "text": "{{firstName}}"
        },
        {
          "type": "text",
          "text": "{{orderId}}"
        },
        {
          "type": "text",
          "text": "{{trackingCompany}}"
        },
        {
          "type": "text",
          "text": "{{trackingNumber}}"
        }
      ]
    },
    {
      "type": "button",
      "sub_type": "url",
      "index": "0",
      "parameters": [
        {
          "type": "text",
          "text": "{{trackingUrl}}"
        }
      ]
    }
  ]

---

Editing the Config Map - Order Update

6. Paste the copied content into the Config Map of the Proxy Tree you have created in level 2.3 accordingly (Remember to put components array into OrderCreateComponents or put params array into OrderCreateParameters.).

Field	Content	Required if in use?
accountId	WhatsApp template accountId	Y
namespace	WhatsApp template namespace	Y
optoutOrderUpdate	Opt-out order update & order creation keyword; This requires exact keyword match	N
optinOrderUpdate	Opt-in order update & order creation keyword; This require exact keyword match; Notification will be sent after order creation & update by default	N
OrderUpdateElementName	WhatsApp template element name for order update	Y
OrderUpdateLanguageCode	WhatsApp template element language code for order update	Y
OrderUpdateComponents	WhatsApp template element components for order update; {{firstName}} is user firstname {{trackingNumber}} is tracking number from shopify store {{trackingUrl}} is tracking url from shopify store; Either OrderCreateComponents or OrderCreateParameters is required	Y
OrderUpdateParameters	WhatsApp template element parameters for order update; {{firstName}} is user firstname {{trackingNumber}} is tracking number from shopify store {{trackingUrl}} is tracking url from shopify store	Y

Below is the sample config map for the order confirmation section:

  "accountId": "{{>accountId}}",
  "namespace": "{{>namespace}}",
  "optoutOrderUpdate": "unsubscribe",
  "optinOrderUpdate": "subscribe",
  "OrderUpdateElementName": "{{>OrderUpdateElementName}}",
  "OrderUpdateLanguageCode": "{{>OrderUpdateLanguageCode}}",
  "OrderUpdateComponents":
  [
    {
      "type": "body",
      "parameters": [
        {
          "type": "text",
          "text": "{{firstName}}"
        },
        {
          "type": "text",
          "text": "{{orderId}}"
        },
        {
          "type": "text",
          "text": "{{trackingCompany}}"
        },
        {
          "type": "text",
          "text": "{{trackingNumber}}"
        }
      ]
    },
    {
      "type": "button",
      "sub_type": "url",
      "index": "0",
      "parameters": [
        {
          "type": "text",
          "text": "{{trackingUrl}}"
        }
      ]
    }
  ],

7. Save the config map.

8. Purchase a product and see if you can produce the expected outcome.