Connect Web 2.0 Embed iFrame
Prerequisites
- Get Started – Get Free API Keys
- Set Up Environment
Step 1—Generate a Connect URL link
Step 2—Add the library script tag
The Connect Web SDK is a Finicity JavaScript tag that accesses the SDK library. Add this tag anywhere you want to your web application.
<script src="https://connect2.finicity.com/assets/sdk/finicity-connect.min.js"></script> Step 3—Open the 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. The Connect widget will automatically resize to the following dimensions.
width: 375px
height: 755px Connect iFrame - Sample Code
This is an example of how to embed Finicity Connect 2.0 into an iFrame.
// 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 insideConnect ', 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);
}
});
}); 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).
Window.finicityConnect.destroy();