The 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.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

You can integrate as many floating widgets as you like on your website. Each floating widget can be configured to open the widget with different experiences and sell tickets or vouchers.

Including the floating widget element in your website is as easy as including a normal html tag. You can configure the floating widget by setting the following attributes:

<bk-floating-widget
        data-widget-id="my-floating-widget-id"
        data-experiences-for-tickets="experience-id-a,experience-id-b"
        data-experiences-for-vouchers="experience-id-a,experience-id-b"
></bk-floating-widget>

Default trigger

If not specified else, the floating widget will display a default trigger. This consist of an html element with a ticket icon that opens the widget when clicked. You can customise the trigger by setting the trigger attribute.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

Custom trigger

To pass a custom trigger, you can wrap the 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.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

Multiple widgets in single page

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

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox