---
title: Floating trigger
description: Add the c15t floating button that reopens the preference dialog on
  a plain HTML site, and set its corner, size, visibility and accessible name.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Add the trigger

The trigger is a small round button in a corner of the page. Clicking it opens
the [preference dialog](/docs/frameworks/html/components/dialog). It gives
visitors a way back to their choices on every page, without a link in your
footer.

Add `data-trigger` to the script tag:

```html
<script
  src="https://your-project.inth.app/c15t.js"
  data-trigger
  defer
></script>
```

`data-trigger="false"` leaves it off. The trigger is off by default. A footer
[preferences link](/docs/frameworks/html/components/preferences-link) does the
same job and fits better on sites with a legal links section.

## Set its corner, size and visibility

Pass options under `ui.trigger` in a queued `config` call:

```html
<script>
  window.c15t = window.c15t || [];
  c15t.push(['config', {
    ui: {
      trigger: {
        position: 'bottom-left',
        size: 'sm',
        showWhen: 'after-consent',
        ariaLabel: 'Cookie settings',
      },
    },
  }]);
</script>
```

## Trigger options

`ui.trigger: true` shows the trigger with its defaults. An object sets these:

|Option|Type|Default|What it does|
|--|--|--|--|
|`position`|`'bottom-right'`, `'bottom-left'`, `'top-right'` or `'top-left'`|`'bottom-right'`|The corner the button starts in.|
|`size`|`'sm'`, `'md'` or `'lg'`|`'md'`|Button size.|
|`showWhen`|`'always'` or `'after-consent'`|`'always'`|`after-consent` hides the button until the visitor has answered the prompt.|
|`ariaLabel`|`string`|"Open privacy settings"|The button's accessible name. It has no visible text.|
|`persistPosition`|`boolean`|`true`|Remember the corner a visitor dragged the button to, in localStorage. A remembered corner wins over `position`.|

## When it shows

The trigger hides while the banner or the dialog is open, and shows when
neither is. With `showWhen: 'after-consent'`, it also waits until the visitor
has answered the prompt, so a visitor who has not chosen yet sees only the
banner.

## Drag it to another corner

Visitors can drag the trigger. It snaps to the nearest corner in the direction
they moved it, and c15t remembers that corner in the `c15t-trigger-position`
localStorage key. A remembered corner wins over `position` on later visits.
Set `persistPosition: false` to always start at `position`.

A drag does not open the dialog. A click, Enter or Space does.

## Keyboard and screen readers

The trigger is a native `button` with only an icon, so `ariaLabel` is its only
name. Write it in the page's language; the default is English. The trigger is
in the page's tab order after your content, because c15t appends it to the end
of `<body>`.

## Open DevTools from it

While the [DevTools tag](/docs/frameworks/html/dev-tools) is loaded, the
trigger becomes a two-button toolbar: a DevTools button and the button that
opens the dialog, which stays in the corner. Clicking the DevTools button opens
and closes the panel beside the toolbar. Without the DevTools tag, the trigger
stays a single button.

## Style it

The trigger reads the same theme tokens as the banner. In `ui.css`, select it
with `[data-testid="consent-dialog-trigger"]`. It carries `data-position` with
its current corner and `data-size` with its size.

## Check it works

1. Accept or reject in the banner. The trigger appears in its corner.
2. Click it. The preference dialog opens and the trigger hides.
3. Drag it to the opposite corner and reload. It starts in the new corner.
4. Press Tab until the trigger has focus and press Enter. The dialog opens.