Introduction

This article will tell you how to integrate the NewBanking Cockpit into your own website. The guide is aimed at developers, web designers or people in charge of your website. Some basic knowledge of HTML is required.

How to integrate

We have built a dynamic JavaScript loader script that will automatically loads the cockpit into your website.

Step 1: Add JavaScript loader script inside <head> tag

Paste the following JavaScript inside the <head> tag of your webpage (this includes a required meta tag in the header to allow iframe to be correctly displayed. Please visit for more information on why this is necessary: https://www.w3schools.com/css/css_rwd_viewport.asp

<!--NewBanking Widget Loader JS-->

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<script>(function(i,s,o,g,r,a,m){i['NewBanking']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode. insertBefore(a,m)})(window, document, 'script', 'https://newbanking.com/process/static/loader/v1.js', 'nbloader'); nbloader('create', 'nbwidget', { 'grantProcessId': 'PROCESSID', 'languageCode': 'en-US', 'customerId': 'CUSTOMER_ID'});</script>

In the above script, you need to change two values:

PROCESS_ID - This should be replaced with the id of the default process that the loader should use. This is a UUID value.
CUSTOMER_ID - This should be replaced by your Customer ID. This is a UUID value.

You can optionally also set the default 'languageCode' to either 'en-US' or 'da-DK'.

Step 2: Add <div> tag inside <body> tag

Paste the following <div> tag inside the <body> tag of your webpage, at the location where you want the cockpit to appear. The width and height values can be overridden here.

<div id="nb-process-app-container" style="width: 100vw; height: 100vh"></div>

Step 3: Verify integration

You can now verify that your integration works by loading the webpage that you have integrated the cockpit on.

Additional Notes

The HTML webpage - on which the cockpit was integrated - might be linked to in request emails from the NewBanking system. Such links might add additional parameters to the webpage URL that the JavaScript loader will automatically detect and use. Such parameters include:

nbWidth - Will override the value of the width of the iframe
nbHeight - Will override the value of the height of the iframe
grantProcessId - Will override the PROCESS_ID in the JavaScript loader script.
grantRequestId - A unique system UUID that is generated by the NewBanking system.
adminInviteId - A unique system UUID that is generated by the NewBanking system.
languageCode - Will override the 'languageCode' in the JavaScript loader script.