Support Portals

A support portal is a branded help page for your customers. This guide covers sharing a portal by link, embedding it in your own website, the embed's display options and theme, and how the forms inside it report mistakes.

What a Support Portal Is

A portal groups your web forms into categories, and can suggest knowledge base articles before a customer submits a request. Every request sent through it becomes a ticket, the same as a form submitted anywhere else.

You create and publish portals in Admin > Channels > Support Portals. A portal shows nothing to customers until you publish it.

Sharing a Portal

Select Use this portal on the portal's row. The dialog gives you two ways to reach it.

The link opens the portal as a full page. Use it in a help menu, a support button, an email signature or an auto-reply.

Embed on Your Website

The embed places the portal inside one of your own pages. Copy the code from the dialog and paste it where the portal should appear:

<link rel="preconnect" href="https://<your-portal-host>">
<link rel="preconnect" href="https://<your-rapidesq-api-host>" crossorigin>
<div data-rapidesq-portal></div>
<script
  src="https://<your-portal-host>/portal.js"
  data-tenant-slug="your-company"
  data-portal-slug="help-center"
  data-api-url="https://<your-rapidesq-api-host>"
  async>
</script>

Always copy the code from the dialog rather than typing it, because the addresses differ by region. The script loads the latest portal every time, so you never need to paste it again after an update. The <link rel="preconnect"> lines let the browser connect to the portal and API hosts while the rest of your page loads.

Link only

A portal that signs customers in through your company's identity provider is shared by link only, because that sign-in returns to the portal's own page.

How an Embedded Portal Fits Your Page

An embedded portal is exactly as tall as its content. It does not fill the browser window, and your page continues directly beneath it. It paints no background of its own unless its theme sets one, and it adds no side margins: the container you paste decides the width and spacing. To give it a background or spacing of its own, style the container:

<div data-rapidesq-portal style="background: #f5f7fa; padding: 24px;"></div>

The full-page portal link is unchanged and still fills the window.

Display Options

The Use this portal dialog has a Display options section. Each option changes the embed code, so copy the code again after changing one. Both can be used together.

A portal whose only content is one form opens directly on that form, by link and by embed, with no option to set. Sign-in, My requests and article suggestions stay where they are.

Matching Your Site

A portal has a theme: background, surface, text color, corner radius, maximum width, and whether it uses your page's font. It is set in three places, and a later one wins field by field:

  1. The portal's saved theme, in the portal editor.
  2. This placement's look, chosen in the Use this portal dialog and written into the snippet as data-theme-* attributes.
  3. Your own stylesheet, through CSS custom properties on the container: --rapidesq-portal-bg, --rapidesq-portal-surface, --rapidesq-portal-text, --rapidesq-portal-radius, --rapidesq-portal-max-width and --rapidesq-portal-font.

Colors are hex values; the radius is 0–32 pixels and the maximum width 320–1600 pixels. Text stays readable whatever the theme says: a text color that would not read against the background or surface is replaced with one that does, and the editor tells you when that will happen. The forms inside a portal take on the portal's look.

How Forms Report Mistakes

When a customer submits a form with a required field empty, or with an email address that is not valid, the form sends nothing. It shows a short message under each field that needs attention, using the field's own label, and moves the cursor to the first one. Messages appear in the customer's browser language when it is English, German, Spanish, French, Portuguese or Chinese, and in English otherwise. Screen readers announce the problem and read each field's message. A form embedded on its own behaves the same way.