> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brudcast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Show a form as a popup

> Install the site script once per website, then show any published form as a modal, slide in, banner or full screen popup with triggers, targeting and frequency.

A popup shows a published form over your own website: as a modal, a slide in card, a banner or
a full screen panel. You decide when it appears, who sees it, and how often.

**Screenshot coming soon**

A modal popup with a signup form over a website, with the page dimmed behind it

> [!NOTE]
>
> **Before you start:** the form must be published, and you need to be able to add one script tag
> to every page of your website, in its theme, its header code or a tag manager.

## How popups fit together

```mermaid theme={"system"}
flowchart LR
  W["Website: name, site addresses, site key"] --> S["site.js installed once on your site"]
  F["Published form"] --> P["Popup: format, trigger, audience, frequency"]
  W --> P
  S --> V["Visitor's browser decides when to show it"]
  P --> V
```

* A **website** is one site you own. It has a name, the addresses it runs on, and a site key.
* The **site script** is installed once per website. It loads every live popup for that website,
  so you never touch your site again to add, change or pause one.
* A **popup** connects one form to one website, with its own format and rules.

## Add a website

**1. Open Websites**

Go to **Contacts > Forms** and open **Websites**. Select **Add website**.

**2. Name it and list its addresses**

Enter a name, and every address the site runs on, such as `https://example.com` and
`https://www.example.com`. Use `https://` and the address only, without a path.

**3. Copy the install snippet**

Save, then copy the site script:

```html theme={"system"}
<script src="https://forms.brudcast.com/site.js" data-site="your_site_key" async></script>
```

**4. Install it on every page**

Paste it before `</head>` or `</body>` in your site's theme or header code. See the
[install guides](#install-on-your-site).

**5. Wait for Connected**

Open any page of your site. The website changes from **Waiting for the first visit** to
**Connected** once the script has loaded from one of its addresses.

### Site addresses

Brudcast only answers the site script on the addresses you list, so another site can't copy your
snippet and show your popups. A website can have up to 20 addresses.

`https://example.com` and `https://www.example.com` are different addresses, and so is a
staging copy on its own domain. Add every one the script runs on. A local address such as
`localhost` can't be added.

The script is safe to include twice, for example in your theme and in a tag manager. It only
runs once.

## Create a popup

Open the form, find the **Popup** section and add a popup. Pick the website it shows on, then go
through the four steps. The preview shows the real popup as you change it.

**Screenshot coming soon**

The popup editor on the Trigger step with After a delay selected and the live preview beside it

### Format

| Format | What it looks like |
| - | - |
| **Modal** | A centred card over a dimmed page |
| **Slide in** | A small card in a bottom corner, **Bottom right** or **Bottom left**. The page stays usable. |
| **Top banner** | A slim bar across the top of the page |
| **Bottom banner** | A slim bar across the bottom of the page |
| **Full screen** | Covers the whole page until it's closed |

You can add an image beside the form (left, right or above it). Images aren't shown in banners.
On screens narrower than 640px the image sits above the form.

Turn on the teaser to show a short line of text first, as a small pill at the bottom of the page.
The popup opens when the visitor selects it.

A modal or full screen popup keeps keyboard focus inside it until it closes. Every popup closes
with its close button or Escape, and a modal also closes when the visitor clicks the dimmed page.
Animations are switched off for visitors who ask their device for reduced motion.

### Trigger

| Trigger | Shows | Setting |
| - | - | - |
| **After a delay** | A number of seconds after the page loads | 0 to 300 seconds, 2 by default |
| **On scroll** | Once the visitor scrolls past part of the page | 1 to 100 percent, 50 by default |
| **On exit intent** | When the pointer heads for the browser bar | Desktop only, so it never shows on phones or tablets |
| **After inactivity** | When the visitor hasn't moved, scrolled or typed for a while | 5 to 600 seconds, 30 by default |
| **On click** | When the visitor clicks an element you name | A CSS selector, such as `#signup-button` or `.newsletter-link` |

An **On click** popup opens instead of following the clicked link.

### Audience

| Setting | Options |
| - | - |
| **Visitors** | **New visitors** (the default), **Returning visitors** or **Everyone** |
| **Devices** | **Desktop**, **Tablet** and **Mobile**, all on by default |
| **Pages** | Pages to show on and pages to never show on, each matched with **Is exactly**, **Contains** or **Starts with**. Up to 20 rules each. |
| **Source** | Only visitors whose link carries a given `utm_source`, or who came from an address containing some text |
| **Countries** | Only visitors from the countries you pick |

Some details:

* A visitor is new for the whole of their first visit, and returning after that.
* A screen narrower than 640px counts as mobile. A wider one is desktop with a mouse and tablet
  with touch.
* Page rules match the page's path, such as `/pricing`, ignoring capital letters and a trailing
  slash. You can paste a full address and only its path is used. With no pages to show on, the
  popup can show on every page. A page to never show on always wins.
* Brudcast works out the country from the visitor's connection. When it can't, a popup with
  countries set isn't shown.

### Frequency

| Setting | Default | Range |
| - | - | - |
| Hide after the visitor submits | On | |
| Show again after | 7 days | 0 to 365 days |
| Most times per visit | 1 | 1 to 10 |

Frequency is kept in the visitor's browser, so clearing site data or switching browsers starts
it again. An **On click** popup ignores the day and visit limits, since the visitor asked for it,
but still stays hidden after they submit. Only one popup is on screen at a time.

A popup never shows to a visitor who arrives from a Brudcast confirmation page, so someone who
just confirmed their signup isn't asked again.

## Publish, pause and measure

A new popup is a **Draft**. Select **Publish** to make it **Live**, and **Pause** to stop it
without losing its settings. A popup can only go live while its form is published.

Each popup counts:

* **Impressions:** the popup or its teaser appeared
* **Submissions:** the form was submitted from the popup
* **Closes:** the visitor dismissed it
* **Conversion rate:** submissions divided by impressions

## A/B test a popup

Create a variant from a popup to test two versions against each other, such as a different
format, image or trigger. Each visitor is assigned one side at random, half and half, and keeps
seeing the same side.

Compare the conversion rates once each side has at least 100 impressions, then pause the one that
loses. Brudcast doesn't pick a winner for you.

## Install on your site

> **[Google Tag Manager](/forms/install/google-tag-manager.md)**

> **[WordPress](/forms/install/wordpress.md)**

> **[Shopify](/forms/install/shopify.md)**

> **[Webflow](/forms/install/webflow.md)**

> **[Wix](/forms/install/wix.md)**

> **[Squarespace](/forms/install/squarespace.md)**

## Troubleshooting

> **The website stays on Waiting for the first visit**
>
> **Why:** the script isn't on the page, or the page's address isn't in the website's list.
> **Fix:** view the page source and look for `site.js`. Check the exact address in your browser,
> including `www.`, and add it to the website.

> **The popup never appears**
>
> **Why:** it isn't **Live**, its form isn't published, the audience rules exclude you, or you
> already saw it. **Fix:** check the status, then test in a private window, which starts as a
> new visitor with no frequency history.

> **An On exit intent popup doesn't show on my phone**
>
> **Why:** exit intent needs a mouse, so it only runs on desktop. **Fix:** use **On scroll** or
> **After inactivity** in a second popup for mobile visitors.

> **A country targeted popup shows to no one**
>
> **Why:** visitors whose country can't be read never see a popup with countries set.
> **Fix:** remove the countries, or accept that some visitors won't see it.

## Related

> **[Embed a form](/forms/embed-a-form.md)**
>
> Put a form inside a page instead.

> **[Submissions and responses](/forms/submissions-and-responses.md)**
>
> See what your popups collect.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.