Embedding

CreditConnect allows you to embed the end-user Portals in an iframe in the Integrator’s platform. For example, you may wish to incorporate the KBA Portal into your login process a the Applicant Portal into your online application form.

Embedding CreditConnect is easy. Simply render an iframe pointing to the Portal Access URL provided by Portal API and include a special embedding helper script provided by CreditConnect. The embedding helper script will automatically resize height of the iframe for you making it really easy to create a seamless integration that doesn’t feel embedded.

<iframe src="https://creditconnect.instascreen.net/portal/acb123..." id="connect_iframe" width="100%" frameborder="0" scrolling="no" /></iframe>
<script src="https://creditconnect.instascreen.net/js/embedding-helper.js"></script>

The id="connect_iframe" attribute on the iframe is important, otherwise the embedding helper script will not be able to find the iframe to resize it. scrolling="no" helps prevent a scroll bar from popping up while the content is resizing.

If you want to have a little fun with the iframe resizing, try adding something like this to the page:

<style>#connect_iframe{transition: height 0.3s ease; min-height: 300px;}</style>

The embedding helper script fires a few javascript events to help the Integrator know what is going on inside the iframe.

connect-did-resize	Fired when the contents of the CreditConnect iframe changed size. This could occur because content loaded, the window was resized, etc.
connect-did-load	Fired when a page load happens inside of the CreditConnect iframe.
connect-did-complete	Perhaps one of the most important events. With the KBA Portal for example, this event lets you know the User completed the KBA process and you can now navigate them away from the iframe.
connect-session-timeout	Fired when the portal's session inside the iframe expired.

Below is an example of using the connect-did-complete event with jQuery. A common use case would be to redirect the browser to a new page or submit a hidden form to the Integrator’s platform to log that the user completed the task. In the example below it just shows a system dialog.

// using jQuery
$(document).on('connect-did-complete', function() {
  alert("all done!")
  // do something more meaningful here like navigate
  // the browser to a new page or submit a hidden
  // form.
});

footer