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.
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.
Once you're happy with the way your Kanban board looks, you can head back to your main home page, as your changes will be saved automatically.Â
Adjust your settings
Go back to your home page in Interfaces and click on the Page options button icon in the top left-hand side of your screen.
Here you can adjust your page options and personalize the page name, meta title, and URL for your portal.
For more advanced settings, click the Gear icon in the top-left corner of your page.
Here you can give your interface a name and change your form's subdomain. This side panel is also where you can adjust your interface's theme (color and branding), insert a custom domain, set user access, or get a tracking ID.
Note: To unlock custom branding, set custom domains, and more, you'll need to upgrade to a premium or advanced account with Interfaces.
Step 3: Test out your portal
Once you've finished setting up your portal, don't forget to test all the links and make sure everything's working correctly. Click on the URL provided in the top-left corner of your interface.Â
This will take you to the front-end of your portal—what your customers will see. This is my finished portal:
Double-check to make sure all your links are working correctly. It's also a good idea to test out your ticket submission form, so you can see that the replies go where they need to go. Click on your ticket card link and drop in a few test answers to the form.Â
Now, thanks to the Zap that was set up, you should receive an email (the one associated with your Zapier account) to let you know that a customer submitted a ticket. Here's what it will look like:Â
Want to change who receives this email or add more people to the email thread?
To change who gets notified, just go back to your interface and click on the Zap listed under Zaps.Â
Your Zap will open in the Zap editor. Click Edit draft on the top right. Â
Click on the action step. Then inside the To field, you can change the email address or add a list of different email addresses, separated by commas. Here's an example:Â
Once you're happy with the way it looks, click Publish.Â
Now, remember you have a table which is linked to your ticket forms. Zapier Tables lets you store each form submission in an automation-powered database, so you can take action on each submission with Zaps.
Once you click on it, you'll be brought to your table, where you should be able to see your test answer.Â
Tip: You can share this table with your team members and anyone else at your company by clicking on Share in the top-right corner. To learn more about Zapier Tables, check out our feature guide.Â
If you click on your View Tickets tab, you'll also see that the response was sent to your Kanban board under Todo.
Whenever you change the status of an issue, it will automatically be updated in your table and vice versa.Â
Now that you've built your customer portal using Interfaces, you can share it with the world and start supporting your customers with their needs.Â
Tip: Add an AI chatbot to your customer portal
If you've built an AI chatbot using Interfaces before, you can also add the URL to a link card within your portal, so your users can chat with your AI bot and get the answers they need to support questions.Â
One of the great things about adding a chatbot component to your form is that you can also connect it to a custom data source (like your company documentation) to tailor your chatbot responses to your business. This is particularly helpful when it comes to customer support.Â
To add your AI chatbot to your portal, click Add Link within your home page.Â
Then start customizing your link card, the same way we outlined above.
Remember to include the link to your chatbot, which you'll find on your chatbot page in Interfaces. Once you've set this up, remember to click Done.Â
And there you have it, your chatbot will be an available resource within your customer support portal.Â
If you haven't built an AI chatbot before, don't worry, it's easy! We've outlined the specific steps in this tutorial, and you can build it—and connect it to a data source—in minutes.Â
Streamline your customer support with Zapier
With Zapier's automation platform, you can build solid resource hubs and customer support portals that do a great job of setting up your customers for success.Â
Whether they need help with a product or have run into troubleshooting issues, you can streamline your support process—from helping customers self-serve to transferring their tickets over to a specific support team member.Â
Related reading:
This article was originally published in June 2023. It was most recently updated in August 2024.