# Add the support form to your site

> Put the form inside a page, open it from your own button, or link to the hosted page.

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](/support/email-setup/).
- A public key with the **Support form** ability and your site on its list — see [API keys and allowed sites](/settings/api-keys/).

## 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:

```html
<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:

```html
<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](/support/messenger/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.
:::