Developers

Open typeform in modal window

You can embed typeform in a modal window. The modal window will be displayed over your website. It is ussually 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:

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:

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

import { createSlider } from '@typeform/embed'
import '@typeform/embed/build/css/slider.css'
createSlider('<form-id>', options)
<a data-tf-slider="<form-id>">click to open</a>

Side tab:

import { createSidetab } from '@typeform/embed'
import '@typeform/embed/build/css/sidetab.css'
createSidetab('<form-id>', options)
<div data-tf-sidetab="<form-id>" data-tf-button-text="click to open"></div>

Popover:

import { createPopover } from '@typeform/embed'
import '@typeform/embed/build/css/popover.css'
createPopover('<form-id>', options)
<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.