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

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.') }`

Web-Embed API

Adding authentication

Last modified 4mo ago