> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://typeform.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://typeform.ferndocs.com/_mcp/server.

# Modal Embeds

> Open typeforms in modal windows including popup, slider, sidetab, and popover options.

You can embed typeform in a modal window. The modal window will be displayed over your website. It is usually opened by user action such as clicking the button.

There are multiple modal embeds available:

* popup
* slider
* sidetab
* popover

## Popup

To embed as a popup via JavaScript:

```javascript
import { createPopup } from '@typeform/embed'
import '@typeform/embed/build/css/popup.css'

const { toggle } = createPopup('<form-id>')
document.getElementById('button').onclick = toggle
```

Or via HTML:

```html
<button data-tf-popup="<form-id>">open form</button>
<script src="//embed.typeform.com/next/embed.js"></script>
```

## Other modal embeds

If you want to use a different modal embed type use one of the methods below.

Slider:

```javascript
import { createSlider } from '@typeform/embed'
import '@typeform/embed/build/css/slider.css'
createSlider('<form-id>', options)
```

```html
<a data-tf-slider="<form-id>">click to open</a>
```

Side tab:

```javascript
import { createSidetab } from '@typeform/embed'
import '@typeform/embed/build/css/sidetab.css'
createSidetab('<form-id>', options)
```

```html
<div data-tf-sidetab="<form-id>" data-tf-button-text="click to open"></div>
```

Popover:

```javascript
import { createPopover } from '@typeform/embed'
import '@typeform/embed/build/css/popover.css'
createPopover('<form-id>', options)
```

```html
<div data-tf-popover="<form-id>"></div>
```

## Examples

You can find live editable examples in the embed-demo repository.

## What's next?

Learn about using hidden fields or see configuration options.

Or, if your embedded typeform isn't displaying the way you expected, check Troubleshooting and errors for solutions.