How We Built: the VIP Support Custom Page

Erica Girges

Follow

Published in

Zendesk Developer Blog

4 min readApr 1, 2022

--

Last year, Zendesk rolled out a new customization feature for the Help Center known as custom pages. Previously, customization of your Help Center was limited to designing themes and utilizing specific templates. However, let’s say you needed a form that doesn’t generate a ticket or you’re sick of repurposing article pages to fit your business needs. Perhaps you just love hidden easter eggs and have been yearning to plant some fun ones of your own. Now with custom pages, you can build a page or pages with that unique functionality or custom UI without requiring it to be apart of the standard Help Center hierarchy. The link to the custom page can be embedded within any of the help center pages. How cool is that? As the Developer Support team at Zendesk, we found it critically important that we test this out (and have some fun with it ourselves).

What we built

We wanted to be sure to cover a lot of ground when testing this out. What does that look like? We’re talking custom UI, static content, modals, forms, request handling, updating users in Support and using popular technologies to do so.

We decided the best way to showcase this is with building an email/organization sign-up page. You can think of this as having users sign-up for newsletters or rewards programs. In our instance, we’re allowing users to sign-up their Organization to be a member of VIP Support.

View Github repo here: https://github.com/zendesk/custom-pages-example

This project’s main points of functionality include:

Sign-up form with validation
Modal
Request handling to Zendesk
Secure email notifications

Previously, each of these elements together wouldn’t have been easily incorporated prior to custom cages. Before, with the Help Center’s templates alone, you were limited with balancing styling and functionality. Yes, you could very well create a form, but to implement all of these features and maintain a cohesive UI (that doesn’t look like you hacked something together) — building a custom page is the way to go.

How we built it

To be able to showcase all the functionality and complexities involved with this project, our team decided on the following development stack:

Frontend

React with Typescript (library for building the frontend interface)

Tailwind CSS (for all styling)

Since we needed our app to fit into a single file in order to embed in our Help Center, we also carefully curated webpack configs to meet our bundling needs.

Backend

Node.JS (server environment)

JWT (authentication)

Nodemailer (package to handle all email correspondence)

The Team Effort

Each of our team members explored the intricacies of creating a custom page and built upon our web development skills. In this collection, we’ll be sharing our experiences and providing tips on how you can incorporate these when building your own custom page.

Below, you’ll find links to the corresponding articles for each technical piece of this project. We’ve organized this catalog of articles into two main categories: frontend and backend.

Frontend Related Content

In the following frontend articles, you’ll get the basic set-up steps for using each technology as well as our frontend team’s genuine take-aways and personal experiences from using this stack for our project. We’ll also share exactly how we managed to bundle our application into that single file needed.

Backend Related Content

For the following backend articles, you can expect a deep dive and walkthrough for how we developed the entire backend. Not only will we be touching on why each backend related technical choice was made but also how you can do it yourself!

So pull up a chair, get comfortable and maybe grab some popcorn*. Get ready to dive into some useful and authentic technical takeaways on how we built the VIP Support custom page.

*The Developer Advocacy team at Zendesk does not recommend or support eating popcorn while using your keyboard.