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

# Add the Flinks Connect iframe to Your Page

> Embed the Flinks Connect iframe into your web page, app, or React Native project.

## Configure your widget

Use the configurator below to toggle parameters, preview screens, simulate errors, and generate the iframe snippet for your integration. Every option corresponds to a parameter documented on the [Parameters](./widget) page.

<div
  style={{
margin: "0 auto",
padding: "32px",
borderRadius: "24px",
overflow: "hidden",
background: "#ffffff",
border: "1px solid #e4e4e7",
boxShadow: "0 4px 4px rgba(0,0,0,0.04), 0 22px 64px rgba(0,0,0,0.06), 0 -8px 20px rgba(0,0,0,0.04), inset 0 -2px 13px 5px #192c4317"
}}
>
  <iframe src="https://dashboard.flinks.com/en/connect" title="Flinks Connect configurator" style={{ width: "100%", height: "900px", border: "none", borderRadius: "16px", display: "block" }} allow="clipboard-write; fullscreen" loading="lazy" />
</div>

## Add the Flinks Connect iframe to your page

1. Use the configurator above to set up the widget the way you want your end-users to see it.
2. Select **Generate** in the configurator to produce your code snippet.
3. Embed the code snippet into your web page, application, or webview. This adds an iframe with Flinks Connect inside of it:

```html html theme={null}
<!-- Flinks Connect -->
<iframe
  height="760"
  src="https://toolbox-iframe.private.fin.ag/?demo=true&redirectUrl=https://flinks.com/contact/thank-you&innerRedirect=true&consentEnable=true&customerName=FinTech&headerEnable=true&institutionFilterEnable=true"
>
</iframe>

<!-- Event Listener -->
<script>
  window.addEventListener("message", function (e) {
    console.log(e.data);
  });
</script>
```

In the example above, we are using the Sandbox environment. Do all of your configurations and testing in this environment, then change it to your production environment before going live.

### Mobile and native apps

To embed Flinks Connect in an iOS, Android, or React Native app using a WebView, see [Mobile Integration](/guides/connect/mobile-integration). For OAuth-specific configuration across mobile platforms, see [OAuth Integration](/guides/connect/oauth-integration).