Loading
Loading
  • Home

  • Automation with Zapier

  • Zapier tutorials

Zapier tutorials

10 min read

How to create a customer support portal with Zapier Interfaces

By Elena Alston · February 8, 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, web pages, and apps, is an excellent way to build this kind of resource hub from scratch. You can connect your forms 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 portal using Interfaces—and show you how to take additional next steps to help support your customers. 

New to Zapier? It's workflow automation software that lets you focus on what matters. Combine user interfaces, data tables, and logic with 6,000+ apps to build and automate anything you can imagine. Sign up for free.

How to create a customer support portal 

Here's the quick version of how to create a request portal with Zapier Interfaces, though we'll go into more detail down below:

  • Go to the Interfaces dashboard

  • Click + Create

  • Click Customer portal, then the Request portal template

  • Customize your different portal pages

  • Customize your portal settings

  • Test out your customer support portal

You can use Zapier's pre-built request portal template, which enables your clients to seamlessly navigate and interact with different resources so that they can get the answers they're looking for. Offer a centralized hub where your customers can quickly create a support ticket, book a demo, read through FAQs, or get up to speed on the latest company news.

Before you begin

Make sure you have a Zapier account. Zapier Interfaces is a beta product. It's available for use but still in active development and may change. You can build your own interface today at interfaces.zapier.com.

Screenshot of Zapier Interfaces home page displaying a try free button

Step 1: Build your customer support portal in Interfaces

Let's start off with creating a resource/hub center from one of our pre-made templates. Head over to your interfaces dashboard. On the top-right corner of your screen, click + Create. 

Screenshot of create button in Interfaces interface.

Once you've done that, you'll see two options to choose from. Click the Customer portal option.

Next, scroll down and click Request portal.

Screenshot of request portal template in Interfaces

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. 

Screenshot of request portal 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 collect and store user tickets 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 portal's 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 include cards for users to 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 request portal edit

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 portal backend header

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 link cards editing

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

Screenshot of link card 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 link card details

Repeat the same process for each individual link card, tailoring your text as you go. The link URL is one of the most important parts for each of these cards, as this is what will dictate where each of your users go when they click on the link text (the CTA button). 

Screenshot of link URL in link card

Besides the ticket card, which already comes with an existing form for your users to submit their issues, the others require your personalized URL and will appear blank until you fill it in. So remember to add your links in, otherwise your CTA won't go anywhere. 

Screenshot of example link in link card

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 tab on the upper left-hand side of your screen. 

Screenshot of Submit Ticket tab

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 ticket forms

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 ticket form fields

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 data layout in interfaces

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 example Zap in actions

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 tab on the top menu bar of your interface. 

Screenshot of View Tickets tab in interfaces

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 kanban fields

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 settings icon in the left-hand panel. 

Screenshot of settings in interfaces

Here you can adjust your page options and personalize the page name, meta title, and URL for your portal. For more advanced settings, click Settings in the top-right corner of your page.

Screenshot of advanced settings in Interfaces

Provided you have premium access to Interfaces, you can change your portal's subdomain, adjust its appearance, use AI to generate themes, add logos, insert custom domains, and get a tracking ID.  

Screenshot of general settings

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 request portal URL

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 in interfaces

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

Screenshot of email Zap

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 email field in Zap

Once you're happy with the way it looks, click Publish

Now, remember you have a table which is linked to your ticket forms.

Screenshot of tickets in Interfaces

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.

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

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 Interfaces

With Zapier Interfaces, 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

  • Create a lead capture form with Zapier Interfaces

  • How to create a custom AI chatbot with Zapier Interfaces

  • How to create a free offer download form with Zapier Interfaces

  • 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 February 2024.

Get productivity tips delivered straight to your inbox

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

tags
mentioned apps

Related articles

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

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