Simple Guide For Whatsapp Shopify Integration For Non-Technical Merchants

In today’s digital age, combining the power of Whatsapp with your Shopify store can transform the way you interact with customers. This article offers a simple guide for non-technical merchants to master Whatsapp Shopify integration.

Ways to integrate your Shopify with Whatsapp

There are three primary ways to link your Shopify platform with WhatsApp: 

• Click-to-Chat feature: This feature enables customers to initiate a chat with you or your business on WhatsApp by simply clicking a URL, eliminating the need to save phone numbers. You could incorporate this URL into your website with a prompt like ‘WhatsApp us!’, which can be clicked to start a chat. This feature is suitable for both the WhatsApp smartphone app and WhatsApp Web. To create a Click-to-Chat link, edit the URL: https://wa.me/[WhatsAppNumber], replacing ‘WhatsAppNumber’ with your preferred phone number. However, including this link on every page of your site might make it look cluttered. 
• Using a QR Code: It’s a fast and easy method, allowing customers to initiate chats by scanning a QR code placed on your website or printing marketing materials. To create a QR code, you must first generate a Click-to-Chat link, as explained earlier, which can then be transformed into a QR code through services like QR Code Generator or QR Code Monkey.
• Employing a Multichannel Widget: For a more seamless integration of WhatsApp into your website, a multichannel chat widget is the optimal choice. It provides a convenient way for customers to contact you by clicking a WhatsApp button directly on your website, delivering a smoother user experience.

How to integrate your Shopify with Whatsapp

In this guide, we will simplify integrating your Shopify store to WhatsApp and enabling WhatsApp notifications. We will achieve this by utilizing the Cloud API maintained by Meta.

1. Prerequisites

To make the most of this guide, you need to ensure the following:

• Node.js and npm must be installed on your system.
• You own a Shopify store with products and a configured payment processing system.
• It’s necessary to have a registered developer account on Meta for Developers. Then establish a Business App and choose a WhatsApp Business Account.

The final step will provide you with a temporary access token. This token is important for the subsequent steps of this guide, so make sure to keep it safe.

Once these prerequisites are checked off, you’re all set to proceed with the rest of the steps in this guide.

2. Crafting a WhatsApp Message Template

Here’s a step-by-step guide to creating an order notification message template:

• Start by logging into your Business Manager and selecting your business account.
• Click on the three-bar icon situated at the top left of the page, then select WhatsApp Manager.
• Navigate to the Account Tools icon using the side menu, then click on Message Templates.
• Find the Create Template button on the top right of the page and click on it.
• Pick Transactional as your category. Name your template (for instance, “order_confirmation”), and choose its language.

• Hit Continue to proceed to the template builder.

With your order confirmation template ready, it’s time to outline your message. Here’s a sample structure of what your customer should receive:

• In the template builder, choose Text for the Header section. The “We have received…” section will serve as your Header, with the rest of the message making up the Body section.
• To add two variables, click on Add variable twice below the Body text box. Replace the customer’s name with the first variable — 1. Then, replace the order number inside the brackets with the second variable — 2.

When finished, your message should look like this. A preview of your message is visible on the same page.

• Finally, hit Submit to store the message template.

With your template ready, the next step involves using the WhatsApp Business Platform to establish a webhook in your Shopify admin. This allows you to map an application that automatically sends this message to a customer once they place an order.

3. Utilizing Webhooks to Dispatch Notifications to an Express Server

Imagine you wish to automatically notify your customers whenever they make a purchase from your Shopify store. One way would be to monitor your store for new orders every few minutes. But continually sending API requests to your store can be wasteful, particularly if no new orders come in. A more efficient method is to employ a webhook that listens for the “order creation” event on your store, alerting you each time an order is placed.

Here’s a simple outline of how to create an “order creation” webhook and link it to an express server:

Initiating a Node.js Project

• Kick-off by generating a folder titled “whatsapp-demo” for your project.
• Then, open the command terminal in “whatsapp-demo” and run the command below to start a Node.js project:

npm init -y

• To set up a web server on Node.js, install express with the following command:

npm i express

With your development environment ready, you can now proceed to create the express server.

Setting Up an Express Server

• Begin by creating a file labeled test.js within the “whatsapp-demo” folder. Open it using your favored source-code editor and paste the below code into it.

const express = require('express')
const app = express()
app.post('/webhooks/orders/create', (req, res) => {
console.log('Yes, We got an order!')
res.sendStatus(200)
})
app.listen(3000, () => console.log('Now running on port 3000!'))

• The code provided sets up a simple express server. This server shows a message on the server’s terminal each time the webhook forwards an “order creation” alert.

You must establish a tunnel before you can link it to the Shopify webhook.

Establishing an HTTPS Traffic Tunnel

To set up a webhook, Shopify will ask for a public URL to forward the notification. If you use a shared server for this guide, simply use its URL. However, if you’re following this guide on your local machine, you’ll have to construct a tunnel with a publicly available HTTPS URL.

• Begin by installing ngrok with the command below:

npm install -g ngrok

• Next, open a new terminal window and use the following command to fetch the tunneled URL for your local server:

ngrok http 3000
Forwarding https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

• Keep the URL handy, as you will require it in the forthcoming step.

NOTE: If you reset this client, a new URL will be generated, and you’ll have to update any existing references.

Establishing a Webhook in Shopify

• Enter your Shopify store’s admin area and head over to Settings > Notifications. Scroll down to Webhooks and select Create webhook.

• Generate a webhook for “order creation” and provide your tunnel URL or public URL that you created in the previous step.

• Run your local server on a different terminal with node index.js, then click on Send test notification.

• If all is set up correctly, your server’s terminal should display the message: “Order received.” Now, you’ve successfully linked your Shopify store to your Express server.

The following step involves sending the WhatsApp message template to the customer when they make a purchase.

Delivering a Personalized Message with the “order_notification” Template:

• Install Axios by executing the following command in your terminal:

npm i axios

Axios is useful for making the POST request, which sends a WhatsApp message to your customer.

• After installing Axios, create a new file in your project folder named customMessage.js. Import axios and express into the file with this code:

const axios = require('axios').default
const express = require('express')
const app = express()

• Next, establish a route to manage the order creation notification from Shopify with the following command:

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);
const order = JSON.parse(body.toString());
console.log("Yes, We got an order!", order.customer.phone);
// Remaining code will go here
})

When Shopify contacts /webhooks/orders/create with an order, the order details are sent to the route within res, the second argument of your async callback function.

• Now, extract the customer’s phone number, first name, and order ID from the order details, and use these details to craft the API request parameters:

const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
}

The above object carries all necessary parameters to complete the request. Make sure the template name specified in the object is the same as the one created earlier in your WhatsApp Business Manager.

• Then, construct a config object with a nested headers object. Within headers, set your WhatsApp access token as the value of Authorization (replace ACCESS_TOKEN with the token), and application/json as Content-Type:

const config = {
headers: { Authorization: `Bearer <`ACCESS_TOKEN`>`, 'Content-Type':   'application/json'}};

• Next, set up a POST request with Axios and pass both the config object and the data object as arguments. Nest then and catch methods to display the result (or the error message if the promise fails):

if (order.customer.phone) { 
return res.sendStatus(403);
} else {
axios
.post( "https://graph.facebook.com/<'API_VERSION'>/<'YOUR_WABA_ID'>/messages",data,
config
.then((result) => console.log(result))
)
.catch((err) => console.log(err));
return res.sendStatus(200); }

• Replace YOUR_WABA_ID with your WhatsApp Business ID from your WhatsApp App dashboard and API_VERSION with a compatible Cloud API version (default v15.0)

Your app is ready to go!

To put it to the test, the ngrok tunnel should still be running, and you’ll need to launch the express server in a separate terminal:

node customMessages.js

4. Additional Shopify Actions

Besides just creating orders, Shopify also provides more than 50 webhooks for a variety of activities. These include creating and updating a shopping cart, generating and updating a product collection, attempts at billing (both successful and unsuccessful), and several more. 

If you wish to utilize any of these webhooks, the process is quite similar to the one described previously. You simply need to create a new webhook in your Shopify admin panel and then register the topic as a route on your Express server.

Whatsapp Shopify Integration: FAQs

Final words

Remember, the key to a thriving e-commerce business in today’s fast-paced digital world is staying connected, responsive, and customer-focused. And what better way to achieve this than by bringing your business to where your customers are – on WhatsApp?