Leasing
Widgets
Button widget

Lease button widget

This widget renders only a button, which when clicked, opens our calculator.

It doesn’t require any equipment data to work, so you can place this button anywhere on your website.
The widget has several configuration parameters, which you can read about below.

Getting started

Add a piece of HTML to your web page with class beequip-button, in a location where you want the button to render.

<a href="https://lease.beequip.com" class="beequip-button"
    >Lease equipment bij Beequip</a
>

Next, add the required parameters with data-attributes, as described below.

<a
    href="https://lease.beequip.com"
    class="beequip-button"
    data-token="Xhpx7QT6xRF9ZHyABrxmm12Q"
    >Lease equipment bij Beequip</a
>

Finally, add a reference to a script hosted by Beequip. This script will render the widget.

<a
    href="https://lease.beequip.com"
    class="beequip-button"
    data-token="Xhpx7QT6xRF9ZHyABrxmm12Q"
    >Lease equipment bij Beequip</a
>
<script async src="https://widgets.beequip.nl/embed-button.js"></script>

How it works

Parameters

You can supply parameters to the widget to influence the layout, configure the calculation, or to pre-fill the widget’s input fields with data from your product’s page.

Required parameters

These parameters must be supplied via data- attributes, otherwise the widget will not work.

token

We use a unique token string as an identifier for your organisation.

<a data-token="YOUR_TOKEN_HERE"></a>

By adding this token to your widget, we can:

You can find your token on the settings page in your Beeport account.
If you don't have a Beeport account, you can request a token with this form:

Optional parameters

brand

A string representing The brand/manufacturer of the equipment.

<a data-brand="Caterpillar"></a>
model

A string representing the model of the equipment.

<a data-model="AS 450"></a>
year

An integer representing the year the equipment was built.

<a data-year="2017"></a>
purchase-price

The decimal amount it costs to buy the equipment. This value is shown in an input field, and can be changed by the user.
It is a required parameter so the widget can check whether the object is eligible for leasing.

<a data-purchase-price="15000"></a>

The equipment should cost at least € 15.000. We don’t accept deals with a lower purchase price.

category-id integer

An integer representing the asset category the equipment belongs to. Lookup the appropriate ID in the category table.
If you do not supply the category ID, a dropdown will be rendered where the user must choose a category.

<a data-category-id="3"></a>
subcategory-id integer

With the subcategory ID you can supply the asset subcategory the equipment belongs to. Lookup the appropriate ID in the category table. If you do not supply the subcategory ID, a dropdown will be rendered where the user must choose a subcategory. If a subcategory is provided, a category id is mandatory.

<a data-category-id="3" data-subcategory-id="4"></a>
object-used

A boolean indicating the condition the equipment is in. true if it is used, false if it is new.
Defaults to true.

<a data-object-used="false"></a>
width

An integer indicating the width of the rendered widget, in pixels or a percentage. Defaults to 180 pixels.

<a data-width="400"></a>
height

An integer indicating the height of the rendered widget, in pixels or a percentage. Defaults to 40 pixels.

<a data-width="600"></a>
button-color

A string that will set the text color of the button to the given value. The value can be any valid CSS color. Defaults to #fff.

<a data-button-color="#056fff"></a>
button-background-color

A string that will set the background color of the button to the given value. The value can be any valid CSS color. Defaults to #ffa100.

<a data-button-background-color="rgb(0, 0, 0)"></a>
button-text

A string that will change the text of the button. Defaults to “Bereken je lease”.

<a data-button-text="Some custom button text"></a>

Available categories and subcategories

These are the available options for the category-id and the subcategory-id parameter.

Loading categories …

Examples

Example widget with a few attributes

<a
    href="https://www.beequip.nl"
    class="beequip-button"
    data-brand="Caterpillar"
    data-model="AS 450"
    data-category-id="13"
    data-year="2019"
    data-purchase-price="30000"
    data-token="Xhpx7QT6xRF9ZHyABrxmm12Q"
>
    Lease equipment bij Beequip
</a>
<script async src="https://widgets.beequip.nl/embed-button.js"></script>

Troubleshooting

It's possible the widget does not show up, or does not work correctly. When starting to render, the widget performs a few checks to ensure the widget is configured properly. If these checks fail, the widget will not render, and it will show a message with the probable cause in the developer console. (To access the developer tools in your browser, press F12.)

Common causes of problems are:

  • One of the required parameters is missing. Check whether you have added all required parameters.
  • The data attributes that configure the widget are not added to the element with class="beequip-button". The class and the data attributes should be placed on the same HTML element.
  • The purchase price is formatted as currency. The purchase price should not contain any formatting, e.g. data-purchase-price="€ 15.000" will not work, and should be changed to data-purchase-price="15000".
  • One of the color parameters has an incorrect value. The widget tries to build a working theme from the supplied parameters, and it will fail if a theming parameter is not a valid CSS color.
WidgetsCalculcator widget