Connect Web 2.0 Embed iFrame

To embed Connect Web into an iFrame, you need access to Finicity’s APIs and have set up your environment. Then, you’re ready to generate a connect 2.0 URL link, which is used to open a Connect iFrame.

Prerequisites:

Step 1—Generate a Connect URL link

Step 2—Add the Library Script Tag

The Connect Web SDK is a Finicity JavaScript tag that access’ the SDK library. Add this tag anywhere you want to your web application.

Sample
 <script src="https://connect2.finicity.com/assets/sdk/finicity-connect.min.js"></script> 

Step 3—Open the Finicity Connect iFrame

After the library is loaded in your application, open the Finicity Connect iFrame using the URL you received when you generated a connect URL link

Connect iFrame - Sample Code

This is an example of how to embed Finicity Connect 2.0 into an iFrame.

Sample
 // Frontend Javascript running on web app
fetch({
method: 'POST',
body: JSON.stringify(data)
})
.then((response) => response.json())
.then((response) => {
const finicityConnectUrl = response.finicityConnectUrl;
window.finicityConnect.launch(finicityConnectUrl, {
selector: '#connect-container',
overlay: 'rgba(255,255,255, 0)',
success: (event) => {
console.log('Yay! User went through Connect', event);
},
cancel: (event) => {
console.log('The user cancelled the iframe', event);
},
error: (error) => {
console.error('Some runtime error was generated during inside
Connect ', error);
},
loaded: () => {
console.log('This gets called only once after the iframe has
finished loading ');
},
route: (event) => {
console.log('This is called as the user navigates through
Connect ', event);
},
user: (event) => {
console.log('This is called as the user interacts with
Connect ', event);
}
10 / 05 / 2020 _v4 .3 Finicity Documentation© 2020
17
});
});

Additional Properties Definitions

  • The selector and overlay properties (optional) allow additional customization.

  • The selector property allows you to select an HTML element to bind the iFrame.

  • The iFrame is contained within the element and doesn’t expand, filling the entire page.

  • The overlay property allows you to select the color of the background overlay that fills the space if the display is larger than the widget.

Manually Remove a Connect iFrame

The SDK provides a destroy method which removes the Connect iFrame from the Document Object Model (DOM).

Sample
 Window.finicityConnect.destroy();