Guides

Objects and Methods

How to create, update, and use the BB global variable.

Suggest Edits

The BankingBridge Embed creates a BB global variable on your page. The BB global variable allows you to make use of the BankingBridge API via the methods of the BB.api object.

Below is a description of the objects and methods available in the SDK:

MethodDescription
BB.init(app_key, wrapperDiv, config)Used to initialize the BB global variable.
BB.api.getState()Returns the complete Embed state information for the current Embed.
BB.api.help()Displays available SDK functions in the console log.
BB.api.leadSubmit(leadData)Used to create a new lead directly from a webpage. An example would be connecting an existing contact form to BankingBridge for CRM routing.
BB.api.loanCalc(calcInput)Used to generate quick loan estimates that include full estimated payment amounts.
BB.api.workflowInit(config)Used to initialize the Lead Workflow with pre-answered steps.
BB.api.openModal(modalType)Used to open BankingBridge modals from the parent page.
BB.api.setConfig(config)Used to re-initialize the Embed with explicitly defined config fields. Fields in the provided config are merged with config fields provided by the Embed by default. Config fields are used globally across all components in the Embed.
BB.api.rateflow.scenarios(scenarioInput)Returns a JavaScript object that contains data for a set of mortgage scenarios.
BB.api.rateflow.price(priceInput)The price API call is used for custom pricing scenarios.

BB.init(app_key, wrapperDiv, config)

You must call this method before you can use the BB global variable to access the BankingBridge SDK.

There are 3 required parameters:

NameTypeDescription
app_keyStringAllows BankingBridge to authenticate the Embed. If you do not have a valid App Key, see Authentication.
wrapperDivStringThe ID of the element that the Embed will load inside of.
configJavaScript ObjectThis object must contain data required to configure the Embed.
Initially, you can pass a minimal config, containing just the required type parameter. Later you can add and update fields of the config with BB.api.setConfig(config).

Here is the config object definition:

{
  type: <string>, // Require. Possible values: "api", "standalone", "widget".
  nmls: <string>, // Nationwide Mortgage Licensing System number
  list_price: <int>, // Appraised value of property.
  credit_score: <int>, // Estimated credit score of borrower.
  leadDetails: <object>
}

For more information on Embed types, read Types of Embeds.

BB.api.getState()

Returns a JavaScript object apiState.

var state = BB.api.getState()

The apiState object provides the complete Embed state information for the current Embed.

Here is the definition of apiState:

{
  apiReady: <Boolean>,
  modalVisible: <Boolean>,
  barVisible: <Boolean>,
  activeModal: <int>,
  iframesToSync: <object>,
  modals: <array>,
  config: <object>,
  rt_usage_data: <object>,
  isFullWidget: <Boolean>
}

BB.api.help()

Displays a list of the available SDK functions in the console log.

var helper = BB.api.help()

BB.api.leadSubmit(leadData)

Used to create a new lead directly from a webpage. An example would be connecting an existing contact form to BankingBridge for CRM routing.

leadData

The leadData JavaScript object has the following properties:

{
    first_name: <string>,
    last_name: <string>,
    email: <string>,
    phone: <string>,
    details: {
        list_price: <int>,
        credit_score: <int>,
        message: <string>,
        loan_type: <string>,
        ...
    }
}

leadSubmit() example

You can submit lead data using the following code:

BB.api.leadSubmit(
  {
        first_name: 'John',
    		last_name: 'Doe',
   		 	email: '[email protected]',
    		phone: '4155552671',
        details: {
          list_price: 400000,
          credit_score: 700,
          message: 'Example message',
          loan_type: 'conventional'
        }
    }
)

BB.api.loanCalc(calcInput)

Used to generate quick loan estimates that include full estimated payment amounts.

calcInput

The calcInput JavaScript object has the following properties:

{
    credit_score: <int>,
    dpp: <int>, // down payment percentage (0-100)
    list_price: <int>,
    loan_term: <int>,
    ...
}

loanCalc() example

You can receive a loan estimate by using the following code:

var estimate = BB.api.loanCalc(
  {
        credit_score: 700,
    		dpp: 35,
   		 	list_price: 400000,
    		loan_term: 300
    }
)

The response of this API call would be stored in the variable estimate. A typical response would have the following structure:

{
    assumptions: <object>
    card_details: {
        brand: <object>
        cards: <array> // most relevant pricing results
        timestamp: <int>
    }
    values: {
        home_insurance: <int>
        pi: <int> // principle and interest
        taxes: <int>
        mi: <int> // mortgage insurance
    }
}

BB.api.openModal(modalType)

Used to open BankingBridge modals from the parent page.

Here are the possible values of the modalType parameter:

  • "mortgageCalc" - Open a mortgage calculator.
  • "contactForm" - A static loan officer branded contact form.
  • "dynamicForm" - A dynamic contact form.
  • "leadWorkflow" - A BankingBridge lead workflow, designed to collect information from a potential client.
  • "rateSubscription" - A form designed to create a new lead with an email subscription.

openModal example

In the following example, clicking the Get My Rate button opens a modal that provides the user a mortgage rate option after collecting the user's information that can be used to create a lead.

<button onclick="BB.api.openModal('leadWorkflow')">Get My Rate</button>

BB.api.workflowInit(config)

Used to initialize the Lead Workflow with pre-answered steps.

This method can be called before calling openModal("leadWorkflow") to initialize the Lead Workflow with information you already know. Fields in the provided config are merged with answers provided by the user in the course of the workflow.

In the following example, known answers are provided in the config object as key-value pairs <step_id>: <step_answer>. 

BB.api.workflowInit(
    {
      loan_purpose: <purpose_value>,
      <step_id>: <step_answer>,
      ...
  	}
)

Steps answered by calling workflowInit() are skipped as the user is completing the workflow to make the workflow shorter and more user-friendly.

The loan_purpose property of the config object must have one of the following values:

  • "purchase"
  • "refinance"

BB.api.setConfig(config)

Used to re-initialize the Embed with explicitly defined config fields. Fields in the provided config are merged with config fields provided by the Embed by default. Config fields are used globally across all components in the Embed.

BB.api.setConfig(
  {
    nmls: '1234567',
    credit_score: 700,
    list_price: 400000, 
    loan_type: 'conventional' // conventional, VA, FHA, USDA, arm
  }
)

BB.api.rateflow.scenarios(scenarioInput)

Returns an object that contains data for a set of mortgage scenarios.

scenarioInput

This is an optional parameter of type JavaScript object.

The scenarioInput object has the following properties:

{
    list_price: <number>,
    credit_score: <number>,
    pricing_set_id: <int>,
    program_preference: <string>,
    ob_profile_id: <int>
}

rateflow.scenarios() example

var response = BB.api.rateflow.scenarios(
    {
        list_price: 400000,
    		credit_score: 700
    		pricing_set_id: 1, 
    		program_preference: 'Example',
     		ob_profile_id: 1
    }
)

After executing this code the response variable will contain a response from the API containing the following data:

{
    results: [
        {
            apr: <number>,
            closing_cost: <int>,
            dpp: <number>,
            fee: {
                title: <string>,
                amount: <int>
            },
            label: <string>,
            pi_monthly: <number>,
            pricing_tpl_id: <int>,
            pts: <number>,
            rate: <number>,
            rateflow_log_id: <int>,
            term: <int>,
            trend_data:{
                aggregation: <string>,
                current_trned_val: <number>,
                range: <int>,
                slope: <number>,
                trend: <string>,
                y_int: <number>
            }
        },
        ...
    ]
}

BB.api.rateflow.price(priceInput)

This method is used for custom pricing scenarios.

priceInput

The price() method expects the following object as the priceInput parameter:

{
    list_price: <int>, // required - Appraised value of property.
    loan_amount: <int>, // required - Loan amount or loan balance (in the case of a refinance).
    debt_to_income: <int>, // Percent of monthly obligations in monthly income. 
    purchase_readiness: <int>,
    credit_score: <int>,
    employment_status: <string>,
    foreclosure_bankruptcy: <string>,
    loan_purpose: <string>, // "purchase", "refinance"
    residency_type: <string>, // "primary_home", "second_home", "rental_home"
    military_eligible: <string>, // "yes", "no"
    household_income: <int>,
    location: {
        state: <string>,
        city: <string>,
        street_address: <string>,
        county: <string>,
        zipcode: <string>
    },
    loan_type: <string>, // "conventional", "VA", "FHA", "USDA", "ARM"
    message: <string>,
    property_type: <string>,
    cash_out: <int>
}

rateflow.price() example

var response = BB.api.rateflow.price(
  {
    list_price: 400000,
    loan_amount: 360000
  }
)

The response you can expect depends on what values you supplied to in the priceInput parameter.

Here is the definition of the response:

{
    results: [
        {
            apr: <number>,
            closing_cost: <int>,
            dpp: <number>,
            fee: {
                title: <string>,
                amount: <int>
            },
            label: <string>,
            pi_monthly: <number>,
            pricing_tpl_id: <int>,
            pts: <number>,
            rate: <number>,
            rateflow_log_id: <int>,
            term: <int>,
            trend_data:{
                aggregation: <string>,
                current_trned_val: <number>,
                range: <int>,
                slope: <number>,
                trend: <string>,
                y_int: <number>
            }
        },
        ...
    ]
}

Updated 7 months ago

What’s Next