Formsort flows may be embedded within other web pages.

Embed snippet

After deploying a flow, you will be shown both the direct link as well as embed options:

Pasting the snippet shown in this page into your HTML, or using a tag manager like Google Tag Manager or segment.

Styles

Modal

If embedded as a modal, the flow will load above the rest of your page content.

Inline

If embedded inline, the flow will be mounted at the element that you provide using a CSS selector.

Popover

If embedded as a popover, the flow will be shown at one of the corners of the screen, as an overlay.

Load immediately

If load immediately is checked, then the flow will immediately load and be shown to the responder.

If unchecked, you will need to call _formsort.load() when you wish to display the flow.

More control: Web Embed API

The Formsort web embed API provides more control over the Formsort embed.

Most importantly, it provides lifecycle event callbacks corresponding to the analytics events.

One use of this would be listening for flowfinalized, which is dispatched when the flow is finalized, in order to remove the element in which the form is rendered, or to show custom congratulations content to your responder.

Embedding forms using React

The Formsort React component allows for use of a Formsort flow within a React render tree, in addition to providing more lifecycle callbacks.

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

Considerations

Embedding a flow within a larger page can be easy to set up, but has some caveats:

Scrolling

If your flow has long steps with many questions, the flow may be vertically taller than the viewport's size and consequently will display with scroll bars.

If the embedding page itself also has scrolling, this can result in a detrimental user experience, as browsers sometimes cannot correctly identify which content the user intends to scroll.

URL navigation

When a responder is visiting a standalone flow on a custom domain, Formsort controls the URL, and therefore URL navigation. Especially with mobile swipe gestures, users expect the back and forward buttons to work, so if you are embedding a longer flow within another page, consider using a custom domain instead.

Loading performance

When using an embed, the embed script must first load, which only then starts loading the flow, requiring an additional request. This might lead to a slightly-slower initial load time.