Software Engineering

Implementing a low code buyer assist answer powered by Zendesk and Azure Logic Apps

Written by admin


On this submit, we’re going to discover ways to implement buyer assist capabilities utilizing a minimal code strategy and counting on third celebration providers. There are numerous conditions wherein you may have to implement some buyer assist capabilities. Perhaps you’re creating your personal product, or perhaps you’re working for a corporation that should enhance their operations.

With the arrival of COVID-19, e-commerce has grow to be a serious concern for many companies. Having a very good buyer assist technique in place is a should nowadays. On-line shoppers demand options like on-line reside chat or multi-channel communication and anticipate excessive responsiveness from on-line companies.

The pandemic has generated unprecedented ranges of uncertainty for enterprise they usually want to have the ability to adapt within the shortest time doable. Because of this, we’re going to actually on third celebration providers and use a minimal code strategy. This permits us to dramatically scale back the time to market and improvement price. Operational price can also be extremely versatile as a result of each Zendesk and Azure can adapt their choices and costs to our enterprise scale and wishes.

The very first thing we’re going to do is to go to https://www.zendesk.com/ and create an account. I can’t doc how to do that as a result of Zendesk may be very intuitive and it has excellent documentation.

After creating the account, you may go to the settings web page and go to the channels part to search out out your assist electronic mail:

Zendesk support email

The format of this electronic mail handle must be assist@yourcompany.zendesk.com. You will have to recollect this handle as a result of we’re going to want it later.

We will then go to the widget part beneath the channels part to allow the contact type and the net chat options:

Zendesk support widgets

In the event you go to the settings it is possible for you to to search out the set up information:

Chat settings

All it is advisable do is so as to add a script tag to your web site’s supply code:

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

We have now enabled the contact type widget which is displayed when there aren’t any buyer assist brokers on-line:

Contact form

We have now additionally enabled the reside chat widget which is displayed when buyer assist brokers are on-line:

Live chat

Somewhat icon will likely be then displayed on the underside proper of your webpage. When a person clicks on the icon, the contact type or the reside chat type will likely be displayed.

Ideally, we need to have a single level to handle all our buyer request. The request might have originated in our web site, our electronic mail or social media:

  • Internet: We are actually able to handle requests that originated on our web site.

  • Electronic mail: Managing electronic mail requests might be achieved by enabling electronic mail forwarding from one in all your organization electronic mail addresses to your Zendesk electronic mail handle.

  • Social media: You’ll be able to go to the channel settings in Zendesk to attach your social media accounts with Zendesk.

  • Telephone calls. Zendesk additionally lets you handle cellphone calls as buyer requests tickets. You’ll be able to study extra utilizing the Zendesk documentation.

Most often, the default Zendesk implementation could be sufficient to get began. Nonetheless, in my case, I wanted an extra customized contact type:

React web form

I wanted this kind to be extremely seen and the underside proper “assist” button didn’t have sufficient visibility for me. The webform was carried out utilizing React and Formik.

I wished to ship the request that originated utilizing this kind to Zendesk. The simplest answer could be to ship an electronic mail to the Zendesk assist electronic mail handle. We have to implement an HTTP POST endpoint that takes the shape particulars as JSON and ship an electronic mail to the Zendesk assist electronic mail handle. I wished to implement this with as little code as doable and the very first thing that got here so my thoughts was to make use of an Azure perform.

Utilizing an Azure perform would require us to outline an HTTP set off and the code that sends the e-mail. We would wish to handle the permissions so our electronic mail server permits us to ship an electronic mail. This wasn’t a large job nevertheless it required me to avoid wasting the code in a repository, deploy it, and many others. It was an excessive amount of work for one thing so easy. I wished to discover a higher approach and that’s how I ended up utilizing Azure Logic Apps.

We will go to the Azure portal and create a brand new Azure Logic App, then use the designer to create the logic guidelines of our app. The very first thing that we have to do is to outline an HTTP set off for our HTTP POST request:

Logig App incoming HTTP request

You’ll be able to paste an instance of the physique of your request and the Logic App designer will mechanically translate it into the request schema.

Whenever you save your logic, Azure will generate an URL which you could invoke out of your app.

The second factor that we have to do is so as to add a step:

Login App adding a new step

We have to add a step that may return an HTTP response:

Logic App send response step

We then want so as to add a parallel step to ship an electronic mail. In my case I take advantage of Gmail however there are different integrations accessible.

Logic App send email step

We have to extract the info from the unique HTTP request so as to add it to the e-mail contents. We will do that utilizing an expression:

Logic App using expressions

We will use triggerBody() to entry the request physique and json(triggerBody()) to remodel it into JSON. We will then entry the properties within the request physique as follows json(triggerBody()).firm.

We will then save every part and two sources ought to have been created:

Azure resource group

We will then invoke the HTTP set off in our logic app by sending an HTTP request from the net app:

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

You’ll be able to then use the browser developer instruments to see if the request was profitable:

Dev Tools HTTP request

And at last, head to the Azure Logic App monitoring part to see if all of the steps labored as anticipated. The monitoring instruments with offering you with some particulars if one thing fails:

Logic App monitoring

If every part labored you need to now have a brand new ticket in your Zendesk buyer assist dashboard:

Alt Text

The operational price of working this logic app is sort of zero and we are able to get began with Zendesk for simply $60 a 12 months. We will now ship an expert buyer assist expertise on a finances and in only a few hours!

As we are able to see Azure Logic apps might help us to resolve real-business wants with virtually no code. This permits us to maneuver sooner and adapt sooner in a time of unprecedented uncertainty.

 

5

Kudos

 

5

Kudos

About the author

admin

Leave a Comment