Hosted Onboarding
Guide for integrating the Straddle hosted onboarding form into your platform
Straddle provides a hosted onboarding form that platforms can easily embed into their applications. This guide covers two implementation approaches: Standard and Dynamic Loading.
The hosted onboarding form is optimized for seamless integration, automatic height adjustment, and flexible loading behaviors to suit various application needs.
Key Features
Easy Integration
Embed the hosted onboarding form using a simple iframe snippet with minimal setup
Dynamic Height
Automatically adjusts to fit the form’s content, preventing unnecessary scrollbars
Flexible Loading
Choose between standard loading or dynamic (on-demand) loading for performance optimization
Customizable Parameters
Tailor the form’s appearance and behavior via URL parameters and iframe attributes
Standard Implementation
For most use cases, the standard implementation provides a simple way to add the onboarding form to your platform. Copy the following code and replace {platform_id} with your actual Straddle platform ID.
URL Parameters
Your unique Straddle platform identifier. This is used to associate the embedded form with your specific account or configuration.
A string value representing the Straddle environment in which form submissions are created (e.g., production, sandbox).
Aligns the content of the iframe to the left when set to 1.
Hides the default title of the embedded form when set to 1.
Makes the form background transparent when set to 1.
Enables automatic height adjustment based on content when set to 1.
How It Works
The standard implementation automatically handles the loading and initialization of the embed form:
Step 1
The script checks if the Straddle embed library is already loaded
Step 2
The script checks if the Straddle embed library is already loaded
Step 3
Once loaded, it initializes any uninitialized embeds on the page
Step 4
Built-in error handling ensures graceful fallback if issues occur
Dynamic Loading
For applications requiring more control over when the embed loads, use the Dynamic Loading approach. This method lets you explicitly control when embeds initialize by calling Straddle.loadEmbeds().
Step 1: Add the Initialization Script
Step 2: Add the Embed Iframe
Step 3: Initialize Embed
Choose one of these initialization approaches:
Load on Page Ready:
Load on User Interaction:
How It Works
The dynamic implementation provides more control over the loading process:
Step 1
Creates a global Straddle object with a loadEmbeds function
Step 2
Waits for your explicit call to Straddle.loadEmbeds()
Step 3
Supports both modern and legacy browsers
Step 4
Allows custom timing of when the form loads
Customization Options
Iframe Attributes
Controls iframe loading behavior. Set to "lazy" to defer loading until the iframe is near the viewport, improving performance.
Sets the iframe width. Default is "100%" for responsive layouts. Can be set to specific pixel values (e.g., "800px").
Sets the initial iframe height. Default is "500". When using dynamicHeight=1, this serves as the minimum height.
Set to "0" to remove the default iframe border.
Accessibility title for the iframe. Choose a descriptive title that explains the form’s purpose.
Script Configuration
When set to true, enables console logging for debugging purposes. Should be set to false in production.
URL of the Straddle embed script. Should not be changed unless instructed by Straddle support.
Set isDebugMode = true in the initialization script to enable detailed console logging. This helps diagnose initialization issues and verify proper embed loading. Remember to disable debug mode before deploying to production.
Troubleshooting
If you encounter issues:
-
Verify your platform ID is correctly set
-
Enable debug mode to get detailed logging
-
Check browser console for error messages
-
Verify the initialization script executes at the appropriate time
-
Test in multiple browsers to ensure compatibility