Complete the following steps to configure your Flinks Connect widget and install it onto your site.

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 using the Flinks connect widget, click 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&theme=light&consentEnable=true&customerName=FinTech&backgroundColor=f7f7f7&foregroundColor1=000000&desktopLayout=true&headerEnable=false&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.

Configure the Flinks Connect Widget

The following widget is embedded into your site as an iframe. You have a variety of design options to fit your brand experience that you can change whenever you want. Configure the first version of your widget to suit your brand and preferences.