Buttons and triggers · Just a Good Guy docs

Three attributes

Add one of these to any element. Clicking it opens the floating panel.

Attribute	What it does
`data-gg-open="chat"`	Opens the panel on a view: `chat`, `booking`, `callback` or `contact`.
`data-gg-book="Haircut"`	Opens booking with that service selected. Use a service id or its name. Leave it empty (`data-gg-book=""`) to open booking at the first step.
`data-gg-ask="Do you take walk-ins?"`	Opens chat and sends that question for the visitor, so the answer is waiting for them.

HTML

<button type="button" data-gg-book="Haircut">Book a haircut</button>
<button type="button" data-gg-open="callback">Call me back</button>
<a href="#" data-gg-ask="Do you have parking?">Is there parking?</a>

If an element has more than one, data-gg-ask wins, then data-gg-book, then data-gg-open.

Good to know

Elements added later work too. Clicks are caught at the document level, so triggers inside menus, modals or content loaded after the page work without extra code.
The click's default action is cancelled. A link with a trigger won't navigate. To keep a fallback for people without JavaScript, point the link at your booking page:
HTML
```
<a href="https://justagoodguy.us/b/your-business" data-gg-book="">Book online</a>
```
Your own click handlers come first. If another script cancels the click (event.preventDefault()), the trigger is skipped.
Use real buttons or links. A <button> or <a> works with the keyboard and screen readers. A <div> with a trigger doesn't.
Without the floating button. Triggers work even with data-launcher="false". The panel opens when a trigger is clicked.

Doing the same from code

Each attribute has a JavaScript API twin:

JavaScript

GoodGuy.open('callback');
GoodGuy.book({ service: 'Haircut' });
GoodGuy.ask('Do you take walk-ins?');