Thumbnail
Chat Messaging Dashboard | Integration for Chat Dashboard + Shopify + Zendesk

Hi there!

Would you like to see Shopify orders and Zendesk Support tickets in the same place as conversations with your customers?

In this tutorial, you will learn to integrate the WhatsApp channel of the Chat Messaging Dashboard with Shopify orders and Zendesk Support tickets. This integration will allow you to see new orders and support tickets among Notes of a WhatsApp contact.

logo_shopify_zendesk_ct2x

You will need

  • Your WABA phone number that has been approved by tyntec
  • Activated agent access to the Chat Messaging Dashboard and an Eazy API key for your WABA
  • A Zendesk account with the Customer Support option (subscription allowing custom business rules)
  • A Shopify account with Zendesk app installed and the Web Widget enabled
  • Node.js and your favourite text editor or IDE with JavaScript highlighting
  • MongoDB installed locally for development
  • An ngrok account and the binary installed for development

Step One: Get your integration app ready

For your quick start with integrations, we’ve prepared a sample integration app. Look at what the code does. You will notice that the code is in several directories:

  • /routes handle callbacks from services and hand received data over to controllers, there’s a file for webhook endpoints of each service.
  • /controllers update data in your database and call the internal APIs.
  • /models contain schema definitions for your database.
  • /api handles API calls to services, currently only the Eazy API. If you’re going to extend the integration, calls to Shopify and Zendesk APIs should also live here and be invoked from the controllers accordingly.
  • server.js does basic management and binds the logic together.

Let’s just quickly get your app running in the development style:

1. Clone the api-samples repository and go to the chat-integrations/shopify-zendesk folder.
2. Install dependencies (and the nodemon module if you don’t have it yet):

npm install
npm install nodemon

3. Run ngrok in a terminal:

ngrok http 3000

4. Copy .env-example to .env and set environment variables in .env:

  • WABA_NUMBER -- your WABA number in international format without the leading +/00
  • EAZY_API_KEY -- your API key from tyntec to authenticate calls to Eazy API
  • MONGO_URL -- optional MongoDB location (defaults to the local instance mongodb://127.0.0.1:27017)
  • PORT -- optional server port (defaults to 3000)
  • SHOPIFY_DOMAIN -- yourstore.myshopify.com

5. And finally, start the app in another terminal:

nodemon server.js

So you have all the API endpoints in your app ready and running!

Step Two: Configure Shopify

Now let’s set up Shopify and connect it with your app.

1. Require order checkout with both email and a phone number. Shopify orders allow customers to check out their orders using either their email or phone number by default. To make this integration always work, you need to enforce the use of a phone number.

In your store admin, go to Settings > Checkout.

In the section Form options set Shipping address phone number to Required.

It also makes sense to restrict order checkout to use email only (to avoid confusing the customer). In the section Customer contact, set To check out to Customers can only check out using email.

Note: The shipping address and the billing address of an order contain the same data in a Shopify store by default. If you distinguish between them, you may need to adapt the code (check the routes for Shopify, the demo app reads the phone number from the billing address).

2. Subscribe your webhooks to notifications.

Cool! Now you need to create the following webhooks with the JSON format:

Event URL
Order creation https:///shopify/createOrder
Order update https:///shopify/updateOrder

Your webhooks should look like this:

You may test your new webhook via the Send test notification link. ngrok should notice the callback.

Tip: If you would like to extend the app with more webhooks, check out the Webhook docs and add them in the file routes/shopify.js.

 

And that’s it. Your Shopify integration is ready!

Step Three: Configure Zendesk

Now let’s set up Zendesk and connect it with your app.

1. Require phone numbers in tickets (and in the Web Widget).

Add a custom ticket field Phone for a phone number via Admin > [MANAGE] Ticket Fields > Add field > Text (or see Adding a custom ticket field for details), make it Required to submit a request and Editable for end-users, and save it.

Note the ID of the field, you’re going to need it to define a callback trigger!

Enable the custom field in the Web Widget via Admin > [CHANNELS] Widget > Custom ticket fields and check Phone.
 

2. Subscribe your webhook to notifications.

Create a new target via Admin > Extensions > add target > HTTP target with the following settings:

  • Title, for example: My app - new ticket
  • URL: https://<YOUR_SERVER>/zendesk/createTicket
  • Method: POST
  • Content type: JSON

Select Create target and hit Submit. The target is immediately activated.

Create a callback trigger for the HTTP target via Admin > [BUSINESS RULES] Triggers > Add trigger with the following settings:

  • Trigger name, for example: Notify app on a new ticket
  • Add condition: Ticket -- Is -- Created
  • Add action: Notify target and select your target My app - new ticket

JSON body:

{
"subject": "{{ticket.title}}",
"url": "{{ticket.url}}",
"id": "{{ticket.id}}",
"phone": "{{ticket.ticket_field_<YOUR_PHONE_FIELD_ID>}}",
"status": "{{ticket.status}}",
"email": "{{ticket.requester.email}}",
"user_details": "{{current_user.details}}",
"tags": "{{ticket.tags}}"
}

And Save it.

 

And that’s it. Your Zendesk integration is ready!

Tip: You may add another target and a trigger for ticket status updates the same way.

Step Four: Try it out!

You're all set. Now you can create an order or open a support ticket.

Voila! It will show up directly in your Chat Messaging Dashboard under the contact Notes as shown below.

Congratulations on completing your integration!

More?

You may want, for example, to open a ticket on order and associate it with the order. For that, you would need to extend the following:

  • Custom ticket fields with the order ID (this is actually added automatically when you install Zendesk in Shopify) and other order data as needed
  • Shopify createOrder controller function to call the Zendesk Support API and feed it order data (such as the order ID) into custom ticket fields

Of course, for this you already need an API Token.

  • JSON callback trigger in the Zendesk Admin with the order ID, so that your app knows that the new ticket is associated with an order and can add order data to a Note.