Developers
Widgets reference
Put chat, booking, services, call-back, contact, hours, manage and waitlist-offer widgets anywhere on a page.
For developersOn this page
How inline widgets work
Add an element with data-gg-widget="TYPE" anywhere in your page, and load the widget script once. The widget renders in place, inside its own shadow root, so your CSS and its CSS stay apart.
<div data-gg-widget="booking"></div>
<script src="https://justagoodguy.us/w.js" data-key="pk_your_key" async></script>- You can have as many inline widgets on a page as you like.
- Widgets added to the page later are picked up automatically (the script watches the page). You can also render one from code with
GoodGuy.mount. - If the page only uses inline widgets, add
data-launcher="false"to the script tag to hide the floating button. - An element is only rendered once. To change its options, replace the element with a new one.
| Type | What it shows | Options |
|---|---|---|
chat | The AI chat, inline | data-gg-height |
booking | The step-by-step booking flow | data-gg-service, data-gg-staff, data-gg-source |
services | Your services with prices and a Book button on each | none |
callback | A "Call now" button, or a call-back request form | none |
contact | A message or quote request form | data-gg-service |
hours | Your weekly hours with an Open now or Closed badge | none |
manage | One customer's booking: move or cancel | data-gg-token (required) |
offer | A waitlist offer the customer can claim | data-gg-token (required) |
chat
The same AI receptionist as the floating panel, shown inline. Good for a "Questions?" section or a contact page.
| Option | Default | Notes |
|---|---|---|
data-gg-height | 480 | Height in pixels. The smallest allowed is 320. |
<div data-gg-widget="chat" data-gg-height="560"></div>The conversation is shared with the floating panel on the same site, so a visitor can start in one and carry on in the other.
booking
A step-by-step flow:
- pick a service
- pick a person, if more than one person does that service and you let customers choose
- pick a day and time (buttons, not a date picker)
- enter a name and a mobile number or email, plus the address for at-home visits
- confirm
After booking it shows the confirmation and a link to change or cancel.
| Option | What it does |
|---|---|
data-gg-service | Preselect a service by id or by name, for example data-gg-service="Haircut". |
data-gg-staff | Preselect a person by staff id. |
data-gg-source="booking_page" | Records the booking as coming from a booking page instead of the widget. Only widget (the default) and booking_page are accepted. |
<!-- A "Book a haircut" section that skips the service step -->
<div data-gg-widget="booking" data-gg-service="Haircut"></div>Service and staff ids come from GET /v1/services and GET /v1/staff, or from GET /api/public/services.
services
Your active services, with each one's price label (for example "$45", "From $80" or "Price varies") and a Book button. Tapping Book opens the booking flow with that service selected.
<div data-gg-widget="services"></div>There are no options. The list follows the order you set in the dashboard.
callback
When someone can take a call right now (you're inside your call hours, live calls are on and you have a phone number), it shows a Call now button that dials your number. Otherwise it shows a form to request a call-back, with the next open call-back windows as buttons.
<div data-gg-widget="callback"></div>Call-back windows come from your call hours. A request lands in your inbox and triggers a "Call-back requested" alert.
contact
A form for a message or a quote request: name, phone or email, and what they need. It creates a lead in your inbox.
| Option | What it does |
|---|---|
data-gg-service | Ties the request to a service, by id. Useful for quote-type services. |
<div data-gg-widget="contact" data-gg-service="svc_8f3k2m9q1x7w4r6t"></div>hours
Your weekly booking hours, with an Open now or Closed badge. The weekly list shows your regular business hours. The badge also takes whole-business closures and holidays into account.
<div data-gg-widget="hours"></div>manage
One customer's booking, opened from the private link in their confirmation. It shows the details and lets them:
- Pick a new time from open times in the next 14 days
- Cancel
| Option | What it does |
|---|---|
data-gg-token | Required. The token from the customer's manage link, https://justagoodguy.us/m/<token>. |
<div data-gg-widget="manage" data-gg-token="TOKEN_FROM_THE_LINK"></div>You rarely need this yourself: every confirmation already links to a ready-made page at /m/<token>. Use it if you want that page on your own site. Treat the token like a password: anyone with it can change the booking.
offer
A waitlist offer, opened from the link in the offer text or email. It shows the service and time with a Claim this spot button, or a "someone got it" message if it's gone.
| Option | What it does |
|---|---|
data-gg-token | Required. The token from the offer link, https://justagoodguy.us/offer/<token>. |
<div data-gg-widget="offer" data-gg-token="TOKEN_FROM_THE_LINK"></div>See Waitlist for how offers are sent.
Errors and loading
While the widget loads its settings it shows a small loading state. If something is wrong, such as a revoked key or a site that isn't on your allowed sites list, it shows the server's message inside the widget and logs a warning that starts with [GoodGuy] to the browser console.