⚠️ This library hasn't been maintained for a while so we've decided to deprecate it and archive the repository. Please use embed instead.

Custom elements for easy use of Typeform

• Downloading Typeform Elements
• Elements
• Contributing

You can install Typeform Elements via npm:

npm install typeform-elements

Or you can use Typeform Elements via CDN:

<script src="https://unpkg.com/typeform-elements/dist/typeform-elements.js"></script>

If you do use this library from NPM be sure to import it somewhere in your JS code:

import 'typeform-elements';

// or

import { /* Whatever component(s) you want */ } from 'typeform-elements';

• Login
• Embed

Add the button code to your application and configure it to work with the link that redirects users to the Typeform login screen (https://api.typeform.com/oauth/authorize) so they can log in to their Typeform accounts and grant access to your app via OAuth 2.0 scopes.

You can use the login element via CDN without needing to import all of the Typeform Elements.

<script src="https://unpkg.com/typeform-elements/dist/login.js"></script>

<typeform-login client-id="{your_client_id}" scope="{comma_separated_scopes}" redirect-uri="{your_redirect_uri}" state="{optional_state}"></typeform-login>

<typeform-login client-id="1234567890" scope="accounts:read,forms:read" redirect-uri="https://results-example.herokuapp.com/callback"></typeform-login>

Easily display forms as elements on your page as a standard embeded form, a full page embeded form, and a pop up form.

You can use the login element via CDN without needing to import all of the Typeform Elements.

<script src="https://unpkg.com/typeform-elements/dist/embed.js"></script>

<typeform-widget url="{typeform_url}"></typeform-widget>

<typeform-popup formId="{typeform_form_id}"></typeform-popup>

<typeform-widget url="https://admin.typeform.com/to/PlBzgL"></typeform-widget>

<typeform-popup formId="PlBzgL"></typeform-popup>

All elements have the following attributes: autoClose, buttonText, chat, height, hideFooter, hideHeaders, opacity, width.

All elements emit the following events: submit.

Please read more about them here.

All code should pass tests, as well as be well documented. Please open PRs into the dev branch. Please also see the Commit Message Guidelines for how commit messages should be structured.