iFrame Guide

TaleFin's systems can be integrated quickly, using an iframe, to process applications. The following HTML element is used to embed our system into your existing website or architecture:

1<iframe src="https://banks.talefin.com/iframe/{VENDOR_LABEL}/{VENDOR_SPECIFIC_ID}/" width="auto" height="auto"/>

This is the simplist possible integration and consists of a single line. The URL can also be sent in an email, sms or any other medium.

The Vendor Specific ID component of the URL must be an identifier unique to the customer. This value will be returned to you in all Webhook Events to help your internal systems identify the application. Whilst we recommend a UUID as a means of differentiating customers and ensuring that there are no overlaps in the IDs for each, the restrictions for this UUID are quite lenient. The UUID must simply be alphanumeric characters, including dashes and underscores that fit within a URL (2048 chars max).

The Vendor Label component of the URL will be provided to you when your account is provisioned by TaleFin.

iFrame Dynamic Traversal

The iframe is designed as such that you can start at any page before credentials to access the bank are requested.

The following url string parameters can be used to start you at any particular part of the site:

Similarly, should you wish to simply run the crawl without filling in any personal details, even within the url, then an option has been provided for this as well.

Traversing directly along the URL to dynamically load in only the elements of the iframe that you need in your application makes this system highly adaptable to your needs. However, validation on entries within the URL is run before anything loads. As such, you must make sure that your URLs have been properly set up if attempting this. The following table provides a breakdown of how everything is processed within the URL string.

Dynamic iFrame Resizing

Due to cross-site origin request issues it can be quite difficult to dynamically resize iframes. The best method would be to generate CSS media requests that output the required size for the iframe embed depending upon the page. These iframe updates can be generated through the onload request through the iframe, e.g.

1<iframe id="IframeId" src="https://banks.talefin.com/i/test/1/" onload="JSFunctionCallingCSSUpdates()"/>

However, such a system is heavily reliant upon you to build. In order to get dynamic iframe resizing easily and quickly implemented TaleFin has implemented postMessages that notify the host of the current screen size requirements.

postMessage

1postMessage({"FrameHeight": height}, "*");

Using these postMessages you can easily listen for the event changes and programmatically update when required.

1window.addEventListener('message', function (event) {
2    //Here We have to check content of the message event  for safety purpose
3    //event data contains message sent from page added in iframe
4    if (event.data.hasOwnProperty("FrameHeight")) {
5        //Set height of the Iframe
6        $("#IframeId").css("height", event.data.FrameHeight);        
7    }
8});

As it is dynamically generated should you wish to get rid of the internal overflow that might appear, set the style to overflow-y:hidden; as well as scrolling="no". The scrolling attribute has since been depreciated, however, older browsers still prefer it.

Page Transition Events

Similar to the FrameHeight event, an event is also fired whenever a page transition within the iframe. You may use for any of the things, however, the most common is setting up an auto scroller to move your parent to the top of the page whenever the event fires. In this manner users can continue their application uninterrupted whilst filling in the form. Example:

1 window.addEventListener('message', function (event) {
2    //Here We have to check content of the message event  for safety purpose
3    //event data contains message sent from page added in iframe
4    if (event.data.hasOwnProperty("PageLoaded")) {
5        window.scrollTo({ top: 0, behavior: 'smooth' });       
6    }
7});

Please note that this code is an example that would vary depending upon the user on where it scrolls to and how it does so

DO NOT PERFORM BUSINESS LOGIC IN THE CLIENTS BROWSER. Use the webhooks for mission critical processes.

Extracting User Info

Similar to the FrameHeight event, an event is also fired when data is captured from the user. For example, the users first name, last name, email or phone number. This data can also be retrieved from the profile API. However, should you wish the information as it is received (for example with live integration with your existing form) then this instantaneous feedback might be more helpful. Example:

1window.addEventListener('message', function (event) {
2    //Here We have to check content of the message event  for safety purpose
3    //event data contains message sent from page added in iframe
4    if (event.data.hasOwnProperty("ClientInfo")) {
5     console.log(event.data);
6    };
7});

DO NOT PERFORM BUSINESS LOGIC IN THE CLIENTS BROWSER. Use the webhooks for mission critical processes.