Search
K
Links

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