Passing Parameters in the URL | Rate Table

This guide explains how to dynamically initialize your BankingBridge rate table embed using URL parameters. This method is ideal if you wish to customize your rate table based on user interactions or external links.

Step-by-Step Guide

Step 1: Add the BankingBridge Embed Code to Your Webpage

First, ensure you have the standard BankingBridge embed code on your webpage: 

HTML

  <div id='bb-389bc'></div>
  

  <script>

  (function(){

  function i(){

  if(window.BB)

  BB.init('YOUR_WIDGET_ID', document.getElementById('bb-389bc'), { type: 'standalone' });

  }

  if(window.BB) i();

  else {

  var s = document.createElement('script');

  s.src='https://cdn.bankingbridge.com/assets/external/index.js';

  s.type='text/javascript';

  s.charset='utf-8';

  s.async=true;

  s.onload=i;

  document.head.appendChild(s);

  }

  })();

  </script>

Replace 'YOUR_WIDGET_ID' with your actual widget ID.

Step 2: Allow URL Parameter Overrides

Use the following script, adapted from our example CodePen, to enable your embed to accept URL parameters:

HTML

  <script>

  (function () {

  const allowedKeys = [

  1,

  "property_type",

  "loan_type",

  "list_price",

  "credit_score",

  "loan_amount",

  "cash_out",

  "property_zip_code",

  "loan_purpose",

  "residency_type",

  "loan_term"

  ];

  const params = new URLSearchParams(location.search);

  const overrides = {};

  allowedKeys.forEach((key) => {

  if (params.has(key)) {

  let value = params.get(key);

  if (/^-?\d+(\.\d+)?$/.test(value)) value = Number(value);

  overrides[key] = value;

  }

  });

  window.addEventListener("DOMContentLoaded", () => {

  BB.init("YOUR_WIDGET_ID", document.getElementById("bb-389bc"), {

  type: "standalone",

  defaults: overrides,

  });

  });

  })();

  </script>

Ensure you replace with the ID provided by BankingBridge.

Step 3: Using URL Parameters

To customize the rate table using URL parameters, construct links to your webpage as follows:

 https://yourwebsite.com/rates?list_price=450000&credit_score=780

You can pass multiple parameters separated by & . For instance, to set the list_price and credit_score , you use:

• list_price=450000
• credit_score=780
   

Step 4: Testing the Setup

Test the implementation by opening your webpage in a private browsing window and adding URL parameters to confirm the embed initializes correctly.

Allowed Parameters Overview

Here’s a quick reference for parameters you can pass:

• property_type : (e.g., "townhome")
• loan_type : (e.g., "conventional")
• list_price : numeric value
• credit_score : numeric value
• loan_amount : numeric value
• cash_out : numeric value
• property_zip_code : numeric value
• loan_purpose : (e.g., "purchase")
• residency_type : (e.g., "primary")
• loan_term : numeric value in years

Practical Example

A complete example URL could look like:

https://yourwebsite.com/rates? property_type=single_family&loan_type=fha&list_price=500000&credit_score=720&loan_amount=450000

Conclusion

You’ve now successfully set up your BankingBridge embed to dynamically accept URL parameters. This feature enables personalized experiences for your users and simplifies interactions.

For any questions, please contact our support team.