Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
watch-wc
Drop-in wrapper for the data-watch-page button. One tag renders an icon, compact, or full-button toggle that adds the current page to the user's watch list.
Overview
<watch-wc> wraps the data-watch-page button into a one-tag component. Drop it anywhere on a page and a user can toggle whether that page is in their watch list. State persists in VBStore under the watches namespace; the bell’s Watching tab surfaces the list.
The component is a thin author convenience — the watch state machine still lives in src/utils/page-watch-init.js. The wrapper just renders <button data-watch-page> with the right markup, label, and icon for the chosen variant, and re-syncs across instances when watch state changes anywhere on the page.
Variants
Three visual presets fit different surfaces. All three behave identically — the difference is layout and density.
The three variants
<watch-wc></watch-wc> <!-- icon (default) --><watch-wc variant="compact"></watch-wc> <!-- small icon + text --><watch-wc variant="button"></watch-wc> <!-- full ghost button --><watch-wc variant="button" label="Save for later"></watch-wc>Where to put it
The four docs layouts (guide, element, attribute, pattern) ship a <watch-wc> inside their <page-tools> sticky sidebar — that’s the eye icon you see on this page next to print and share. Other natural places: the floating fab-stack, an article header, or a sidebar block.
Inside page-tools
<page-tools data-position="sticky" data-orientation="horizontal"> <print-page></print-page> <share-wc variant="icon" size="s"></share-wc> <watch-wc></watch-wc></page-tools>Attributes
| Attribute | Values | Description |
|---|---|---|
variant | icon (default), compact, button | Visual preset. icon is a 2.25-rem ghost icon button, compact is small icon plus text, button is a full-size ghost button. |
label | string | Override the visible text in compact and button variants. Default toggles between “Watch for updates” and “Watching”. |
server-sync | boolean | Per-instance opt-in for server-side sync via VBService('notify'). Sets window.vbPageWatch.serverSync = true before the page-watch script evaluates. |
Events
The component bubbles the same events the underlying [data-watch-page] button emits, so listeners attached to the document don’t care which one was clicked:
| Event | Detail | When |
|---|---|---|
page-watch:add | { entry } | User started watching the page |
page-watch:remove | { url, subscriptionId } | User stopped watching |
Multiple instances stay in sync
Put two or three <watch-wc> elements on the same page (article header, sticky sidebar, footer call-to-action) and they’ll stay synchronised — clicking any one of them updates the others. The component listens for page-watch:add / page-watch:remove on the document and re-reads VBStore to repaint its own button.
Without JavaScript
The component is hidden via watch-wc:not(:defined) until JS upgrades it. If you want a no-JS fallback (e.g. a server-rendered “subscribe by email” link), put it inside the element — the wrapper appends its own button after upgrade and the static fallback can be styled away with a sibling selector or removed entirely.
Related
data-watch-page— the underlying attribute pattern this component wraps<notification-wc>— surfaces the watch list in its Watching tab- Service contracts — the
/go/notify/subscribeendpoint server-sync uses