Follow

Lendsnap Widget API User Guide

Introduction

Sign up for the Lendsnap Widget service to access the Lendsnap Widget API. After quick setup and customization described below, you will be ready to use the Lendsnap Widget for collecting borrower documents. For even more information about the Lendsnap Widget, please contact our customer service (support@lendsnap.com). 

Installation

  1. Make sure to have a way to initialize the Lendsnap widget from your website, for example, a button that will trigger the Lendsnap widget on a click event. 

    <button id="openLSWidget">Submit Documents</button>

  2. Include the library by adding the following script in the <head> section of each page where the Lendsnap widget is used.

    <head>
    ...
        <script src="https://borrower.lendsnap.com/widget/lendsnap-widget.js">
        </script>
    ...
    </head>

  

Embedding and Customizing the Widget

  1. Add the following Lendsnap widget element in the body (widget reference).

    <div id="ls-widget"></div>

    When the widget is embedded in your page, LSWidget global variable is available with the init method to initialize the widget as the event handler of your choice (e.g. click).

  2. Add a javascript file or code that will handle the event, for example, a button click event.

    var openLSWidgetBtn = document.getElementById("openLSWidget"); openLSWidgetBtn.addEventListener("click",function(){
    LSWidget.init(configuration)});


  3. To customize the basic design of your widget, provide the parameter values for the object configuration. The values will be passed when initializing the widget in your page.

    var configuration = {
    config:{
    clientName: '<CLIENT NAME>',
    firstName: '<FIRST NAME>',
    lastName: '<LAST NAME>',
    apiKey: '<PUBLIC KEY>',
    conditions: [
    {
    document_type: <DOC TYPE>,
    count_requested: <COUNT>
    }
    ]
    uploadBankType: '<UPLOAD BANK TYPE>',
    },
    styles: {
    body: {
    width: <BODY WIDTH>,
    color: '<BODY COLOR>',
    backgroundColor: '<BODY BACKGROUND COLOR>',
    fontSize: <BODY FONT SIZE>,
    },
    button: {
    color: '<BUTTON COLOR>',
    backgroundColor: '<BUTTON BACKGROUND COLOR>',
    fontSize: <BUTTON FONT SIZE>,
    },
    },
    callback_func: <myCallback>

    }


    Value Description
    CLIENT NAME String. Your company name. 
    FIRST NAME String. Borrower first name. 
    LAST NAME String. Borrower last name. 
    PUBLIC KEY String. Unique client ID provided by Lendsnap. 
    document_type Consists of {document_type, count_requested}. The combination can be repeated for each document_type based on your service level.
    DOC TYPE Number equal to or less than your service level.
    1: Bank statement
    2: Investment statement
    3: Payroll service (pay stub and W-2)
    4: Personal tax return
    COUNT Number of documents imported, equal to or less than your service level.
    UPLOAD BANK TYPE Comma separated list of numbers (e.g. '1,2,3'). Used only if DOC TYPE: 1 is provided. Equal to or less than your service level.
    1: Checking statement
    2: Savings statement
    3: Combined statement
    BODY WIDTH Number. Widget width in pixels. Default is 400.
    BODY COLOR String. Widget body text color. Default is '#000'.
    BODY BACKGROUND COLOR String. Widget body color. Default is '#f3f3f3'.
    BODY FONT SIZE Number. Widget body text font size. Default is 14.
    BUTTON COLOR String. Widget button text color. Default is '#fff'.
    BUTTON BACKGROUND COLOR String. Widget button color. Default is '#638bba'.
    BUTTON FONT SIZE Number. Widget button text font size. Default is 14.
    myCallback The name of an uninitialized function that can be passed into the configuration, that is called when the widget is finished.

 

Example

<!DOCTYPE html>
<html>
<head>
   <title>My Widget Paget</title>
   <script async src="https://borrower.lendsnap.com/widget/lendsnap-widget.js"></script>
</head>
<body>
<button id="openLsWidget">Open Widget</button>
<div id="ls-widget"></div>
<script type="text/javascript">

    function openAlert() {
        alert('The widget will now close, thank you!');
    }
     var openLsWidgetBtn = document.getElementById("openLsWidget");
              openLsWidgetBtn.addEventListener("click",function() {
                   LSWidget.init({
                       config: {
                           clientName: 'Snappy Mortgage',
                           uploadBankType: '1',
                           firstName: 'John',
                           lastName: 'Smith',
                           apiKey: 'jnsjojfoipornvkdasdpmnri30748092maskfmlmcpeowuiporip32m1oe9vhkl',
                           conditions: [
                              {
                                document_type: 1,
                                count_requested: 24
                              },

                              {
                                document_type: 2,
                                count_requested: 10
                              }
                           ]
                       },
                       styles: {
                           body: {
                               width: 400,
                               color: '#fff',
                               backgroundColor: '#000',
                               fontSize: 14
                           },
                           button: {
                               color: '#fff',
                               backgroundColor: '#000',
                               fontSize: 14
                           }
                       },

                       callback_func: openAlert
                   });
               });
 </script>
 </body>
 </html>

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk