Configuration

You can configure your embed by setting different options.

In JavaScript you pass options as an object:

import { createWidget } from '@typeform/embed'
import '@typeform/embed/build/css/widget.css'
const options = {
  // TODO: define your embed options here, see below
}
createWidget('<form-id>', options)

If you embed via HTML, you need to pass optinos as attributes with data-tf- prefix:

<a data-tf-popup="<form-id>" data-tf-size="50" data-tf-hide-footer>open</a>
<script src="//embed.typeform.com/next/embed.js"></script>

Available options

options is an object with optional properties:

Options in plain HTML embed

To embed via HTML without writing JavaScript code, use data-tf-widget="<form-id>" for widget embed. You can define options as data attributes with data-tf- prefix and dashes in name (eg. autoFocus becomes data-tf-auto-focus). For example:

<div data-tf-popup="<form-id>" data-tf-size="50" data-tf-hide-footer></div>
<script src="//embed.typeform.com/next/embed.js"></script>

To set different option types:

• set a boolean property to true by omitting attribute value, (eg. <div ... data-tf-disable-footer></div>
• pass function name for callbacks, eg. data-tf-on-ready="myReadyFunction" if this function is available on global scope (eg. window)
• to pass string[] use coma-separated string, eg. transitiveSearchParams: ['foo', 'bar'] becomes data-tf-transitive-search-params="foo,bar"
• to pass object pass coma-separated key=value pairs, eg. hidden: { foo: "f", bar: "b" } becomes data-tf-hidden="foo=f,bar=b"

Custom Launch Options

You can open modal embed types (all except widget) based on user actions.

Properties open and openValue define when to automatically open the typeform. If you wish to prevent automatically re-opening the typeform you can set preventReOpenOnClose.

• on page load
  • open: 'load'
  • openValue leave undefined (not used)
• when user tries to leave the page
  • open: 'exit'
  • openValue specify the sensitivity threshold
  • To detect user is trying to exit the page we detect upwards mouse movement in top part of the website. The threshold defines height of this area. Usefull when you have navigation in top part of your website and mouse movement in that area does not necessarily indicate exit intent.
• when a user scrolls the page
  • open: 'scroll'
  • openValue percentage of page scrolled (0 - 100) to open the form
• after time elapsed
  • open: 'time'
  • openValue number of milliseconds to wait before opening the form

To open a typeform in popup 1 minute after the page is loaded you can use this JavaScript code:

import { createPopup } from '@typeform/embed'
import '@typeform/embed/build/css/popup.css'
createPopup('<form-id>', {
  open: 'time',
  openValue: 60000,
  preventReopenOnClose: true,
})

Or in HTML:

<a data-tf-popup="<form-id>" data-tf-open="time" data-tf-open-value="60000" data-tf-prevent-reopen-on-close></a>
<script src="//embed.typeform.com/next/embed.js"></script>

You can read more about this feature in our Help Center.

Custom icon

Custom icon provided string supports:

• URL (used as an img src)
• Text and Emojis
• HTML Markup

Redirect Target

You can supply a target for typeform redirect (on submit or via ending). It works the same as target for anchor HTML element:

• _parent (default), opens in parent page
• _self opens in the same embedded iframe as your typeform
• _top opens in current browser tab (same as _parent unless there are multiple nested iframes)
• _blank opens in new tab, however it might be blocked by popup blockers.

⚠️ Warning: Target _blank is not working in Safari (both desktop and mobile) and triggers a popup warning in Chrome on Android. It works in Chrome and Firefox on desktop.

Chaining typeforms

You can chain multiple typeforms inside an embed. You need to setup a redirect to another typeform:

• make sure to use URL with typeform.com domain in case you have a custom domain set up
• set redirectTarget / data-tf-redirect-target to _self to make the redirect inside the embed iframe

When you chain multiple typeforms they will be all displayed inside the embed and all embed options and callbacks will be preserved. You can use formId in the callback payload to identify which form is currently displayed.