top of page

Welcome to your complete
Application widget integration guide 

Copy of Loan Tracker Creative.png

INTEGRATION GUIDE

This guide is best for IT Administrators and Software Developers

In this guide you will find information on implementing the Application Widget (AW) solution into your website. 

​

The AW integrates using a code snippet and supplementary iframed pages. The AW will capture customer application data and transfer this data into the Drive IQ system.

 

Part of the function of the AW is to qualify customers against lender policy and it does this by calling a number of Lambda micro services and the Drive IQ matching engine at specific application points.

​​

​

Please note:

​

  1. This tool cannot be implemented in static websites
     

  2. In order for your preferred lender results and notification routing channels to be used, some additional configuration is required in Drive iQ. The IQ configuration requirements are not covered in this guide however, we would be happy to assist you by calling the IQ support team on 1300 301 720 or by lodging a support enquiry at the bottom of this page.

SECTIONS COVERED BY THIS GUIDE

INTEGRATION REQUIREMENTS

  • Step 1 - Insert the provided widget code in the front end  web page where the widget is to be displayed and update the following code parameters

    • Update: #HEX codes to desired colour schema​

    • Update: Partner ID

    • Update: page source URL (parent page URL)

    • Update: target IQ system version (EG, SKYNET, MULTI_TENNANT, HAL_9000)

​​

  • Step 2 - Create a new application page and insert the application code.

​​

  • Step 3 - Create a new upload document page and insert the upload document code.

​​

  • Step 4 - Create a new submitted page. (not covered in detail by this guide)

    • Important: the application page needs to be "https://targetsite.com.au/submitted"

    • There is no code for this page. The content can be anything.

​

NOTE: The Parent Page URL must be whitelisted by Drive IQ

​

 

SUMMARY

 

The following information is required prior to implementing Stage 1

  • widget Primary colour

  • widget Secondary colour

  • widget Tertiary colour

  • widget Quaternary colour

  • website Domain

  • Drive IQ Version

  • Partner ID

​

Requirements

STEP 1 - INSERT WIDGET

Insert Widge

The aplication "widget" needs to be insterted into the host website where it is to be displayed. It is important to modify the highlighted parameters to ensure correct functionality. It is possible to control the following options:

​

Default Loan Type (optional)

By default this is a blank string and the widget will display all available product catagories. Optionally, a default product can be selected. In this instance, only the selected product will be available. 

Example: localStorage.setItem('defaultLoanType', 'CAR_LOAN');

​

Available default Loan Types

  • CAR_LOAN

  • EQUIPMENT_LOAN

  • PERSONAL_LOAN

  • BUSINESS_LOAN

  • MOTORCYCLE_LOAN

  • CARAVAN_LOAN

Note: Parameters in Blue are configurable

Code Snippet for Front End Widget

<div id="repaymentWidget" style="width: 340px"></div>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
rel="stylesheet">
<script>
(function() {
// SET CSS PROPERTY
document.documentElement.style.setProperty('--widgetPrimary', '#f44bb6');
document.documentElement.style.setProperty('--widgetSecondary', '#447cf9');
document.documentElement.style.setProperty('--widgetTertiary', '#0e2566');
document.documentElement.style.setProperty('--widgetQuaternary', '#eee6f3');
// GET PARTNER ID IF BEING USED
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (params.partnerId) {
localStorage.setItem('externalPartnerId', params.partnerId);
} else {
// SET DEFAULT DRIVE IQ PARTNER(REQUIRED)
localStorage.setItem('externalPartnerId', '482');
}
// HOST URL
localStorage.setItem('sourceUrl', 'https://exmple.com');
// SOURCE NAME
localStorage.setItem('source', 'BUSINESS_NAME');

// DEFAULT LOAN TYPE

localStorage.setItem('defaultLoanType', 'CAR_LOAN');
// TARGET SYSTEM
localStorage.setItem('targetSystem', 'SKYNET');
})();
</script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetTool/js/main.470f9f85.j
s" crossorigin></script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetTool/js/main.470f9f85.j
s.map" crossorigin></script>
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetTool/css/main.dd27e1
ed.css">
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetTool/css/main.dd27e1
ed.css.map">

Preview of Widget

Tertiary Colour
Used for headings

Secondary Colour
Used for answer buttons, body text, tooltips, and tool tip message boxes.

Primary Colour
Used for call to action buttons & progress bar.

STEP 2 - INSERT LENDER MATCH / APPLICATION PAGE

Lender Match and Application

Create a new page on the host website such as: https://yourwebsite.com.au/application

​

This new page will be navigated to once the user proceeds past the initial widget. All paramaters from the initial widget are passed to the "application" page.

 

When a new user interacts with the application page, they will see "locked" lender options. When a user clicks on an active element of the application a pop up will display to catpture lead information:

First Name

Mobile Number

Email Address

All these fields are mandatory.  Once completed the user will then be sent a one time code to the input mobile number. 

​

This step ensures contactability and validation of the user and also allows the user to return to the application at a later time or even from an alternate device by using the validated mobile number a user ID. Each new session will trigger a one time code for user validation. Once re-validated, any previously input aplication data will re-populate regardless of the device.

Note: Parameters in Blue are configurable

Preview of  Application Page

Quaternary Colour
Used for call to action buttons & progress bar.

Preview of Lender Match/ Application Page

Code Snippet for Application Page

<div id="widgetApplication" style="width: 100vw; min-height: 100vh"></div>
<script>
(function() {
// SET CSS PROPERTY
document.documentElement.style.setProperty('--widgetPrimary', '#f44bb6');
document.documentElement.style.setProperty('--widgetSecondary', '#447cf9');
document.documentElement.style.setProperty('--widgetTertiary', '#0e2566');
document.documentElement.style.setProperty('--widgetQuaternary', '#eee6f3');
})();
</script>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/assets/css/all.css">
<script src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/assets/js/all.js"
crossorigin></script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/js/2.eaf4f15
d.chunk.js" crossorigin></script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/js/main.06d
95ded.chunk.js" crossorigin></script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/js/runtime~
main.a8a9905a.js" crossorigin></script>
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/css/2.f858
cb61.chunk.css">
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/css/main.a
a521ec1.chunk.css">

STEP 3 - INSERT DOCUMENT UPLOAD PAGE

Document Uplod

Create a new page on the host website such as: https://yourwebsite.com.au/document-upload

​

This new page will be sued when customers scan the QR code using a mobile device and allow them to activate the camera or upload various documents from their device memory.

Note: Parameters in Blue are configurable

Code Snippet for Document Upload Page

Code Snippet for Document Upload

<div id="uploadDocument" style="width: 100vw; min-height: 100vh"></div>
<script>
(function() {
// SET CSS PROPERTY
document.documentElement.style.setProperty('--widgetPrimary', '#f44bb6');
document.documentElement.style.setProperty('--widgetSecondary', '#447cf9');
document.documentElement.style.setProperty('--widgetTertiary', '#0e2566');
document.documentElement.style.setProperty('--widgetQuaternary', '#eee6f3');
// GET QUOTE ID: DO NOT CHANGE
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (params.quoteId) {
localStorage.setItem('quoteId', params.quoteId);
}
// HOST URL:
localStorage.setItem('sourceUrl', 'http://example.com');
})();
</script>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/assets/css/all.css">
<script src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/assets/js/all.js"
crossorigin></script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/js/2.eaf4f15
d.chunk.js" crossorigin></script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/js/main.06d
95ded.chunk.js" crossorigin></script>
<script
src="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/js/runtime~
main.a8a9905a.js" crossorigin></script>
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/css/2.f858
cb61.chunk.css">
<link rel="stylesheet"
href="https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/widgetApplication/css/main.a
a521ec1.chunk.css">
bottom of page