> ## Documentation Index
> Fetch the complete documentation index at: https://docs.straddle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hosted onboarding for embedded accounts

> Add Straddle's hosted onboarding flow to your platform to verify business accounts, collect representatives, and link bank accounts with no UI to build.

Straddle provides a hosted onboarding form that platforms can easily embed into their applications. This guide covers two implementation approaches: Standard and Dynamic Loading.

<Info>
  The hosted onboarding form is optimized for seamless integration, automatic height adjustment, and flexible loading behaviors to suit various application needs.
</Info>

## Key Features

<CardGroup cols={2}>
  <Card title="Easy Integration" icon="plug">
    Embed the hosted onboarding form using a simple iframe snippet with minimal setup
  </Card>

  <Card title="Dynamic Height" icon="up">
    Automatically adjusts to fit the form's content, preventing unnecessary scrollbars
  </Card>

  <Card title="Flexible Loading" icon="clock">
    Choose between standard loading or dynamic (on-demand) loading for performance
  </Card>

  <Card title="Customizable Parameters" icon="arrow-down-small-big">
    Tailor the form's appearance and behavior via URL parameters and iframe attributes
  </Card>
</CardGroup>

## 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.

<CodeGroup>
  ```javascript Single Page Embed theme={null}
  <!-- Straddle Embed Iframe -->
  <iframe
  data-straddle-src="https://go.straddle.com/account?alignLeft=1&hideTitle=1&transparentBackground=0&dynamicHeight=1&embed=1&platform.id={platform_id}&env={env}"
  loading="lazy"
  width="100%"
  height="500"
  frameborder="0"
  title="Activate your Straddle account">
  </iframe>

  <!-- Straddle Embed Initialization Script -->
  <script>
    (function () {
      'use strict';

      const workerUrl = 'https://forms.straddle.com/embed.js';
      const isDebugMode = false; // Set to true for debugging

      const initStraddleEmbed = () => {
        try {
          if (window.Straddle && typeof window.Straddle.loadEmbeds === 'function') {
            window.Straddle.loadEmbeds();
          } else {
            const iframes = document.querySelectorAll('iframe[data-straddle-src]:not([src])');
            iframes.forEach((iframe) => {
              if (isDebugMode) {
                console.log('Straddle: Setting src for iframe:', iframe);
              }
              const src = iframe.dataset.straddleSrc || ''; // Fixed: was TallySrc
              iframe.src = src;
            });
          }
        } catch (error) {
          console.error('Straddle: Failed to initialize embeds. Error:', error.message);
        }
      };

      if (!window.Straddle && !document.querySelector(`script[src="${workerUrl}"]`)) {
        const script = document.createElement('script');
        script.src = workerUrl;
        script.async = true;
        script.onload = initStraddleEmbed;
        script.onerror = () => {
          console.error('Straddle: Failed to load the embed script.');
          initStraddleEmbed();
        };
        document.body.appendChild(script);
      } else {
        initStraddleEmbed();
      }
    })();
  </script>
  ```
</CodeGroup>

## URL Parameters

<ResponseField name="platform.id" type="string" required>
  Your unique Straddle platform identifier. This is used to associate the embedded form with your specific account or configuration.
</ResponseField>

<ResponseField name="env" type="string" required>
  A string value representing the Straddle environment in which form submissions are created (e.g., `production`, `sandbox`).
</ResponseField>

<ResponseField name="external.id" type="string">
  A unique identifier provided by the integrating application. Useful for cross-referencing the submission between Straddle and an external system.
</ResponseField>

<ResponseField name="alignLeft" type="boolean">
  Aligns the content of the iframe to the left when set to `1`.
</ResponseField>

<ResponseField name="hideTitle" type="boolean">
  Hides the default title of the embedded form when set to `1`.
</ResponseField>

<ResponseField name="transparentBackground" type="boolean">
  Makes the form background transparent when set to `1`.
</ResponseField>

<ResponseField name="dynamicHeight" type="boolean">
  Enables automatic height adjustment based on content when set to `1`.
</ResponseField>

### How It Works

The standard implementation automatically handles the loading and initialization of the embed form:

<Steps>
  <Step title="Step 1">
    The script checks if the Straddle embed library is already loaded
  </Step>

  <Step title="Step 3">
    Once loaded, it initializes any uninitialized embeds on the page
  </Step>

  <Step title="Step 3">
    Built-in error handling ensures graceful fallback if issues occur
  </Step>
</Steps>

## Load on User Interaction

The example above uses an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE). That function doesn't have to be invoked right away, you can choose to name it and call it on user action.

```javascript theme={null}
function initStraddleEmbed() {
  'use strict';
  // ...
      initStraddleEmbed();
    }
}

document.getElementById('myButton').addEventListener('click', initStraddleEmbed);
```

## Customization Options

### Iframe Attributes

<ResponseField name="loading" type="string">
  Controls iframe loading behavior. Set to `"lazy"` to defer loading until the iframe is near the viewport, improving performance.
</ResponseField>

<ResponseField name="width" type="string">
  Sets the iframe width. Default is `"100%"` for responsive layouts. Can be set to specific pixel values (e.g., `"800px"`).
</ResponseField>

<ResponseField name="height" type="string">
  Sets the initial iframe height. Default is `"500"`. When using `dynamicHeight=1`, this serves as the minimum height.
</ResponseField>

<ResponseField name="frameborder" type="string">
  Set to `"0"` to remove the default iframe border.
</ResponseField>

<ResponseField name="title" type="string">
  Accessibility title for the iframe. Choose a descriptive title that explains the form's purpose.
</ResponseField>

### Script Configuration

<ResponseField name="isDebugMode" type="boolean">
  When set to `true`, enables console logging for debugging purposes. Should be set to `false` in production.
</ResponseField>

<ResponseField name="workerUrl" type="string">
  URL of the Straddle embed script. Should not be changed unless instructed by Straddle support.
</ResponseField>

<Info>
  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.
</Info>

## Troubleshooting

If you encounter issues:

1. Verify your platform ID is correctly set
2. Enable debug mode to get detailed logging
3. Check browser console for error messages
4. Verify the initialization script executes at the appropriate time
5. Test in multiple browsers to ensure compatibility