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="//"></script>

Available options

options is an object with optional properties:

containerHTMLElementspecify element to place the embed into, only for widget, requiredcurrent element when embedding as HTML, otherwise undefined
positionstringslider position: right or leftright
sizenumbersize of the popup in percentage100 (100% size, fullscreen popup)
widthnumberwidth of the embed in pixels (for popup you can specify size instead)undefined
heightnumberheight of the embed in pixels, supported by all embeds except slider (for popup you can specify size instead)undefined
hiddenobjecthidden fields to be passed to the form in URL hashundefined
trackingobjecttracking parameters to be passed to the form in URL query stringundefined
domainstringdomain name of the environment the SDK should run against""
sourcestringdomain name of the site using the SDKdomain name from window.location
mediumstringname of the plugin built on top of the SDK"embed-sdk"
mediumVersionstringversion of the plugin built on top of the SDK"next"
transitiveSearchParamsstring[]search parameters to be forwarded from host page to formundefined
hideFooterbooleanhide form progress bar and navigation buttonsfalse
hideHeadersbooleanhide header that appears when you have a question group, or a long questionfalse
opacitynumberform background opacity, number from 0 (fully transparent) 100 (fully opaque)100
autoFocusbooleanenable form auto focus when loadedfalse
openstringopen embed based on user action (see below)undefined
openValuenumberbased on open (see below)undefined
preventReopenOnClosebooleanprevent automatically re-opening the typeformfalse
enableSandboxbooleanenable sandbox mode (disables submissions and tracking)false
buttonTextstringcustomize the button text (sidetab only)"Launch me"
customIconstringcustomize the message icon (popover, sidetab) more infoundefined
tooltipstringdisplay tooltip text next to the button (popover only)undefined
notificationDaysnumberdisplay red notification dot, hide for given number of days since popover is open (popover only)undefined
autoClosenumber / booleantime (ms) until the embedded typeform will automatically close after a respondent clicks the Submit button. (all embeds except widget)undefined
onReadyfunctionfires when the form is loadedundefined
onStartedfunctionfires on the "submission start" event, contains responseId in the payloadundefined
onSubmitfunctionfires when user submits the formundefined
onClosefunctionfires when the form is closed (when opened in modal window)undefined
onQuestionChangedfunctionfires when user navigates between form questionsundefined
onHeightChangedfunctionfires when form question height changes (eg. on navigation between questions or on error message)undefined
onEndingButtonClickfunctionfires when button on ending screen is clickedundefined
autoResizestring / booleanresize form to always fit the displayed question height, avoid scrollbars in the form (inline widget only), set min and max height separated by coma, eg. "200,600"false
shareGaInstancestring / booleanshares Google Analytics instance of the host page with embedded typeform, you can provide your Google Analytics ID to specify which instance to share (if you have more than one in your page)false
inlineOnMobilebooleanremoves placeholder welcome screen in mobile and makes form show inline instead of fullscreenfalse
iframePropsobjectHTML attributes to be passed directly to the iframe with typeformundefined
buttonPropsobjectHTML attributes to be passed directly to the button created by embed SDK (only for popover and sidetab)undefined
lazybooleanenable lazy loading (for widget only), typeform starts loading when user scrolls to it, see demofalse
keepSessionbooleanpreserve form state when modal window is closed (and re-opened)false
redirectTargetstringtarget for typeforms with redirect, valid values are _self, _top, _blank or _parent (see docs on anchor target)_parent
disableScrollbooleandisable navigation between questions via scrolling and swipingfalse
preselectobjectpreselect answer to the first question (more info in help center)undefined
respectOpenModalsall / samedo not open if there already is a modal with typeform open (same - same form, all - any form)undefined

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="//"></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="//"></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 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.