Floating Widget Element

A floating widget element is a floating button that opens the widget when clicked. It can be used to open the widget from any page on your website.

HTML element

To integrate floating widget to your website add the <bk-floating-widget> element with data-widget-id attribute set to your widget identifier.

<bk-floating-widget data-widget-id="my-floating-widget-id"></bk-floating-widget>

The complete integration code and the widget identifier can be obtained from from bookingkit software`s widget configurator.

You can integrate as many floating widgets as you like on your website by placing multiple <bk-floating-widget> elements. Each floating widget can be configured to open the widget with different experiences or configuration options.

Prerequisites

The widget library has to be installed first.

Default Trigger

If not specified else, the floating widget will display a default trigger component - a floating button. You can customise the trigger in the widget configurator.

Custom Trigger

To use a custom trigger, you can wrap an html element in the widget element. The custom trigger can be any html element that emits onclick events, so most html elements can be used as a trigger. As opposed to the default trigger, the custom trigger will not be styled by the widget. You can style the trigger yourself using css. Also, as opposed to the default trigger, the custom trigger will not disappear when the widget is opened.

<bk-floating-widget data-widget-id="my-floating-widget-id">
    <a href="#">I am a custom trigger now</a>
</bk-floating-widget>

Multiple Widgets

It is possible to configure multiple widgets on the same page, each with its own unique settings or configuration.

<bk-floating-widget data-widget-id="my-floating-widget-id-1">
    <a href="#">I am a custom trigger now</a>
</bk-floating-widget>
<bk-floating-widget data-widget-id="my-floating-widget-id-2" />

Next steps

Explore more configuration options here.