Conversations Inbox | Integration for Conversations Inbox + 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 Conversations Inbox 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.

You will need

Your WABA phone number that has been approved by tyntec (optionally your Viber Service ID)
Activated agent access to the Conversations Inbox
Your Conversations Inbox API key provided by tyntec (contact tyntec support if you don't' have it)
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 favorite text editor or IDE with JavaScript highlighting
MongoDB installed locally for development
A 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. It fetches customer data from Zendesk and Shopify to display them in Conversations Inbox. You can use it on WhatsApp and Viber channels. 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 Conversations Inbox 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
CMD_API_KEY -- your API key from tyntec to authenticate calls to Conversations Inbox 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
CHANNEL -- either whatsapp or viber. If none is selected, the app uses both.
VIBER_SERVICE_ID -- optional, if you use the viber channel

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.

image_chat_dashboard_shopify_zendesk_integration_001_@2x

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

image_chat_dashboard_shopify_zendesk_integration_002_2x

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.

image_chat_dashboard_shopify_zendesk_integration_003_2x

Note: The shipping address and the billing address of the 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:

image_chat_dashboard_shopify_zendesk_integration_004_2x

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.

image_chat_dashboard_shopify_zendesk_integration_005_2x

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

image_chat_dashboard_shopify_zendesk_integration_006_2x

Add action: Notify target and select your target My app - new ticket

image_chat_dashboard_shopify_zendesk_integration_007_2x

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.

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 Conversations Inbox under the contact Notes as shown below.

image_chat_dashboard_shopify_zendesk_integration_008_2x

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.