WhatsApp Business API | Integration for Shopify

Retail & eCommerce Header

Integrate simple WhatsApp notifications in core areas of customer engagement – order confirmation, order cancellation and shipping information – with a webhook and a basic app in your Shopify Shop.

WhatsApp Notifications on Shopify

As one of the largest e-Commerce platforms globally, Shopify is an innovator in the digital space. That’s why we’ve chosen Shopify to explain how to use these key notifications  – without the need of a plugin or add-on.

To get started with this tutorial you’ll need to:

  • Use Shopify as your e-Commerce platform
  • Have already an active WhatsApp Business Account (WABA)

Getting access to the WhatsApp Business API via tyntec is straightforward, without the need to switch to a specific software or UI. For merchants on Shopify, you’ll need a bit of coding work to integrate tyntec’s API for WhatsApp Business in the Shopify Store. When you follow the examples and instructions in this tutorial, you’ll see how easy it is to adapt this to your personal needs.

How it Works on Shopify’s Side

To get started with the implementation, you’ll need to set a webhook and develop a basic app in your Shopify Shop.

The webhook might be a Ruby Gem (like in our examples), but can also be written in any other programming language. You can imagine it as an abstraction level that builds connection and controls communication between the Shopify app and your shop – containing  the whole functionality. Check this link to find all webhooks that Shopify provides: https://bit.ly/319b5Tp

The Shopify App will always run in the background and provides a specific URL. The webhook, with its defined functionality, will call this URL and you’ll receive all the information needed from your shop. The app will gather the results, build a connection to tyntec, and send the collected data.

Shopify Integrations | how it works tyntec

tyntec takes over from here to facilitate the communications piece between the Shopify merchant and their customer.

How it Works on tyntec’s Side

You can create a tyntec account and setup your WhatsApp Business Account with tyntec.  With a simple process from account creation to activation, tyntec enables merchants on Shopify to leverage WhatsApp for customer notifications for optimal support.

The notifications must be created in accordance to the WhatsApp Business guidelines for Message Templates. This makes it easy for you to standardize communications and start notifying customers from your Shopify Shop.

Integrate shopify on whatsapp | see how you can | tyntec

Use Cases and How to Implement Them

With WhatsApp Business you will be able to send out time-sensitive messages that need to be looked at right away by your customer. Some of them might replace your existing email content, such as order or shipping confirmation. Just be aware, that promotional content is not allowed with WhatsApp, so you should refrain from sending notifications for marketing purposes.

The code outline for notifications is similar for any requests you might have. For the developer in your company it should be easy to adapt the following code examples to your specific use case.

Shopify provides a very good documentation, where you can find all provided webhooks (https://bit.ly/319b5Tp), information on certain Shopify events (https://bit.ly/2LW6W1w), and what data you can get from them.

“Order confirmation” Message

The “order confirmation” message gives you the chance to thank your customers for buying in your shop. They can check the order details to avoid confusion or mistakes. Also you can provide payment information (relevant for payment in advance) and send automatic notifications when the payment is confirmed.

The customer will always be up to date with the order, which increases the trust with your brand and encourages them to buy again in the future.

Please note, that the customer will not be able to reply to your message and you should disable the chat function on tyntec side. Two-way conversations are possible in Shopify, but the feature needs further integration.

The webhook “orders/create” will be called and the Shopify app will be able to gather all the information concerning a recently placed order.

The “order confirmation” message contains for example:

line_items.title billing_address.*
line_items.variant_title shipping_address.*
line_items.price order.payment_gateway_name
line_items.quantity

Implementation of the “Order Confirmation” Message

# require important gems
# in this case require a http client, a json parser as well as a shopify_app gem
require "faraday"
require "json"
require "shopify_app"
 
# first of all a webhook needs to be registered in Shopify
# File: /config/initializers/shopify_app.rb
ShopifyApp.configure do |config|
 
 config.webhooks = [{
  topic: "orders/create",
  address: "https://your-app-hosted-for-shopify.com/webhooks/tyntec_orders_create",
  format: "json",
  fields: ["customer", "line_items"]
}]
 
end
 
# register a new HTTP client to the tyntec API
# you can either do it per Job, wrapped in a module, or a single time on app start
api_key = "YOUR_API_KEY"
tyntec_endpoint = "https://api.tyntec.com"
 
CONNECTION = Faraday.new tyntec_endpoint do |connection|
 connection.headers["apikey"] = api_key
 connection.headers["Content-Type"] = "application/json"
 connection.headers["Accept"] = "application/json"
end
 
# when the webhook gets triggered a job is called
# now we can manage our data and send a message via WhatsApp
# File: /app/jobs/tyntec_orders_create_job.rb
class TyntecOrdersCreateJob < ActiveJob::Base
 def perform(shop_domain:, webhook:)
 
   # check if the customer has a phonenumber
   unless webhook["customer"]["phone"].empty?
     CONNECTION.post("/conversations/v3/messages") do |request|
       request.body = {
         "from": ENV["WHATSAPP_SENDER_PHONE"],
         "to": webhook["customer"]["phone"],
         "channel": "whatsapp",
         "content": {
           "contentType": "text",
           "text": "Thanks for your order!"
         }
       }.to_json
     end
   end
 end
end

“Order Canceled” Message

The “order canceled” notification will be automatically sent when the customer or the shop owner canceled the order. The customer will receive a list of which products will be cancelled, and the message also provides information on how the payment will be refunded. The customer will have the immediate assurance that the cancelation was accepted.

Please note, that the customer can’t reply to your message and you should disable the chat function on the tyntec side. Two-way conversations are possible in Shopify, but this feature needs further integration.

The webhook “orders/canceled” bzw. “refunds/create” will be called and the Shopify app will be able to gather all the information concerning an order that was recently canceled.

The “order canceled” message contains for example:

refund_line_items.quantity
line_item.title
refund_line_items.presentment_money

Implementation of the “Order Canceled” Message

# require important gems
# in this case require a http client, a json parser as well as a shopify_app gem
require "faraday"
require "json"
require "shopify_app"
 
# first of all a webhook needs to be registered in Shopify
# File: /config/initializers/shopify_app.rb
ShopifyApp.configure do |config|
 
 
 config.webhooks = [{
  topic: "orders/cancelled",
  address: "https://your-app-hosted-for-shopify.com/webhooks/tyntec_orders_cancelled",
  format: "json",
  fields: ["customer", "line_items"]
}]
 
end
 
# register a new HTTP client to the tyntec API
# you can either do it per Job, wrapped in a module, or a single time on app start
api_key = "YOUR_API_KEY"
tyntec_endpoint = "https://api.tyntec.com"
 
CONNECTION = Faraday.new tyntec_endpoint do |connection|
 connection.headers["apikey"] = api_key
 connection.headers["Content-Type"] = "application/json"
 connection.headers["Accept"] = "application/json"
end
 
# when the webhook gets triggered a job is called
# now we can manage our data and send a message via WhatsApp
# # File: /app/jobs/tyntec_orders_cancelled_job.rb
class TyntecOrdersCancelledJob < ActiveJob::Base
 def perform(shop_domain:, webhook:)
 
   # check if the customer has a phonenumber
   unless webhook["customer"]["phone"].empty?
     CONNECTION.post("/conversations/v3/messages") do |request|
       request.body = {
         "from": ENV["WHATSAPP_SENDER_PHONE"],
         "to": webhook["customer"]["phone"],
         "channel": "whatsapp",
         "content": {
           "contentType": "text",
           "text": "Your order was cancelled."
         }
       }.to_json
     end
   end
 end
end

“Shipping Confirmation” Message

Let your customers know when their order is dispatched and make it easy for them to track their packages. If there is a problem with the shipment,  they will know right away. This feature will lower any concerns to order again in your shop and the customers will always be up to date with their order.

Please note, that the customer can’t reply to your message and you should disable the chat function on tyntec side. Two-way conversations are possible in Shopify, but this feature needs further integration.

The webhook “fulfillments/create” or “fulfillment_events/create” will be called.

The “shipping confirmation” message contains for example:

line_items.title tracking_url
destination.* tracking_number
tracking_company

Implementation of the “Shipping Confirmation” Message

# require important gems
# in this case require a http client, a json parser as well as a shopify_app gem
require "faraday"
require "json"
require "shopify_app"
 
# first of all a webhook needs to be registered in Shopify
# File: /config/initializers/shopify_app.rb
ShopifyApp.configure do |config|
 
 config.webhooks = [{
  topic: "fulfillments/create",
  address: "https://your-app-hosted-for-shopify.com/webhooks/tyntec_shipping_confirmation",
  format: "json",
  fields: ["status", "destination", "tracking_url"]
}]
 
end
 
# register a new HTTP client to the tyntec API
# you can either do it per Job, wrapped in a module, or a single time on app start
api_key = "YOUR_API_KEY"
tyntec_endpoint = "https://api.tyntec.com"
 
CONNECTION = Faraday.new tyntec_endpoint do |connection|
 connection.headers["apikey"] = api_key
 connection.headers["Content-Type"] = "application/json"
 connection.headers["Accept"] = "application/json"
end
 
# when the webhook gets triggered a job is called
# now we can manage our data and send a message via WhatsApp
# # File: /app/jobs/tyntec_shipping_confirmation_job.rb
class TyntecShippingConfirmationJob < ActiveJob::Base
 def perform(shop_domain:, webhook:)
   unless webhook["destination"]["phone"].empty? && webhook["status"] == "pending"
     CONNECTION.post("/conversations/v3/messages") do |request|
       request.body = {
         "from": ENV["WHATSAPP_SENDER_PHONE"],
         "to": webhook["destination"]["phone"],
         "channel": "whatsapp",
         "content": {
          "contentType": "text",
          "text": "Your order has been shipped. Here is your personal tracking URL: \n
          #{webhook["tracking_url"]}"
        }
       }.to_json
     end
   end
 end
end