React-embed

Embed Formsort flows within react components.

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

Once you are finished writing your React-embed code, check out our Setting up a dev environment doc to begin testing the embed in your webpage.

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%',
        },
      }}
      // 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.

Props

Prop nameDescriptionReq'dExample 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

no

() => { console.log('flow loaded') }

onFlowClosed

no

() => { console.log('flow closed') }

onFlowFinalized

no

() => { console.log('flow finalized') }

onStepLoaded

no

() => { console.log('step loaded') }

onStepCompleted

no

() => { console.log('step loaded') }

onRedirect

no

(url: string) => { console.log('redirecting to:', url) }

onUnauthorized

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. Do not use this if you want to show the 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>
);

Last updated