Package Exports

@formsort/react-embed
@formsort/react-embed/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@formsort/react-embed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@formsort/react-embed

Embed Formsort flows within react components.

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

Important note: This package is intended for use in React web applications. If you're looking to embed Formsort flows in React Native applications, please see React native embed guide.

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%',
        },
      }}
    />
  </div>
);

Events

You can add event listeners to flows like Flowloaded, redirect etc. See all event listeners

Props

Prop name	Description	Required	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. Don't use it if you want to show 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>
);