Advancly Embed Integration (Widget)

Here is all you need to get started with Advancly Borrower’s Widget!

Introduction

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 contactus@advancly.com

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>

Find WidgetUrl(production url)  here:  ‘https://borrower.advancly.com/create-loan-account'

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

  1. Enter OTP sent to your Email

  2. Click Next to proceed

STEP 3

  1. Your registration is complete

  2. Click Done to proceed to the widget dashboard

Step 4

  1. Under Quick Actions, click on Loans

Step 5

  1. Click on Request for new loan

Step 6

  1. View your wallet balance

  2. Click Next to proceed

Step 7

  1. Select a Loan product

  2. Enter Loan Amount

  3. Enter Loan Tenure

  4. Click Next to proceed

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

PreviousWalletNextIntegration Overview

Last updated