# typeform-elements

> Custom elements for easy use of Typeform

Latest version **2.0.0** (published 2022-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install typeform-elements
pnpm add typeform-elements
yarn add typeform-elements
bun add typeform-elements
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2022-02-14 |
| First published | 2019-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 267.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | picsoung |
| Keywords | typeform, components, elements, web components, custom elements |

## Links

- npm: https://www.npmjs.com/package/typeform-elements
- Repository: https://github.com/Typeform/typeform-elements
- Homepage: https://developer.typeform.com/
- Issues: https://github.com/Typeform/typeform-elements/issues
- npm.io page: https://npm.io/package/typeform-elements

## Dependencies (2)

- [lit](https://npm.io/package/lit.md) ^2.1.3
- [@typeform/embed](https://npm.io/package/@typeform/embed.md) ^1.28.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2022-02-14
- 1.2.0 — 2021-01-13
- 1.1.1 — 2020-08-24
- 1.1.0 — 2020-08-24
- 1.0.1 — 2020-04-02
- 1.0.0 — 2019-10-25
- 0.6.0 — 2019-09-01
- 0.5.0 — 2019-08-16
- 0.4.2 — 2019-08-11
- 0.4.1 — 2019-06-21
- 0.4.0 — 2019-06-19
- 0.3.2 — 2019-06-19
- 0.3.0 — 2019-06-05
- 0.2.2 — 2019-04-16
- 0.2.1 — 2019-04-09
- … 2 more at https://npm.io/package/typeform-elements/versions

## README

# typeform-elements

[![npm version](https://badge.fury.io/js/typeform-elements.svg)](https://badge.fury.io/js/typeform-elements)

Custom elements for easy use of Typeform

## Table of Contents

* [Downloading Typeform Elements](#downloading-typeform-elements)
* [Elements](#elements)
* [Contributing](#contributing)

## Downloading Typeform Elements

You can install Typeform Elements via npm:

```shell
npm install typeform-elements
```

Or you can use Typeform Elements via CDN:

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

```javascript
import 'typeform-elements';

// or

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

## Elements

* [Login](#login)
* [Embed](#embed)

### Login

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](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](https://developer.typeform.com/get-started/scopes/).

#### CDN

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

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

#### Usage

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

#### Example

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

#### `TypeformLogin` (`<typeform-login>`) Attributes

|Attribute|Required|Description|Type|Default|
|--- |--- |--- |--- |--- |
|`client-id`|`true`|The id of the application that asks for authorization.|`String`|`null`|
|`redirect-uri`|`true`|A successful response from results in a redirect to this URL.|`String`|`null`|
|`scope`|`true`|List of permissions that the application requires. Ensure list is in comma separated format, like so: `accounts:read,forms:read`|`String`|`null`|
|`state`|`false`|An opaque value, used for security purposes. If this request parameter is set in the request, then it is returned to the application as part of the `redirect_uri`.|`String`|`null`|

### Embed

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

#### CDN

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

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

#### Usage

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

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

#### Example

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

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

#### Attributes

|Attribute|Required|Description|Type|Default|
|--- |--- |--- |--- |--- |
|`url`|`false`|URL of Typeform, if no URL provided `formId` must be provided.|`String`|`null`|
|`formId`|`false`|Form ID of Typeform, if no form ID provided `url` must be provided.|`String`|`null`|

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.](https://developer.typeform.com/embed/configuration#available-options)

## Contributing

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](CONTRIBUTING.md) for how commit messages should be structured.

---
_Source: https://npm.io/package/typeform-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._