Your complete
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.

Terminology

#HEX codes

In the YOUx widget, we use four different "Hex" colors to customise the experiance.

Hex colurs are very efficient, using just these seven characters to represent more than 16 million colors. And differentiating between these colors is a straightforward process. The vaiable HEX colour parameters are catagorised as follows:

Primary | Used for themain headding, buttons and slider
Seondary | used for the main body text within the applciation
Tertiary | Used for answers
Quaternary | used for the background of the applciation

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 platfrom 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/ viewall"

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 promary domain. This functionality allows tracking of multpledifferent installations under the same partner_ID

Step 1.1

Complete the onboarding form and ensureyou advise thefollowing information:

#HEX codes to desired colour schema
Page source URL (parent page URL)
DesiredProducts to display
Desired display layout

Truck

Other?

(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", ""); // POSSIBLE VALUE - SKYNET, MULTI_TENANT, HAL_9000
// YOUx Manage Instance
localStorage.setItem("countryCode", "NZ"); // POSSIBLE VALUE - NZ,AU
})();

</script>

Note: make sure you tell us if your website builder or development environment uses a different URL so we can whitelist that too...

Requirements

Step 1.2

Insert the provided code (adjacent to thispanel) 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.

1 success looks like this...you should have the "widget" displaying on your webpage

Step 2.0

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 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.

Step 2 success...
Application page
displayed after widget

(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>

Step 3.0

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"

Your complete widget integration guide