Your complete youXfind widget integration guide
In this guide you will find information on implementing the Application Widget 2.0 (AW2 or, "youXmatch") solution into your website. ​ The AW2 integrates using a code snippet and supplementary iframed pages. The AW2 will capture customer application data and transfer this data into the "YOUx Manage" system.
Aside from the validation and transfer of customer application data, the AW2 is designed to qualify customers for finance approval. The AW2 does this by calling a n umber of "YOUxConnect" micro services and the "YOUxFind" lender product matching engine.

This guide is best for IT Administrators and Software Developers

This tool cannot be implemented in static websites

In order for your preferred lender results and notification routing channels to be used, some additional configuration is required in YOUxManage.

The YOUxManage configuration requirements are not covered in this guide however, we would be happy to assist you by calling the YOUx "manage" support team on 1300 301 720 or by lodging a support enquiry at the bottom of this page.

Your Integration Companion

Our Terminology

#HEX codes

In the YOUx widget, we use four different "Hex" colours to customise the experience.

Hex colures are very efficient, using just these seven characters to represent more than 16 million colours. And differentiating between these colours is a straightforward process. The variable HEX colour parameters are categorised as follows:

Note: These different elements are covered in more detail during Step 1.

Partner ID

The partner ID is a specific GUI used by the YOUxManage platform to route application and opportunity data generated by the widget. The "partner ID" used in the widget is the same partner ID shown for all inbound information appearing in YOUxManage. This ID can be found in the righthand navigation pane under "manage backend/ partners/ view all"

Target IQ System

version (EG, SKYNET, MULTI_TENNANT, HAL_9000)

The target IQ system (or youX manage system) is required to chanel the leaads to the correct parter_ID

Source_URL

(parent page URL)

This is the domain that the widget is installed on. This value is used for avariety of different fucntions and will also need to be "whitelisted" by the youX team prior to installation.

Notes:

  • the domain must be https://
  • If you are using a 3rd party website builders (such as wix), you should also provide the youX team with thsi domain so that the widget renders properly in these environments
Source

Different to source_URL, source is used when multiple widgets are installed on the same primary domain. This functionality allows tracking of multiple different installations under the same partner_ID.

Step 1

Complete the onboarding form and ensure you advise the following information:

#HEX codes

Choose your designs colour scheme.

Page source URL

Provide your parent page URL.

Desired Products

Choose with products you want to display.

Desired Display

Pick your desired layout of the products.

#HEX codes

Choose your designs colour scheme.

Page source URL

Provide your parent page URL.

Desired Products

Choose with products you want to display.

Desired Display

Pick your desired layout of the products.

Step 1.2
Insert the provided code in the front end web page where the widget is to be displayed and update the following code parameters: ​ ​
  • "Partner ID"
  • "Sorce_URL"
  • "Source"
  • "Target System"
These values will be provided by the YOUx team once Step1 is completed.​
​Note: make sure you tell us if your website builder or development environment uses a different URL so we can whitelist that too...

<div id=”repaymentWidget”></div>
<script>
(function() {
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”, “partner_ID”);
}
// HOST URL (REQUIRED)
localStorage.setItem(“sourceUrl”, “source_URL”); // Website URL where the Widget Tool is embedded
// Quote Source (REQUIRED)
localStorage.setItem(“source”, “source”); // Feeds into YOUx Manage as Quote source
// YOUx Manage Instance (REQUIRED)
localStorage.setItem(“targetSystem”, “target_system”); // POSSIBLE VALUE – SKYNET, MULTI_TENANT, HAL_9000
})();
</script>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetToolVersion2/static/css/main.css”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetToolVersion2/static/css/main.css.map”/>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetToolVersion2/static/js/main.js” crossorigin></script>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetToolVersion2/static/js/main.js.map” crossorigin></script>

Step 1 Success looks like this...
You should have the "widget" displaying on your webpage!
Need Help? Contact Us
Step 2
Create a new page on the host website such as: https://"host_URL"/application
This new page will be navigated to once the user proceeds past the initial widget. All parameters 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 capture 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 application data will re-populate regardless of the device.

<div id=”widgetApplication” style=”width: 100vw; min-height: 100vh”></div>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/assets/css/all.css”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/css/2.chunk.css”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/css/main.chunk.css”/>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/assets/js/all.js” crossorigin></script>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/js/2.chunk.js” crossorigin></script>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/js/main.chunk.js” crossorigin></script>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/js/runtime~main.js” crossorigin></script>

Step 2 Success...
Application page displayed after widget!
Need Help? Contact Us
Step 3
Create a new page on the host website such as: https://yourwebsite.com.au/document-upload
This new page will be used 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.
Change the following code parameter
  • "Source_URL"

<div id=”uploadDocument” style=”width: 100vw; min-height: 100vh”></div>
<script>
(function() {
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (params.quoteId) {
localStorage.setItem(‘quoteId’, params.quoteId);
}
const quote = {
externalPartnerId:”, // Set the externalPartnerId value
sourceUrl:”, // Same sourceUrl as the Widget Tool
};
localStorage.setItem(‘quote’, JSON.stringify(quote));
// HOST URL
localStorage.setItem(‘sourceUrl’, ‘source_URL’); // Same sourceUrl as the Widget Tool
})();
</script>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/assets/css/all.css”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/css/2.chunk.css”/>
<link rel=”stylesheet” href=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/css/main.chunk.css”/>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/assets/js/all.js” crossorigin></script>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/js/2.chunk.js” crossorigin></script>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/js/main.chunk.js” crossorigin></script>
<script src=”https://s3.ap-southeast-2.amazonaws.com/widget.driveiq/prod/widgetApplicationVersion2/static/js/runtime~main.js” crossorigin></script>

Give Us A Call

1300 301 720
Call Now

Send Us An Email

support@youxpowered.com.au
Book Today