A Custom Zendesk App for Supercharged Support

This week, I'm excited to share a project that bridges the gap between our data and our support team. I leveraged the data pipelines I previously built from our sales and deployment tables in Databricks to populate Zendesk Custom Objects. With that data in place, I developed a custom sidebar app in Zendesk to give our support agents critical client information right where they need it: the ticket view.

At-a-Glance Client Insights

The goal was to eliminate the need for agents to hunt for information across different platforms. The new sidebar app presents a comprehensive, easy-to-digest summary of the client associated with a ticket. Key information displayed includes:

Technical & Location Details

Server Info: Displays server, region, and sitekey with a handy copy button for quick access.
Client Locale: Shows the client's country, local time, and timezone offset, giving agents immediate context for communication.

Platform & Content Details

CMS Status: Indicates if a client is 'live', what 'theme' they're using, and provides quick links to their website's front page and admin login.
Enabled Features: Lists which additional modules are enabled and their social media "feeds" settings.

Project & Contract Information

Deployment Phases: Pulls all project phases, showing the project manager, start/end dates, and current status.
Contract Items: Details all current contract items, including product line and term dates.

Designed for Agent Efficiency

Beyond just displaying data, the app was built with the agent's workflow in mind. It's neat, compact, and packed with user-friendly features:

Dark Mode Friendly: The interface respects the agent's system theme for comfortable viewing.
Collapsible Accordions: Sections can be expanded or collapsed to save screen real estate. The app remembers an agent's preferences using local storage, so their layout is always how they left it.
Responsive Design: The sidebar window automatically resizes to fit its content and coexist seamlessly with other Zendesk apps.

Behind the Build: The Tech Stack

For those interested in the development process, here’s a quick look under the hood:

Lightweight & Modern: The app is entirely dependency-free and was built using TypeScript with Vite, ensuring a modern and maintainable codebase.
Streamlined Build Process: I configured the Vite compiler to output the final files directly into the required Zendesk app directory structure. This made packaging and deployment seamless.
Rapid Local Development: The key to a fast workflow was using zcli to serve the app locally. Vite's build-watching feature compiled changes continuously, and I could preview the app live in the Zendesk agent workspace by adding the ?zcli_apps=true parameter to the URL.
Optimized Performance: The end result is an incredibly lean, 11KB (gzipped) application, which ensures it loads instantly without impacting the agent's experience.

Looking Ahead

This new tool empowers our support team to provide faster, more context-aware assistance. By bringing vital data directly into their workspace, we're cutting down on research time and improving the quality of our support. Next up, I'll be monitoring feedback from the team to identify any further enhancements we can make!