Trigger style examples

Floating widget trigger can be customised in different ways

Trigger position

Trigger can be displayed in these positions 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center-left', 'center-right'

Position with top-left

import "./styles.css";

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

Open Sandbox

<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"
        data-trigger='{"position": "top-left", "icon": "ticket", "buttonSize": "small"}'
></bk-floating-widget>

Position with center-left .

import "./styles.css";

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

Open Sandbox

Trigger with different icons

Trigger with icon shopping-bag

import "./styles.css";

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

Open Sandbox

Trigger with no label

import "./styles.css";

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

Open Sandbox