@formsort/react-embed

Embed Formsort flows within react components.

This is a handy wrapper around @formsort/web-embed-api.

Important note: This package is intended for use in React web applications. If you're looking to embed Formsort flows in React Native applications, please see React native embed guide.

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:

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%',
        },
      }}
    />
  </div>
);

Events

You can add event listeners to flows like Flowloaded, redirect etc. See all event listeners

Props

| Prop name | Description | Required | Example values | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------- | | clientLabel | client name | yes | formsort | | flowLabel | flow name | yes | onboarding | | variantLabel | variant name | no | main | | responderUuid | responder uuid to load existing answers for | no | e4923baa-dc2d-4555-813c-a166952292fa | | formsortEnv | formsort integrations environment label, if not using production | no | staging | | queryParams | additional query params, to pre-populate answers in the form | no | [['name', 'Olivia'], ['age', '3']] | | embedConfig | config passed to the underlying FormsortWebEmbed | no | { style: { height: '100%' } } | | onFlowLoaded | event listener | no | () => { console.log('flow loaded') } | | onFlowClosed | event listener | no | () => { console.log('flow closed') } | | onFlowFinalized | event listener | no | () => { console.log('flow finalized') } | | onStepLoaded | event listener | no | () => { console.log('step loaded') } | | onStepCompleted | event listener | no | () => { console.log('step loaded') } | | onRedirect | event listener | no | (url: string) => { console.log('redirecting to:', url) } | | onUnauthorized | event listener | no | () => { console.log('ID token is missing or invalid.') } |

Loading a specific variant revision

You can use query parameters to load a specific variant revision. Don't use it if you want to show latest variant.

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>
);