# React-embed

This is a handy wrapper around [@formsort/web-embed-api](https://github.com/formsort/oss/blob/master/packages/web-embed-api).

{% hint style="info" %}
Once you are finished writing your React-embed code, check out our [Setting up a dev environment](https://docs.formsort.com/publishing-and-deployment/embedding/setting-up-a-dev-environment) doc to begin testing the embed in your webpage.
{% endhint %}

## Installation

Add `@formsort/react-embed` to your project by executing `yarn add @formsort/react-embed` or `npm install @formsort/react-embed`.

## Usage

Here's an example of basic usage:

```jsx
import React from 'react';
import EmbedFlow from '@formsort/react-embed';

const EmbedFlowExample: React.FunctionComponent = () => (
  <div>
    <EmbedFlow
      clientLabel="formsort"
      flowLabel="onboarding"
      variantLabel="main"
      embedConfig={{
        style: {
          width: '100%',
          height: '100%',
        },
      }}
      // Event listener examples
      onFlowLoaded={() => {console.log("Flow has loaded!")}}
      onStepCompleted={(answers) => console.log(answers)}
      onFlowFinalized={(answers) => console.log(answers)}
    />
  </div>
);
```

#### Events

You can add event listeners to flows like `Flowloaded`, `redirect` etc. See [all event listeners](https://github.com/formsort/oss/tree/master/packages/web-embed-api#event-listeners).

#### Props

<table><thead><tr><th width="185">Prop name</th><th width="221">Description</th><th width="77">Req'd</th><th width="287">Example values</th></tr></thead><tbody><tr><td>clientLabel</td><td>client name</td><td>yes</td><td><code>formsort</code></td></tr><tr><td>flowLabel</td><td>flow name</td><td>yes</td><td><code>onboarding</code></td></tr><tr><td>variantLabel</td><td>variant name</td><td>no</td><td><code>main</code></td></tr><tr><td>responderUuid</td><td>responder uuid to load existing answers for</td><td>no</td><td><code>e4923baa-dc2d-4555-813c-a166952292fa</code></td></tr><tr><td>formsortEnv</td><td>formsort integrations environment label, if not using production</td><td>no</td><td><code>staging</code></td></tr><tr><td>queryParams</td><td>additional query params, to pre-populate answers in the form</td><td>no</td><td><code>[['name', 'Olivia'], ['age', '3']]</code></td></tr><tr><td>embedConfig</td><td>config passed to the underlying<br><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api"><code>formsortWebEmbed</code></a></td><td>no</td><td><code>{ style: { height: '100%' } }</code></td></tr><tr><td>onFlowLoaded</td><td><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowloaded-answers--key-string-any----void">event listener</a></td><td>no</td><td><code>() => { console.log('flow loaded') }</code></td></tr><tr><td>onFlowClosed</td><td><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowclosed-answers--key-string-any---void">event listener</a></td><td>no</td><td><code>() => { console.log('flow closed') }</code></td></tr><tr><td>onFlowFinalized</td><td><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api#flowfinalized-answers--key-string-any---void">event listener</a></td><td>no</td><td><code>() => { console.log('flow finalized') }</code></td></tr><tr><td>onStepLoaded</td><td><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api#steploaded-answers--key-string-any---void">event listener</a></td><td>no</td><td><code>() => { console.log('step loaded') }</code></td></tr><tr><td>onStepCompleted</td><td><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api#steploaded-answers--key-string-any---void">event listener</a></td><td>no</td><td><code>() => { console.log('step loaded') }</code></td></tr><tr><td>onRedirect</td><td><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api#redirect--url-string-answers--key-string-any-----cancel-boolean---undefined">event listener</a></td><td>no</td><td><code>(url: string) => { console.log('redirecting to:', url) }</code></td></tr><tr><td>onUnauthorized</td><td><a href="https://github.com/formsort/oss/tree/master/packages/web-embed-api#unauthorized---void">event listener</a></td><td>no</td><td><code>() => { console.log('ID token is missing or invalid.') }</code></td></tr></tbody></table>

## Loading a specific variant revision

You can use query parameters to load a specific variant revision. Do not use this if you want to show the latest variant.

```jsx
import React from 'react';
import EmbedFlow from '@formsort/react-embed';

const EmbedFlowExample: React.FunctionComponent = () => (
  <div>
    <EmbedFlow
      clientLabel="formsort"
      flowLabel="onboarding"
      variantLabel="main"
      queryParams={['variantRevisionUuid', '<uuidv4>']}
    />
  </div>
);
```