Dollar Shave Club - Using WebSockets to deliver faster responses

We’re always on the lookout for innovative uses of the Zendesk Developer platform which enables companies to deliver an enhanced support experience. Recently we were blown away by the simple use of Web Sockets to enable syncing between a home built CRM and Zendesk at Dollar Shave Club. We asked Eddy Kim, one of the developers at Dollar Shave Club who built the integration, to share some details on how it was built.

Introduction

As an engineering team, we strive to create a delightful experience not only our customers, but also for our member service associates (MSAs). In this post, I’d like to share how we used WebSockets to improve our MSA experience.

The Workflow

At Dollar Shave Club, we use Zendesk to track issues and communicate with members. To manage actual customer accounts and orders, we use a homebuilt CRM called Brain. In shadowing our agents, we found a common workflow for each ticket:

  • Open Zendesk ticket/issue and triage
  • Switch to the CRM window
  • Type email into search field
  • Select matching customer
  • Investigate issue
  • Perform account actions in our CRM to correct issue
  • Switch to zendesk
  • Respond and resolve ticket

before

We also noticed that most of our MSAs had a second monitor. They often used Zendesk on one screen and Brain in the other. This immediately got us thinking about ways to optimize this workflow.

The Solution

Using WebSockets, Pusher as a broker, and Zendesk App Framework, we built an integration that enables our CRM to automatically load the customer account that the agent is working on in Zendesk. Instead of having to search each customer account by email, an MSA simply needs to open a ticket and our integration takes care of the rest.

after

How does it work?

Technically:

  1. When a ticket is opened, a private Zendesk app (built by DSC) loads a custom page of Brain via an iframe. We usually load the iframe on the app.activated since it is triggered anytime a ticket is opened. Even if a ticket is an inactive tab, focusing on the tab will trigger this event.
  2. Within the iframe, a secure WebSocket connection to Pusher is established via a private channel. By using private channels, Pusher will require all requests and connections to be authenticated.
  3. Next, a client event is then triggered sending along the ticket requester information.
  4. Pusher will broadcast the client event to any client subscribed to the private channel.
  5. Any instance of Brain with the sync enabled will check to see if the ticket requester exists and load the associated profile.

By having a bidirectional communication line between our CRM and Zendesk, we can also push events back to Zendesk. For example, if an MSA encounters a ticket with an unknown requester, we will display our search page within CRM and automatically assign the correct requester in Zendesk once the correct account has been found. These optimizations can be extended to other applications and channels such as chat and phones.

By using the Zendesk App Framework, WebSockets, and Pusher, we have been able to dramatically improve the speed of our agents.


Dollar Shave Club (DSC) is a men’s grooming brand dedicated to helping men live smarter, more successful lives through high-quality personal care products, content and technology.

p.s. DSC are hiring engineers!