Login

    iFrame Guide

    Credfin’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:

    <iframe src="https://credfin.io/i/{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 Credfin.

    Layouts and colours

    The iFrame has been designed to be responsive and will render consistently across all modern browsers on laptops, tablets, and mobiles.

    The theme has been designed with two colors, a primary and secondary color, making it easy to adjust it to fit in with your existing website look and feel.

    These colors can be defined within the query string. Additionally, the option to change both the background color, to match that of your own and the font (as long as it is a Google font) has been provided

    String NameTypeDescription
    primary_colourSTRINGPrimary colour string for the website. The colour type used is in HEX (e.g. FFFFFF). Default colour is #0D68D6. The hash/pound sign (e.g. #) should not be used. Just input the 6 alphanumeric characters required to set the colour.
    secondary_colorSTRINGSecondary colour string for the website. The colour type used is in HEX (e.g. FFFFFF). Default colour is #4519F7. The hash/pound sign (e.g. #) should not be used. Just input the 6 alphanumeric characters required to set the col
    background_colorSTRINGBackground colour string. The colour type used is in HEX (e.g. #FFFFFF). Default colour is #F8F9FA. The hash/pound sign (e.g. #) should not be used. Just input the 6 alphanumeric characters required to set the colour.
    fontSTRINGPrimary font used within the iframe. The system is designed to download and use any Google font requested in the query string. The default font is ‘IBM Plet Sans’.

    Example: For example, if Mickey Mouse were performing an application via your site using the iFrame you could customize the iFrames URL as such:

    <iframe src="https://credfin.io/i/demo/191012a/?primary_color=4519F7&secondary_color=351c75&font=roboto" width="100%" height="100%" />

    In this example the following information is provided and pre-populated within the iFrame:

    NameOutput
    primary_color#4519F7
    secondary_color#351C75
    fontRoboto

    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:

    URLOutcome
    /iframe/{vendor-label}/{vendor-id}/This will start you at the base page with nothing else enabled.
    /iframe/{vendor-label}/{vendor-id}/tnc/This will start you at the base page with the terms and conditions enabled.
    /iframe/{vendor-label}/{vendor-id}/do_mygov/This will start you at the base page and send the user to fill in their login credentials for mygov before sending you to the bank page to select your bank.
    /iframe/{vendor-label{/{vendor-id}/tnc/do_mygov/This will start you at the base page with the terms and conditions enabled and send the user to fill in their login credentials for mygov before sending you to the bank page to select your bank.
    /iframe/{vendor-label}/{vendor-id}/mygov/{full-name}/{mobile}/{email}/This will start you at the mygov page before sending you to the bank page to select your bank.
    /iframe/{vendor-label}/{vendor-id}/bank/{full-name}/{mobile}/{email}/This will start you at the bank page for the user to select their bank.
    /iframe/{vendor-label}/{vendor-id}/login/{full-name}/{mobile}/{email}/{bank-id}This will start you directly at the login page for the bank that you have selected.

    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.

    URLOutcome
    /iframe/{vendor-label}/{vendor-id}/mygov/This will start you at the mygov page before sending you to the bank page to select your bank. No personal information is needed from the user
    /iframe/{vendor-label}/{vendor-id}/bank/This will start you at the bank page for the user to select their bank. No personal information is needed from the user
    /iframe/{vendor-label}/{vendor-id}/login/This will start you directly at the login page for the bank that you have selected. No personal information is needed from the user

    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.

    String NameDescription
    vendor-labelThis has been provided by the credfin team before starting your applications with us. The Vendor Label will be between 3 to 5 characters.
    vendor-idThis is the UUID that you have generated to track your applications through the system. This id must be a minimum of 7 alphanumeric characters (including dashes and underscores) and a max of 64.
    bank-idThe bank-id is the number used to identify which bank the user has selected as theirs. A list of the banks and their ids can be found here
    mobileMobile must be composed of numbers only.
    full-nameNo restrictions have been placed on this parameter.
    emailThis parameter handles both urlencoded and non-urlencoded inputs.

    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.

    <iframe id="IframeId" src="http://localhost:8080/iframe/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 Credfin has implemented postMessages that notify the host of the current screen size requirements.

    postMessage

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

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

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

    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:

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

    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:

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

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

    Subscribe to our newsletters

    Subscribe to our newsletter and stay up to date with the latest news about Credfin.

    TwitterLinkedIn