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 name	Description	Req'd	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. 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>
);