Adding the widget to your page

1. Create a new container

Add  the container where  you want to insert the widget. 

 <div id="mywidget" class=”widget”> </div>

2. Adapt the size of the container

Give a size to your container as the widget will automatically take all the space available.

.widget {
    width: 700px;
    height: 500px;
}

3. Add the script of the Widget

In order to build the script of the BRIDGE Widget, you must gather the following elements :

• The widget URL 
  

src=https://v3-widget.leadformance.com/v1/bridge-widget.js

It is the URL of the BRIDGE Widget V3. We advise you to always use the latest version of the widget. You will find all the releases notes following this link : https://help.leadformance.com/hc/en-us/articles/115001766454-Widget-Release-Notes

• The target of the widget

<data-target=”#mywidget”>

Specify the target of the Widget, ie the dom element created on the first step where the widget will be inserted.

The target has to be a valid parameter for the `document.querySelector` function.

• The API Key

 data-api-key=”your_api_key”

This key is provided by the Leadformance administrators. It is part of the required credentials in order to authenticate to Bridge. 

• The API Secret Key

data-api-secret=”your_secret”

The other key required to access the BRIDGE API, and also provided by Leadformance administrators.

• The Store Locator URL

    data-store-locator-url="https://your.store.locator.url"> 

This URL is the Home Page of your BRIDGE Store Locator (if you got any one).

You will finally build the following script : 

<script src=https://v3-widget.leadformance.com/v1/bridge-widget.js
 data-target=”#mywidget”
 data-api-key=”your_api_key”
 data-api-secret=”your_secret”
 data-store-locator-url="https://your.store.locator.url">
</script> 

Think to embed this script after the widget div, in order to let the widget run first ;)

Example of error : Script placed into the head tags. The script will be generated before the div creation.

If you want to have an overview of the widget with and without CSS style, and see an example of the code implemented, you can consult: https://widget-demo.leadformance.com/