Reference

Widget settings

The Passback button and its comment box can change colour, corner and hotkeys. Set them where you already set Passback up: in the options of the Vite plugin, on the Passback tag of Next, or as attributes of the script tag. All settings are optional; a setting you leave out keeps its default.

Settings

Setting	Allowed values	What it does
`theme`	`auto`, `light` or `dark`	The look of the box. `auto` follows the page: a light page gets the light look, a dark page the dark one. Default: `auto`.
`main`	a colour written as `#rrggbb`	The colour of the main buttons and of the selected tool. Default: the Passback colour.
`secondary`	a colour written as `#rrggbb`	The second colour of the box. Default: the Passback colour.
`corner`	`bottom-right`, `bottom-left`, `top-right` or `top-left`	The corner of the page that holds the button. Default: `bottom-right`.
`launcher`	`visible` or `hidden`	`hidden` removes the button from the page; open the box with the hotkey. Default: `visible`.
`hotkey`	modifiers and one letter or digit joined by `+`, for example `alt+shift+m`, or `off`	The keys that open the box. Use `alt`, `ctrl` or `meta` in it, with `shift` as an extra if you like. `off` removes the hotkey. Default: `alt+shift+r`.
`hideHotkey`	the same form as `hotkey`, or `off`	The keys that hide all pins and bubbles until you press them again. Default: `alt+shift+h`.

In the Vite plugin

// vite.config.ts
passback({
  theme: 'dark',
  main: '#2563eb',
  corner: 'bottom-left',
  hotkey: 'alt+shift+p',
});

A value that is not allowed stops the plugin with a message that names the setting.

In Next

<Passback theme="dark" main="#2563eb" corner="bottom-left" hotkey="alt+shift+p" />

In a script tag

Each setting is an attribute that starts with data-passback-:

Setting	Attribute
`theme`	`data-passback-theme`
`main`	`data-passback-main`
`secondary`	`data-passback-secondary`
`corner`	`data-passback-corner`
`launcher`	`data-passback-launcher`
`hotkey`	`data-passback-hotkey`
`hideHotkey`	`data-passback-hide-hotkey`

<script
  src="WIDGET_SCRIPT_ADDRESS"
  data-passback-endpoint="API_ADDRESS/v1/ingest/SITE_KEY"
  data-passback-corner="bottom-left"
  async
></script>

Add the attributes to the tag you copied from the dashboard. The page Install with a script tag explains the rest of the tag.

Screenshots

A comment can carry a picture of the page, with the drawing on it. Pictures need the Premium plan on a hosted site. In the Vite plugin and in Next the option is screenshots: true or false. In a deployed build it is on by default; set screenshots: false (screenshots={false} in Next) to turn it off. In development, with the comments going to your agent, pictures are off unless you set screenshots: true in the Vite plugin. With a script tag, data-passback-screenshots="true" turns them on. The picture is rendered from the page, with private fields blacked out. The browser does not ask you to share your screen. If the capture fails, the comment is still sent, without the picture.

Next: Troubleshooting