Understanding the BankingBridge Embed

To understand how the Embed code works, let's look at an example.

Adding an embed to your page

The following code snippet demonstrates adding a BankingBridge Embed.

HTML

<div id='bb-embed-init'>
    <script>
        window.BB || document.write("<script src='https://cdn.bankingbridge.com/assets/external/index.js' type='text/javascript' charset='utf-8' defer=''><\/script>")
    </script>
    <script>
        window.addEventListener('DOMContentLoaded', function() {BB.init('<app_key>', document.getElementById(''bb-embed-init'),<config_object>);})
    </script>
</div>

Below is an explanation of what the code does.

Create a container for the embed

You create a <div> element that will contain the Embed and give it an ID. You will reference this ID later in the code.

Create the BB variable

The Embed gives you a global variable called BB. You can use this variable to access the BankingBridge SDK.

The first script element inside the <div> checks if the BB variable exists and, if not, creates it by importing a script from BankingBridge.

Initialize the BB variable

To use the BB variable, you first need to initialize it.

The second script element inside the <div> adds a DOMContentLoaded event listener that calls BB.init().

BB.init() takes three arguments:

1. app_key
   Allows BankingBridge to authenticate the embed. In the above code sample, replace the <app_key> placeholder with your App Key. If you do not have a valid App Key, see Authentication.

2. wrapperDiv
   The ID of the <div> element that contains the embed.

3. config
   A JavaScript object that is used to pass data to the embed. In the above code sample, replace the <config_object> placeholder with a config definition.

Initially, you can pass a minimal config object containing just the required type parameter. Later you can add/update fields of the config by using BB.api.setConfig().

For details on the config object, see Config object fields.