LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
Powered by GitBook
On this page
  • Embed snippet
  • Styles
  • Load immediately
  • Load with URL parameters
  • Whitelisting embedding domains
  • More control: Web Embed API
  • Embedding forms using React
  • Things to Consider
  • Scrolling
  • URL navigation
  • Loading performance
  • Zoom in/out in mobile screens

Was this helpful?

  1. Going live

Embedding

Place Formsort flows within a larger webpage.

PreviousBuilt-in analyticsNextWeb-Embed API

Last updated 11 months ago

Was this helpful?

Formsort flows may be embedded within other web pages.

Use for conversion rate-sensitive use cases to maximize page load speed

Embed snippet

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

Paste 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. This will be auto-generated with the form details in the snippet configuration modal.

// Example
_formsort.load({c:'<Client_label>',f:'<flow_label>',v:'<variant_label'})

Load with URL parameters

If Load with URL parameters is checked, then any URL search parameters will be forwarded to the embed at load time.

Whitelisting embedding domains

By default, a flow can be embedded within any website. For greater security over where your forms can appear, you can whitelist embedding domains from the 'Allowed embedding domains' section of the Account page --> Security tab.

By adding one or more domains to the list of allowed embedding domains, no other domain will be permitted to host your flow.

Another advantage of whitelisting certain domains is that this allows answer submission data to flow to the parent URL.

If you have multiple domains, such as 'staging.formort.com' and 'development.formsort.com,' you can use the asterisk wildcard: '*.formsort.com.'

More control: Web Embed API

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.

Embeds may also intercept and cancel redirects by returning an object { cancel: true } in the redirect handlers.

Finally, if you explicit whitelist a domain in Security --> 'Allowed embedding domain,' then you can also receive answer submission data on analytics events, allowing you to trigger specific actions in your app based on users' answers.

Embedding forms using React

import React from "react";
import EmbedFlow from "@formsort/react-embed";

const EmbedFlowExample: React.FunctionComponent = () => (
  <div>
    <EmbedFlow
      clientLabel="formsort"
      flowLabel="onboarding"
      variantLabel="main"
      queryParams={[['formsortEnv','staging']]}
      embedConfig={{
        style: {
          width: "100%",
          height: "100%"
        }
      }}
      // Lifecycle callback examples
      onFlowLoaded={() => {console.log("Flow has loaded!")}}
      onStepCompleted={(answers) => console.log(answers)}
      onFlowFinalized={(answers) => console.log(answers)}
    />
  </div>
);

Things to Consider

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

URL navigation -- the ability to use forward and back buttons to navigate through a flow by placing the step index in the URL -- is not currently supported for embedded flows. However, when a responder is visiting a non-embedded flow on a custom domain, Formsort controls the URL, and therefore URL navigation is possible (assuming the Enable URL navigation option in the Settings > Behavior tab is enabled). So, if a user will expect forward and back buttons to work, such as for mobile swipe gestures, consider using a custom domain rather than an embedded flow.

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.

Zoom in/out in mobile screens

If your embedded flow looks small in mobile screen or zooms in too much when tapping on inputs, you should set the viewport meta tag in your main site. Put the following code snippet into thehead section of your main site.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Keep in mind that url parameters that don't correspond to answer variable names or whitelisted as will be ignored and unavailable within Formsort.

The Formsort provides more control over the Formsort embed. Most importantly, it provides lifecycle event callbacks corresponding to the , allowing you to trigger certain actions on FlowLoaded, FlowFinalized, EmailCollected, etc.

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

Check out our guide to if you plan on using any of the above three embed options.

If you don't want to prevent zoom in because of accessibility concerns you can set maximum-scale value to 3. For more details about viewport, you can check .

๐Ÿ“บ
External answers
web-embed API
analytics events
React component
Setting up a dev environment
MDN docs
custom domains
deploying a flow
Forwarding URL search parameters to the embed