Styling the widget

Your site's CSS can't reach it

Every part of the widget renders inside a shadow root (attachShadow({ mode: 'open' })), and resets itself with :host { all: initial }. Your stylesheet won't change it by accident, and its styles won't leak into your page.

You style it on purpose with three CSS custom properties. Custom properties are inherited through the shadow boundary, so set them on :root or on the element that holds an inline widget.

:root {
  --gg-color: #0f766e;
  --gg-radius: 10px;
  --gg-font: 'Inter', system-ui, sans-serif;
}

/* Just this inline widget */
#book-here {
  --gg-radius: 4px;
}

Set these in your stylesheet, so they're in place before the widget draws. The colour is read when each widget appears.

Brand colour

The colour comes from the first of these that's set:

1. --gg-color on the widget's element (or inherited from :root)
2. data-color="#RRGGBB" on the script tag
3. the colour in your dashboard's widget settings

Any colour works. The widget works out readable shades for you: button labels switch between white and dark text, and links and focus rings are darkened or lightened until they pass WCAG AA contrast, in both light and dark mode.

Fonts

By default the widget adds one <link> to your page's <head> that loads Figtree from Google Fonts. Fonts have to load in the page itself, because @font-face rules don't register inside a shadow root. If Figtree is already loaded on the page, it isn't added again.

To use your site's font instead, add data-font="inherit" to the script tag. The widget then uses the font of the element it sits in, and loads nothing from Google:

<script src="https://justagoodguy.us/w.js" data-key="pk_your_key" data-font="inherit" async></script>

You can still set --gg-font to pick a specific family. Make sure that font is loaded on your page.

Position and the floating button

• The button sits 16px from the bottom corner, above the phone's home bar on iPhones.
• Choose the side in your dashboard's widget settings, or override it with data-position="left" or "right" on the script tag.
• The button's label comes from the dashboard. The default is "Book or ask a question".
• To hide the button and only use inline widgets and triggers, add data-launcher="false".

Phones

Under 520px wide, the panel opens full screen and keeps clear of notches and the home bar with env(safe-area-inset-*) padding. Browsers only report those insets when the page's viewport tag includes viewport-fit=cover:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Dark mode

The widget follows the visitor's prefers-color-scheme setting. In dark mode it uses dark surfaces but keeps your brand colour, adjusted so text on it stays readable. It does not read your site's own dark-mode switch.

z-index

The floating panel and button sit at z-index: 2147483000. If your own sticky header or cookie banner needs to sit above it, give that a higher value.