@typeform/embed

What is @typeform/embed?

@typeform/embed is an npm package that allows you to easily embed Typeform forms into your web applications. It provides various methods to integrate Typeform forms, including pop-ups, sliders, and inline embeds, making it versatile for different use cases.

What are @typeform/embed's main functionalities?

Inline Embed

This feature allows you to embed a Typeform directly into a specified container on your webpage. You need to provide the Typeform ID and the container element where the form should be rendered.

const { createWidget } = require('@typeform/embed');

createWidget('YOUR_TYPEFORM_ID', {
  container: document.querySelector('#typeform-container')
});

Popup Embed

This feature allows you to create a Typeform that opens in a popup when triggered. You need to provide the Typeform ID and set up an event listener to open the popup.

const { createPopup } = require('@typeform/embed');

const openPopup = createPopup('YOUR_TYPEFORM_ID');

document.querySelector('#open-popup-button').addEventListener('click', () => openPopup());

Slider Embed

This feature allows you to create a Typeform that slides in from the side of the screen. You need to provide the Typeform ID and set up an event listener to open the slider.

const { createSlider } = require('@typeform/embed');

const openSlider = createSlider('YOUR_TYPEFORM_ID');

document.querySelector('#open-slider-button').addEventListener('click', () => openSlider());

Other packages similar to @typeform/embed

react-typeform-embed

react-typeform-embed is a React component library for embedding Typeform forms in React applications. It offers similar functionalities to @typeform/embed but is specifically designed for React, making it easier to integrate into React projects.

typeform

typeform is another npm package that provides a JavaScript API for interacting with Typeform forms. It offers more advanced functionalities like form creation and response retrieval, which are not available in @typeform/embed.

surveyjs

surveyjs is a library for creating surveys and forms, similar to Typeform. It offers a wide range of customization options and supports various frameworks like React, Angular, and Vue. While it is not specifically for Typeform, it provides similar functionalities for creating and embedding forms.

README

Embed

Typeform/embed is the client-side script and a CommonJS module that allows you to integrate a typeform into your website easily.

If you are searching for a backend integration with the embed take a look into here.

In case that you are not comfotable with Front end Development you can use the code snippet that we provide in our platform

Getting Started

Installation

We recommend to use npm as your package manager, and also a build tool like webpack or browserify in order to use it.

npm install --save @typeform/embed

If you're not, you can still use it with our CDN:

<script src="https://embed.typeform.com/embed.js"></script>
<!-- this script exposes the API to `window.typeformEmbed` -->

Usage

// Using ES6 imports
import typeformEmbed from '@typeform/embed'
// or require
const typeformEmbed = require('@typeform/embed')

Types of Embed

Widget

Use a widget to embed a typeform inside any HTML element on your page

typeformEmbed.makeWidget(element, url, options)

• element: the DOM element that the widget will be appended to

• url: typeform's URL (like: https://admin.typeform.com/to/PlBzgL)

• options: Object with the optional parameters:

  option	description	values	default
  opacity	You can make your typeform's background totally transparent, or opaque. (For example, to have a video as a background)	Number	100
  buttonText	The button text that appears on mobile in order to open the typeform.	String	"Start"
  hideScrollbars	Hide fixed scrollbars.	Boolean	false
  hideFooter	Hide typeform footer, that appears showing the progress bar and the navigation buttons.	Boolean	false
  hideHeaders	Hide typeform header, that appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice block.	Boolean	false
  onSubmit	Callback function that will be executed right after the typeform is successfully submitted.	Function	-

  Example:

  // Here we are getting an existing element on your HTML
  const embedElement = document.querySelector('.js-typeform-embed')
  
  typeformEmbed.makeWidget(
    embedElement,
    'https://admin.typeform.com/to/PlBzgL',
    {
      opacity: 55,
      buttonText: "Answer this!",
      hideScrollbars: true,
      onSubmit: function () {
        console.log('Typeform successfully submitted')
      }
    }
  )
  

Popup

Use a popup to embed the typeform in a modal window.

typeformEmbed.makePopup(url, options)

• url: typeform's URL (like: https://admin.typeform.com/to/PlBzgL)

• options: Object with the optional parameters:

  option	description	values	default
  mode	The way of showing the embed	String any of: "popup" "drawer_left" "drawer_right"	"popup"
  autoOpen	Your typeform will launch as soon as your web page is opened	Boolean	false
  autoClose	Time until the embedded typeform will automatically close after a respondent clicks the Submit button. The default time is 5 seconds. PRO+ users can change the autoClose time.	Number (seconds)	-
  hideScrollbars	Hide fixed scrollbars.	Boolean	false
  hideFooter	Hide typeform footer, that appears showing the progress bar and the navigation buttons.	Boolean	false
  hideHeaders	Hide typeform header, that appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice block.	Boolean	false
  drawerWidth	Specify the width of the drawer (only applies if using mode "drawer_left" or "drawer_right").	Number (pixels)	800
  onSubmit	Callback function that will be executed right after the typeform is successfully submitted.	Function	-

  Example:

  typeformEmbed.makePopup(
    'https://admin.typeform.com/to/PlBzgL',
    {
      mode: 'drawer_left',
      autoOpen: true,
      autoClose: 3,
      hideScrollbars: true,
      onSubmit: function () {
        console.log('Typeform successfully submitted')
      }
    }
  )
  

Troubleshooting

An element in my page is over the typeform

For the modal modes (popup, drawer and mobile), we use a z-index of 1000 by default. Take this into account when you want an element to be over or under the typeform modal.

When loading a typeform in mobile, a screen with the typeform name and a 'Start' button appears before the typeform

To get the best experience, on mobile all embedded typeforms are oppened in a fullscreen modal. The popup type behaves as expected, but a widget on mobile has an additional screen to launch the modal. This screen includes the typeform title and a button to lanch the typeform itself.

If you want to override this behaviour, the best option is to use the API with makePopup to open the typeform modal when you decide.

After opening a typeform in mobile, a <meta name="viewport"> tag is added to the document

This tag is needed for the correct visualization of the typeform. This is only a problem if you don't have this tag in your site.

Transparency is not applied on mobile

We do not apply transparency on modals, and all embed types behave like a modal in mobile.

Typeform does not look good with a small embed

Although we have no hard limit, we recommend having a height of at least 350px.

Typeform not visible after pressing 'Start' in mobile

We use position: fixed to position our modal relative to its containing block established by the viewport. If one of the modal ancestors has a transform, perspective, or filter css property set to something other than none the positioning will be relative to it and probably not visible by the user.

Feedback

We are always open to your feedback.

Contribution

We'd love to have your helping hand on typeform's embed. See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Device support

• last 2 versions of major devices
• internet explorer >= 9
• safari >= 7

Browserlist support