React-embed
Embed Formsort flows within react components.
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.
Add
@formsort/react-embed
to your project by executing yarn add @formsort/react-embed
or npm install @formsort/react-embed
.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>
);
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 | 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.') } |
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 modified 4mo ago