Add the support form to your site

The support form opens a ticket with the channel Web form and sends the visitor a “we got your message” email. The conversation then continues by email. It works whether Messenger is on or off.

Before you start

• A verified sending domain and a support address — see Set up support email.
• A public key with the Support form ability and your site on its list — see API keys and allowed sites.

Switch it on

1. Open Settings › Support settings › Form.
2. Under Put it on your site, pick your Public key. If it says “This key has no websites yet, so the form won’t show.”, click Add websites.
3. Set the fields, look and texts, and click Save changes.
4. Switch the form on with the toggle at the top of the tab (or on the Channels tab). It takes effect at once.

Put it on your site

The Put it on your site section offers three ways. Pick one; all three open the same form. Always copy the code from the app: it has your key and the right address.

Inside a page

The form appears where you put the empty box:

<div id="cc-support-form"></div>
<script src="https://widget.customercatalyst.io/v1/form.js" data-key="pk_…" data-target="#cc-support-form" async></script>

data-target points at the box. Without data-target (and without data-open), the form appears right where the script tag is pasted, as long as that is in the page body.

In Bubble, paste the code into an HTML element where the form should show, and turn Display in iframe off for that element. In Webflow, use an Embed element. In both, you can leave out data-target and the empty box: the form appears where the element is.

From my own button

The form opens as a popup when the visitor clicks your button:

<script src="https://widget.customercatalyst.io/v1/form.js" data-key="pk_…" data-open="#your-button-id" async></script>

Change #your-button-id to your button’s id. The popup closes with the × button or the Esc key.

Link only

A page we host for you, at an address like:

https://widget.customercatalyst.io/f/your-organization

Use it in emails, your app or your help site. You get the link after you save the form once; it is shown on the Form tab and on the Channels tab. The address stays the same.

The page shows your logo, a title (default “your organization’s name support”) and a line under it (default “We’ll reply by email.”). Change them under Look and texts › Page title and Line under the title. When the form is off, the page says “This form is closed right now.”

Look and texts

Under Look and texts on the Form tab. Empty texts use the default.

Field	Default
Title	Contact support
Description	Tell us what happened. We’ll reply by email.
Button	Send

Colour, logo, corners and font come from the General tab. The Form tab shows them with a Change in General link; see Appearance.

Your help site (General tab) adds one of these to the form:

• Show a link — a line above the form: “Looking for an answer? Search …”.
• Send there first — visitors first see “Most answers are on our help site.” with a button to your help site and a Contact support button that opens the form.
• Don’t show — nothing.

Note

After you save, the form on your site can take up to a minute to change.