HTML Components
Action buttons
Wire a button without code
Add data-c15t-action to any element and c15t runs that action when a
visitor clicks it. The page needs no script of its own:
This works with c15t.js, c15t.offline.js,
c15t.headless.js and c15t.iab.js, and with init() from @c15t/browser
in a bundled app.
Actions
| Value | What a click does |
|---|---|
accept | Like the banner's accept button, allows every category the dialog offers without IAB. Under an IAB policy it confirms the vendors' declared processing through the CMP. Optional categories without declared consent purposes remain denied. See categories under an IAB policy. |
reject | Rejects every optional category the dialog offers. |
customize | Opens the preference dialog. Records nothing. |
dismiss | Dismisses a notice. This records an acknowledgement, not consent, and does nothing unless the policy shows a notice. |
banner | Shows the banner again. Records nothing. |
close | Closes the banner or dialog. Records nothing. |
An unknown value does nothing. Accept and reject close the banner or dialog in the same click, then send the choice to the backend in the background.
How clicks are matched
c15t listens for clicks on the whole document, so:
- Buttons added after the page loaded, for example by a page builder widget or a CMS block, work too.
- A click on a child element counts. An icon inside
<button data-c15t-action="accept">triggers the action. - c15t calls
preventDefault()on the click. Adata-c15t-actionlink does not navigate, and adata-c15t-actionbutton inside a form does not submit it.
Only record choices from visitor clicks
accept and reject record a consent choice. Keep them on controls a visitor
clicks on purpose, with labels that say what they do. Do not trigger them
from script with element.click(), and do not hide an accept button inside a
larger clickable area.
Use customize for a "Cookie settings" or "Privacy choices" control. It only
opens the dialog, so it is safe anywhere.
Build a banner from action buttons
The headless build renders no banner, so your
page writes one from these buttons. The headless page shows a complete bottom
bar that uses accept, reject, customize and dismiss, and switches
between them by policy.
Accessibility
c15t adds no role, label or keyboard handling. Use a native button for
actions and an a for navigation, so the control is focusable and responds to
Enter and Space. A div with data-c15t-action responds to clicks only.
Check it works
- Add a
data-c15t-action="reject"button to a page and open it in a private window. - Click the button. The banner closes, and in DevTools the Network tab shows
the save request to your backend's
/subjects. - Reload. The banner stays closed.