Skip to main content

​
Add the Flinks Connect iframe to your page

  1. Play around with the Flinks Connect widget and determine how you want to set it up. This is what your end-users will interact with to link their bank accounts.
  2. Generate your code snippet. To do this with the Flinks Connect widget, select Generate.
  3. Embed the code snippet into your web page, application, or webview. This adds an iframe with Flinks Connect inside of it:
html
<!-- 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.

​
React Native integration

If you are integrating the Flinks Connect iframe with React Native, use a WebView component and configure it as follows:
  1. Install react-native-webview: 
    npm install react-native-webview
  2. Embed Flinks Connect in your component: 
    import { WebView } from 'react-native-webview';

<WebView
  source={{ uri: 'https://{instance}-iframe.private.fin.ag/?webview=true&redirectUrl={yourRedirectUrl}&...' }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    console.log('Flinks event:', data);
  }}
/>
  3. Add webview=true to your iframe URL parameters.
  4. For OAuth-supported institutions, also add oauthWindowRedirect=true to handle redirects properly.
  5. Handle the REDIRECT event to capture the loginId when the connection completes.
For OAuth-specific configuration details across iOS, Android, and hybrid platforms, see OAuth Integration.