Support Center in Zendesk

Neato requested implementing Zendesk in their support center overhaul with the intention of streamlining their process for their support agents. In order to make this happen, SC Tech had to customize a Zendesk theme using their Liquid Template Engine.

Visit Website
https://support.neatorobotics.com/
Create custom Zendesk

The Challenge

To construct a Zendesk theme that is designed to seem indistinguishable for Neato’s actual website, utilizing the template engine that Zendesk uses. Liquid Template Engine is an open-source template language created by Shopify and written in Ruby. It is written with strict requirements that made it necessary for our team to find creative ways to implement the same design and functionality as the website.

Our Approach

First, we needed to figure out how we would allow the support agents to see the links to internal support articles while displaying a separate view to the user. Then we had to establish that we needed to set up a good foundation that would allow users to utilize translations. Once we had all of that established, including how to work within the Liquid Templating Engine, we got to work creating a great support experience for Neato Robotics!

Understanding the Templating Engine

Neato Robotics wanted the design to be consistent with the website including the utilization of the language selector, header, and how-to video showcase sliders. In order to get the Liquid Templating Engine to work the way we wanted it to, we had to rebuild a few elements in the backend. While there are benefits to this engine, such as Bootstrap, there were many restrictions that prevented us from simply copying content from the website to the theme.

https://support.neatorobotics.com/

Solutions

The language selector on the website allows users to select locale (the country that they wish to view the site in) and language. We used a combination of custom Javascript, jQuery, Bootstrap components, and PHP for this section on the website. On the template, we had to use a built-in translation key and filters, along with jQuery and Javascript, in order to accomplish the same thing. Similarly, the website uses a collapse component from Bootstrap for mobile and small screen sizes. Despite an integration of Bootstrap into the Liquid Templating Engine, this no longer worked when we implemented it on the site.

Neato’s existing support center displayed how-to videos in an interactive slider. Royalslider is a plugin by Dmitry Semenov with the purpose of acting as an image gallery and content slider. A decision was required to determine whether our team would try to build our own slider from scratch or try to creatively find a way to implement the plugin. After trying a few workarounds, we customized a solution that utilized the plugin the way Neato wanted it to.

Start Your Next Project With Us

From marketing strategies to web development, logo design to mobile app development, we have solutions for all of your needs. Get in touch with us to find out how we can assist you in building a better brand.

Contact Us