# Embedding BNDRY Forms & Automations

BNDRY provides flexible options for integrating our data collection forms into your application. You can choose to redirect users to our hosted forms or embed them directly within your app using iframes.

## Overview

When embedding BNDRY forms, you have two primary options:

1. **Hosted Forms**: Redirect users to BNDRY's hosted data collection forms and automations. Requires minimal development effort. BNDRY offers a light theming option to match your brand's look and feel.
2. **Embedded Forms**: Embed the forms directly within your application using an iframe. This allows for a more seamless user experience, as customers can complete the forms without leaving your site.


## Hosted Forms

To use BNDRY's hosted forms, simply redirect your users to the `redirect_uri` provided in the response when you run an automation job via the BNDRY API. This approach requires minimal development effort and allows you to leverage BNDRY's secure and compliant data collection infrastructure.

## Embedded Forms

We recommend using the MIT-licenced [@open-iframe-resizer package](https://lemick.github.io/open-iframe-resizer/) to embed BNDRY forms within your application. This package enables automatic resizing of the iframe to fit the content, providing a seamless user experience with no scrollbars.

#### Usage example:

At it's simplest, import the module and initialise your iframe by ID.

You'll receive the `redirect_uri` for the iframe src attribute from the BNDRY API when running an automation job.

We've also included the necessary `sandbox` and `allow` attributes below for optimal functionality.


```html
<script type="module">
  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@v2.0.0/dist/index.min.js";

  initialize({}, "#bndry-integration");
</script>

<iframe
  id="bndry-integration"
  src="{{redirect_uri}}"
  sandbox="allow-same-origin allow-scripts allow-forms allow-modals"
  allow="camera; clipboard-write;" />
```

### Notes:

- Ensure that the iframe `id` used in the `initialize` function matches the `id` attribute of your iframe element.
- The `redirect_uri` should be dynamically set based on the response from the BNDRY API when you initiate an automation job.
- The `sandbox` attribute is configured to allow necessary permissions for BNDRY forms, including camera access for document capture.
- The `allow` attribute grants specific permissions required for the forms to function correctly.
- Refer to the [@open-iframe-resizer documentation](https://lemick.github.io/open-iframe-resizer/) for React, Vue and advanced configuration options.