• Home

  • Automation with Zapier

  • Zapier tutorials

Zapier tutorials

10 min read

How to create a customer support portal with Zapier

By Elena Alston · August 21, 2024

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

  • Step 1: Build your customer support portal

  • Step 2: Customize your customer support portal

  • Step 3: Test out your customer support portal

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.

Screenshot of Interfaces home page

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 Template Preview Image
Request Portal Template
A simple request portal. Create support tickets and view tickets in a Kanban view.
Try it

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. 

Screenshot of pages within your interface

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. 

Screenshot of home page layout in Interfaces

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. 

Screenshot of request portal template

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. 

Screenshot of edit button next to request portal

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: 

Screenshot of content options in interfaces

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. 

Screenshot of quick links

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. 

Screenshot of quick links in interfaces

First up, click into the Header field and add your copy. I'm changing mine to "Resources & support". 

Screenshot of resources and support header

To edit the text within each link card detail, click on the pencil icon under Links

Screenshot of pencil icon

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. 

Screenshot of create ticket link card details

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. 

Screenshot of adding links to link card

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. 

Screenshot of drag and drop icon in Interfaces

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.

Screenshot of submit ticket layout

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.  

Screenshot of edit button next to form fields

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. 

Screenshot of form fields editing cards

To edit the text within your questions, click on the pencil icon under Fields

Screenshot of pencil icon in form 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.  

Screenshot of field settings in Interfaces

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. 

Screenshot of conditional logic field setting up

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:

Screenshot of logic conditions in form fields

Now let's set up the condition. Click +Add condition

Screenshot of add condition button

Next, under Field, select the previous question you want to add conditional logic to.

Screenshot of new logic field added to form

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: 

Screenshot of a conditionally rendered question in Interfaces forms.

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). 

Screenshot of linked table

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. 

Screenshot of actions in Interfaces

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: 

Screenshot of Zap in Zap editor

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.

Screenshot of view tickets layout on interface 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. 

Screenshot of kanban view

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.

Screenshot of content on kanban tickets

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.

Screenshot of page options button

Here you can adjust your page options and personalize the page name, meta title, and URL for your portal.

Screenshot of page options

For more advanced settings, click the Gear icon in the top-left corner of your page.

Screenshot of settings icon

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. 

Screenshot of public URL link

This will take you to the front-end of your portal—what your customers will see. This is my finished portal:

Screenshot of live 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. 

Screenshot of ticket sample

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: 

Screenshot of email sample

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

Screenshot of Zaps

Your Zap will open in the Zap editor. Click Edit draft on the top right.  

Screenshot of edit draft

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: 

Screenshot of zap set up part

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.

Screenshot of tables link

Once you click on it, you'll be brought to your table, where you should be able to see your test answer. 

Screenshot of table layout with test data filled in

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.

Screenshot of tickets layout

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. 

Screenshot of adding new link cards

Then start customizing your link card, the same way we outlined above.

Screenshot of AI chatbot link card

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. 

Screenshot of finished AI chatbot

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:

  • Guide to Zapier Interfaces

  • How to build an automated system on Zapier

  • Create a lead capture form with Zapier

  • How to create a custom AI chatbot with Zapier

  • Zapier Tables: A better way to store (and use) your data

This article was originally published in June 2023. It was most recently updated in August 2024.

Get productivity tips delivered straight to your inbox

We’ll email you 1-3 times per week—and never share your information.

tags

Related articles

Improve your productivity automatically. Use Zapier to get your apps working together.

Sign up
See how Zapier works
A Zap with the trigger 'When I get a new lead from Facebook,' and the action 'Notify my team in Slack'