Introduction
This article will tell you how to integrate the NewBanking Widget (or just Widget) 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.
This guide assumes that you have access to your Business Account.
How to integrate
We have built a dynamic JavaScript loader script that will automatically load the Widget into your website.
Step 1: Add JavaScript loader script inside <head> tag
Paste the following JavaScript inside the <head> tag of your webpage.
|
<!--NewBanking Widget Loader JS--> <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://www.newbanking.com/onboarding-wizard/static/loader/v1.js', 'nbloader'); nbloader('create', 'nbwizard', {'grantProcessId': 'PROCESS_ID', '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 Widget to appear.
| <div id="nb-onboarding-wizard-container"></div> |
Step 3: Verify integration
You can now verify that your integration works by loading the webpage that you have integrated the Widget on.
Additional Notes
The HTML webpage - on which the Widget 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:
- 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.