Configuring the widget
Every dashboard setting, what it changes, and when to use it.
6 мин чтенияОбновлено
Configuration lives on the site, not in your code. Changes are picked up by the next page load — no deploy, no cache purge on your side.
Appearance
| Setting | Values | Notes |
|---|---|---|
| Position | Six corners and mid-edges | Visitors can drag the button; their choice is remembered locally. |
| Offset | 0–200 px on each axis | Use it to clear a cookie banner or a chat launcher. |
| Size | Small, medium, large | Large meets the 44 × 44 px target size of WCAG 2.5.8 with room to spare. |
| Shape | Circle, rounded, square | Purely cosmetic. |
| Accent colour | Any hex value | We check it against the icon colour and warn below 3:1. |
| Theme | Light, dark, auto | Auto follows the visitor's prefers-color-scheme. |
Adjustments
All fourteen adjustments are on by default. Turn one off and it disappears from the panel entirely — no greyed-out control, no dead affordance. Common reasons to disable one:
- Hide images conflicts with a gallery or a product catalogue where imagery is the content.
- Slow cursor is disorienting on an application with drag interactions.
- Blue light filter duplicates a preference your own theme already exposes.
Languages
Pick the languages the panel offers and which one is the default. The widget resolves the language in this order: the visitor's saved choice, then navigator.language if it matches an enabled locale, then your site default.
Behaviour
| Setting | Default | What it does |
|---|---|---|
| Draggable | On | Lets the visitor move the button out of the way. |
| Remember state | On | Persists the visitor's adjustments in localStorage for their next visit. |
| Hide on mobile | Off | Suppresses the button below 640 px. |
| Open on load | Off | Opens the panel automatically. Use sparingly — it is intrusive. |
| Keyboard shortcut | alt+a | Opens and closes the panel. Set it empty to disable. |
| Show branding | On | Displays the SiteAccessible credit. Removable on Business and above. |
Custom CSS
Business plans and above accept a CSS block that is injected inside the widget's own root. It cannot leak into your page, and your page's cascade cannot reach into it.
.sa-panel {
border-radius: 4px;
}
.sa-button {
box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor;
}