When it comes to customer support, most companies have no shortage of resources.
Whether your team has compiled help documentation and lists of frequently asked questions built forms for your users to submit tickets, chances are they probably live in different places across your website.
That’s why it’s absolutely vital to have a handy customer portal where all of these resources and links can live together under one roof. That way, your customers have an easy way to self-serve or submit tickets to get the support they need.
Zapier Interfaces, which lets you build custom forms and landing pages, is an excellent way to build this kind of resource hub from scratch. Your forms automatically connect to a database (via Zapier Tables) and thousands of apps so you can power your business-critical workflows.
In this blog post, I’ll walk you through exactly how to create your own customer support portal using Tables and Interfaces—powered by automation.
Table of contents
New to Zapier? It’s workflow automation software that lets you focus on what matters. Combine user interfaces, data tables, and logic with thousands of apps to build and automate anything you can imagine. Sign up for free.
Before you begin
Make sure you have a Zapier account. You can build your own table today at tables.zapier.com. You’ll also need access to Zapier Interfaces, which is where you can build your bug reporting portal. You can start your own portal today at interfaces.zapier.com.
Step 1: Build your customer support portal in Interfaces
Let’s start off with creating a customer support portal from one of our pre-made templates. Click Try it on the template below, then click Use template in the new window.
Request Portal
A simple request portal. Create support tickets and view tickets in a Kanban view.
This will create your page within Interfaces. Your page will include a Home layout, which is where you’ll set up your portal and all your relevant windows.
Your home page will also include a Submit Ticket layout, which is the form you can set up for users to submit tickets to you, and a View Tickets layout, which is a Kanban-style board where your submitted tickets will land. You’ll also have other layouts to support more resources like a forum, a demo page, and a FAQ page.
If you scroll down, you’ll also see that your ticket layout is automatically connected to a table, where those submissions will be saved each time someone submits a ticket. This database is a part of Zapier Tables, which allows you to store user tickets and take action on that data effectively.
Under the Zaps section, you’ll see any Zaps—what we call Zapier’s automated workflows—that are connected to your portal. Whenever you set up this template, Zapier automatically creates a Zap for you. This Zap will send you an automatic email notification whenever someone submits a ticket, so you can easily keep up with user requests.
Step 2: Customize your customer support portal
Once you’re familiar with the initial layout of your portal, click on your Home page.
You’ll be brought to the backend of your portal, where you can edit each window within your page. The pre-existing template includes four sample link cards (which refer to the portal’s layout options) where users can submit tickets, see FAQs, book demos, and join a forum.
In my instance, I’m going to keep it simple and customize these existing link cards so my users can self-serve and report issues autonomously. But, of course, you can add or remove whichever elements make the most sense for your resource hub.
Give your portal a title and header copy
Any support hub or customer portal needs a decent title and header copy so your users know they’re in the right place.
To tweak the copy, click Edit next to the title.
A right-hand side panel called Content will appear—this is where you can tweak or add new copy from scratch. Add a personalized header and a descriptive paragraph using markdown. Here’s what I wrote:
Within this panel, you can also adjust parameters like width and text alignment. For my own portal, I’ll leave it on the default setting (center).
Edit your link cards
Once you’re happy with the way your header and title look, click back into your portal and click Edit next to your layout of link cards.
Within the right-hand side panel, you can edit the general layout of links, including the header text, the individual links, and the portal’s overall width and alignment.
First up, click into the Header field and add your copy. I’m changing mine to “Resources & support”.
To edit the text within each link card detail, click on the pencil icon under Links.
Here you can adjust the layout of each link card, including the title copy, description, link text, URL, emoji, and whether you want to have that link open in a new window.
Repeat the same process for each individual link card, tailoring your text as you go. The link URLs should be already pre-filled for you, but remember to double-check that these links go where you want them to go.
If you want to add a new link card the template hasn’t provided, just click Add Link and follow the same process as above.
Tip: If you want to rearrange the position of links, just drag and drop each link by grabbing the click-and-drag icon and moving them into the right place.
Edit your ticket submission form
Once you’re happy with the look and feel of your link cards, it’s time to set up the form for your tickets, which is what your users will see when they want to get in touch. Click on the Submit Ticket page on your Interface home page.
You’ll be brought to the backend of your form, where you can edit the fields so your form says what you want it to say—and looks the way you want it to look. Click Edit next to your form fields if you want to adjust the question text or add more.
Within the right-hand side panel, you can edit your general form fields, including the text for your individual questions, your form’s overall width and alignment, and your CTA button text.
To edit the text within your questions, click on the pencil icon under Fields.
You can add different parameters to each question, including the text, type of text for your replies (like short text, email, long text, etc.), a label, placeholder text, and help text. You can also choose different options for your answers, like requiring a certain answer, hiding it from view, or blocking free email providers.
You can also add conditional logic to your form. This allows you to add a condition that determines if a field should be displayed based on previous responses. For example, you might want to display different fields depending on whether the customer has a “billing” issue or a “technical support” issue, so you can continue to gather the most relevant information in an efficient manner.
First up, I’ve set up a dropdown field that asks whether or not it’s a technical, billing, or customer support issue.
Now, depending on the answer the customer gives, I’ll display a different question. So for example, if the customer selects Technical support, I’m going to set up a conditional field that will surface a new question.
To add logic to any of your form fields, click the Logic tab on the field you want to display to customers after selecting a specific answer:
Now let’s set up the condition. Click +Add condition.
Next, under Field, select the previous question you want to add conditional logic to.
Then, add the condition from the dropdown selection:
Remember to click Save. Now, anytime a customer selects technical issue from the dropdown, they’ll be presented with another question that breaks down types of technical issues:
You can do this as many times as you like for each dropdown answer.
Once you’re happy with your questions, go back into your general form.
If you want to add a new question that’s not within the template, just click Add Field and follow the same process as above.
Now, if you go to the Data tab, you’ll see the name of the table that this form is connected to (where your tickets are stored).
You can also click on Actions if you want to see which Zaps are set up with this form. You’ll see the Zap that Zapier pre-set up for you, which is the one that sends you an automatic email whenever a person submits a ticket.
To build another Zap within your interface, click on Add action. You’ll be taken to the Zap editor, where you’ll see the trigger (form submission created in Interfaces). You can click on the + icon to add an action step.
For example, you might want to create a ticket in Zendesk automatically whenever someone submits a ticket to you through Interfaces. Like so:
Once you’ve published your Zap, you can navigate back to your Interfaces page under your Actions tab. This is where you’ll see your new published Zap. Learn more about adding actions to your form here.
Edit your ticket form’s Kanban view
Once you’re happy with the way your form looks, it’s time to look at the Kanban view of your tickets.
To edit this, click on the View Tickets page on your interface’s home page.
You can use this board to keep track of your tickets from users in one place and track their progress project-management style.
For example, you can share this board with your team and other stakeholders so they can see which tickets are new, which are in progress, and which are completed. To edit the copy or add more progress columns, click Edit.
In the right-hand panel, you’ll be able to edit the text, set user permissions, and set which card details you want to include within the board. That includes adjusting the width and alignment.