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
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. Replace {env} with sandbox at first, set it to production once you have production access.
URL Parameters
string
required
Your unique Straddle platform identifier. This is used to associate the embedded form with your specific account or configuration.
string
required
A string value representing the Straddle environment in which form submissions are created (e.g.,
production, sandbox).string
A unique identifier provided by the integrating application. Useful for cross-referencing the submission between Straddle and an external system.
boolean
Aligns the content of the iframe to the left when set to
1.boolean
Hides the default title of the embedded form when set to
1.boolean
Makes the form background transparent when set to
1.boolean
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:1
Step 1
The script checks if the Straddle embed library is already loaded
2
Step 3
Once loaded, it initializes any uninitialized embeds on the page
3
Step 3
Built-in error handling ensures graceful fallback if issues occur
Load on User Interaction
The example above uses an IIFE. That function doesn’t have to be invoked right away, you can choose to name it and call it on user action.Customization Options
Iframe Attributes
string
Controls iframe loading behavior. Set to
"lazy" to defer loading until the iframe is near the viewport, improving performance.string
Sets the iframe width. Default is
"100%" for responsive layouts. Can be set to specific pixel values (e.g., "800px").string
Sets the initial iframe height. Default is
"500". When using dynamicHeight=1, this serves as the minimum height.string
Set to
"0" to remove the default iframe border.string
Accessibility title for the iframe. Choose a descriptive title that explains the form’s purpose.
Script Configuration
boolean
When set to
true, enables console logging for debugging purposes. Should be set to false in production.string
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