Implementation of a low-code customer support solution powered by Zendesk and Azure Logic Apps

Posted on

In this article, we’ll learn how to implement customer support features using a minimal code approach and relying on third-party services. There are many situations in which you may need to implement certain customer support features. Maybe you’re developing your own product, or maybe you work for a company that needs to improve its operations.

With the arrival of COVID-19, e-commerce has become a major concern for most businesses. Having a good customer support strategy in place is essential these days. Online consumers demand features such as live online chat or multi-channel communication and expect high responsiveness from online businesses.

The pandemic has generated unprecedented levels of uncertainty for businesses and they need to be able to adapt as quickly as possible. For this reason, we’re really going to use third-party services and use a minimal code approach. This allows us to significantly reduce time to market and development costs. Operational costs are also very flexible because Zendesk and Azure can tailor their offerings and pricing to the scale and needs of our business.

The first thing we are going to do is visit https://www.zendesk.com/ and create an account. I won’t document how to do this because Zendesk is very intuitive and has very good documentation.

After creating the account, you can visit the settings page and visit the channels section to find your support email:

Zendesk support email

The format of this email address must be support@yourcompany.zendesk.com. You will need to remember this address as we will need it later.

We can then visit the widget section under the channels section to enable the contact form and web chat features:

Zendesk Support Widgets

If you visit the settings, you can find the installation guide:

Chat Settings

All you need to do is add a script tag to your site’s source code:

<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>

We’ve enabled the contact form widget that displays when there are no customer support agents online:

Contact form

We’ve also enabled the live chat widget that displays when customer support agents are online:

Live Chat

A small icon will then appear at the bottom right of your web page. When a user clicks the icon, the contact form or live chat form is displayed.

Ideally, we want to have a single point to manage all our customer requests. The request can come from our website, email or social media:

  • Web: We are now ready to handle requests from our website.

  • Email: Email request management can be accomplished by enabling email forwarding from one of your company email addresses to your Zendesk email address.

  • Social media: You can visit the channel settings in Zendesk to connect your social media accounts to Zendesk.

  • Phone calls. Zendesk also lets you manage phone calls when customers request tickets. You can learn more using the Zendesk documentation.

In most cases, the default Zendesk implementation would suffice to get started. However, in my case, I needed an additional custom contact form:

React web form

I needed this form to be very visible and the “help” button at the bottom right didn’t have enough visibility for me. The web form was implemented using React and Formik.

I wanted to send the request from this form to Zendesk. The easiest solution would be to send an email to the Zendesk support email address. We need to implement an HTTP POST endpoint that takes the form details in JSON format and sends an email to the Zendesk support email address. I wanted to implement this with as little code as possible and the first thing that came to mind so I thought of using an Azure Function.

Using an Azure Function would require us to define an HTTP trigger and the code that sends the email. We would need to manage permissions for our mail server to allow us to send an email. It wasn’t a huge job but I had to save the code to a repository, deploy it, etc. It was too much work for something so simple. I wanted to find a better way and that’s how I ended up using Azure Logic Apps.

We can visit the Azure portal and create a new Azure logic app, then use the designer to create our app’s logic rules. The first thing we need to do is define an HTTP trigger for our HTTP POST request:

Incoming HTTP request from the Logig application

You can paste an example of your request body and the logic app designer will automatically translate it into the request schema.

When you register your logic, Azure generates a URL that you can call from your application.

The second thing we need to do is add a step:

Login app adding a new step

We need to add a step that will return an HTTP response:

Send logic app response step

You then need to add a parallel step to send an email. In my case, I’m using Gmail but other integrations are available.

Logic app send email step

We need to extract the data from the original HTTP request to add it to the email content. We can do this using an expression:

Logic app using expressions

We can use triggerBody() to access the request body and json(triggerBody()) to turn it into JSON. We can then access the properties in the request body as follows json(triggerBody()).company.

We can then save everything and two resources should have been created:

Azure resource group

We can then invoke the HTTP trigger in our logic app by sending an HTTP request from the web app:

const response = await fetch(`INSERT_THE_TRIGGER_URL_HERE`, {
    method: "POST",
    body: JSON.stringify(values),
});
const json = response.json();

You can then use the browser’s dev tools to see if the request was successful:

Dev Tools HTTP Request

And finally, head over to the Azure Logic App monitoring section to see if all the steps worked as expected. The monitoring tools provide you with some details in case of failure:

Monitoring Logic Apps

If everything worked, you should now have a new ticket in your Zendesk Customer Support Dashboard:

Alternate text

The operational cost of running this logic app is almost zero, and we can get started with Zendesk for just $60 per year. We can now deliver a professional customer support experience on a budget and in just a few hours!

As we can see, Azure Logic applications can help us solve real business needs with almost no code. This allows us to act faster and adapt faster in times of unprecedented uncertainty.

5

Glory

5

Glory

Leave a Reply

Your email address will not be published.