We have put together a sample code that calls the Advancly borrower’s widget, with this you can easily copy and paste this code to any page that you require the widget to be used.
With this comprehensive guide, we hope you find our borrower’s widget integration seamless, but if you have any questions, please send a mail to
Advancly Widget Request Loan
<html>
<head>
<title>Advancly Widget</title>
<style>
body {
margin: 0;
}
.advancly {
border: none;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<!-- You can style this button however you want -->
<button type="button" onclick="openWidget()" id="advancly-button">
Request Loan
</button>
<script>
const widgetUrl = {{widgetBaseUrl}};
const dataObject = {
aggregator_id: 0, // // advancly will provide you with an aggregator id
aggregator_loan_ref: Date.now().toString(), // aggregator's own loan reference num. this will be auto generated
public_key: "", // the public key can be generated under the developer section on the settings page
identity_number: "12345678989", // customer's identity number (e.g bvn number for Nigeria or National Id for Kenya, US etc..)
bank_account_number: "0012345600", // customer's account number
bank_code: "044", // bank account code
first_name: "John", // customer's first name
last_name: "Doe", // customer's last name
gender: "male", // customer's gender
customer_phone: "02023451239", // customer's phone number
email: "test@email.com", // customer's email
residence_address: "1 Neverland drive", // // customer's residencial address
city: "Ikeja", // customer's city
state: "Lagos", // customer's country state
country_code: "NG", // customer's country code (Iso2) (e.g KE - Kenya)
customer_category: "car borrower", // customer's category
// photo_url: null,
customer_type: "1", // 1 is for an individual borrower and 2 is for a corporate entity
company_name: "", // if customer_type is 2, the company name is required
business_registration_number: "", // if customer_type is 2, the company registration number is required
// onboarding_only: true, //Set if user just want to onboard
customStyles: {
primaryColor: "#713fff", // Can be string or the color code
primaryDeepColor: "#29067d", // Can be string or the color code
primaryLightColor: "#E3D9FF", // Can be string or the color code
},
};
function openWidget() {
document.getElementById("advancly-button").style.display = "none";
let iframe = document.createElement("iframe");
iframe.setAttribute("class", "advancly");
iframe.src = widgetUrl;
iframe.id = "advanclyIframe";
document.body.appendChild(iframe);
function closeWidget() {
iframe.remove();
}
// listen to response from the widget, you can use the response data afterwards
window.addEventListener("message", function (e) {
if (e.data.status === "onboarding_successful") {
console.log("Onboarding");
console.log(e.data); // Log response from the widget
console.log({ eventListener: e.data });
if (e.data !== null) {
console.log({ eventListener2: e.data });
fetch(
"https://webhook.site/5238195e-c779-4d2e-b5fe-39c7cf4c90b5",
{
method: "POST",
body: JSON.stringify(e.data),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
}
)
.then((res) => res.json())
.then(console.log);
}
}
if (e.data.status === "loan_request_successful") {
console.log(e.data); // Log response from the widget
console.log({ eventListener: e.data });
if (e.data !== null) {
console.log({ eventListener2: e.data });
fetch(
"https://webhook.site/ee1c9383-f9bc-41bb-9e10-55ac9fd6ffc4",
{
method: "POST",
body: JSON.stringify(e.data),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
}
)
.then((res) => res.json())
.then(console.log);
}
}
if (e.data.status === "cancel") {
document.getElementById("advancly-button").style.display = "block";
closeWidget();
}
});
iframe.onload = function () {
iframe.contentWindow.postMessage(dataObject, widgetUrl);
};
}
window.openWidget = openWidget;
</script>
</body>
</html>
After pasting this code to your page, see the Widget Process to expect:
Step 1
1: Click the "Request Loan" button,
2. Depending on the value of the 'customer_type' field ('1' for individual and '2' for corporate), you will see KYC for Individual or Corporate
3. Click the Next button to proceed
PS:
STEP 1 is only visible to first-time borrowers who have never been through advancly onboarding UI or API (Application Programming Interface).
Step 2
Enter OTP sent to your Email
Click Next to proceed
STEP 3
Your registration is complete
Click Done to proceed to the widget dashboard
Step 4
Under Quick Actions, click on Loans
Step 5
Click on Request for new loan
Step 6
View your wallet balance
Click Next to proceed
Step 7
Select a Loan product
Enter Loan Amount
Enter Loan Tenure
Click Next to proceed
Review the Loan offer and click Next to proceed
Step 8
1. You Accept or Decline the Loan offer.
2. A success message of loan being processed or an error message is displayed depending on the action taken by the borrower.
