# Pop-up

A modal dialog with a dimmed overlay. Open it from a click on a trigger button, automatically on page load, after a delay, or any combination of the above.

## Basic pop-up (button-triggered)

```html
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click here!'},'width':'800px','height':'600px','openingAnimation':{'entrance':'animate__fadeIn','exit':'animate__fadeOut'}}, 'https://eu.forms.app');"></script>
```

The `<button formsappId="...">` element is the visible trigger; the script styles it using the `button` option and opens the pop-up when it's clicked.

## Auto-open on page load

Add `autoOpen` with `'action':'onpageload'` to open the pop-up as soon as the page loads, alongside the button trigger:

```html
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click here!'},'width':'800px','height':'600px','autoOpen':{'action':'onpageload'},'openingAnimation':{'entrance':'animate__bounceIn','exit':'animate__bounceOut'}}, 'https://eu.forms.app');"></script>
```

## Auto-open after a delay

Use `'action':'aftersettime'` with `setTimeSeconds` to open the pop-up automatically after visitors have spent a few seconds on the page:

```html
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click here!'},'width':'800px','height':'600px','autoOpen':{'action':'aftersettime','setTimeSeconds':0},'openingAnimation':{'entrance':'animate__zoomIn','exit':'animate__zoomOut'}}, 'https://eu.forms.app');"></script>
```

## Without a trigger button

Omit both the `<button>` element and the `button` option to show only the automatically-opened pop-up, with no manual trigger on the page:

```html
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'popup', {'overlay':'rgba(45,45,45,0.5)','width':'800px','height':'600px','autoOpen':{'action':'aftersettime','setTimeSeconds':'4'},'openingAnimation':{'entrance':'animate__fadeIn','exit':'animate__fadeOut'}}, 'https://eu.forms.app');"></script>
```

## Options

| Option | Description |
|  --- | --- |
| `overlay` | Background dim color behind the modal, as an `rgba()` value. |
| `button.color` / `button.text` | Styling for the trigger button. Omit entirely for an auto-open-only pop-up. |
| `width` / `height` | Size of the modal. |
| `autoOpen.action` | `'onpageload'` or `'aftersettime'`. Omit to require a click on the trigger button. |
| `autoOpen.setTimeSeconds` | Delay in seconds before opening, used with `'aftersettime'`. |
| `openingAnimation.entrance` / `openingAnimation.exit` | An [animate.css](https://animate.style/) entrance/exit pair, for example `'animate__fadeIn'` / `'animate__fadeOut'`, `'animate__bounceIn'` / `'animate__bounceOut'`, or `'animate__zoomIn'` / `'animate__zoomOut'`. |


## What's next

- [Embed options](/embeds/embed-options) for the other layouts.
- [Examples](/embeds/examples) for React, Next.js, Vue, and Kotlin.