Inline Preference Panel

Build a boutique-style inline accordion on your initial unsubscribe page: pause chips, reduce-frequency chips, and a quiet unsubscribe link with confirmation. Subscribers stay on the same page for pause and reduce actions (no separate preferences page required).

Overview

The inline preference center is one panel with three rows:

RowPurpose
PauseAccordion row with one-click pause duration chips
ReduceAccordion row with frequency chips and per-topic toggle chips
Leave“Unsubscribe from all” with arm → confirm flow

Team pause durations, frequencies, and topics come from Settings and are injected at runtime as chip buttons ({{preferencesPauseChips}}, {{preferencesReduceChips}}).

Add blocks in the page editor

  1. Open your unsubscribe page in the visual editor (GrapesJS).
  2. In Unsubscribe Components, drag Inline Preference Center onto the initial page.
  3. Edit copy on the pause, reduce, and leave rows inside the panel.
  4. Save the page. Component styles are merged into your page CSS on save.

Styling

  • Theme colors: The panel reads your page primary and secondary colors (--primary-color, --secondary-color from theme settings — the same variables as the pause modal and preferences form). Accents, chip selection, and success feedback tint from primary; muted text and borders mix from secondary.
  • Saved page CSS: Inline panel styles live in your page’s template.css in the database. Boutique inline templates and GrapesJS blocks include the default rules when you create or save from the editor.
  • Custom branding: Override scoped tokens on .lc-pref-center (e.g. --lc-accent, --lc-border) in global styles or custom CSS, or change primary / secondary in the page theme.
  • Existing pages: If you added panel HTML without saving block styles, open the visual editor and save once (or paste the latest rules from lib/constants/inline-preference-panel.ts into your page CSS).

Reference markup lives at docs/reference/boutique-preference-center.html in the repo.

Subscriber behavior

Pause chips

  • Tap a duration chip, then confirm on the inline Confirm pause step (same arm → confirm pattern as quiet unsubscribe).
  • On confirm, emails are paused and the subscriber navigates to the paused confirmation page.
  • Uses the same /api/unsub/pause-emails flow as the pause modal.
  • Cancel returns to the chip list; collapsing the pause accordion also clears the confirm step.
  • If your team uses SUPPRESSION pause and the subscriber is in the 90-day cooldown, chips are disabled and a message shows time remaining.

Reduce chips

  • Frequency chips save via /api/unsub/save-preferences and show an inline “All set” state on the initial page.
  • Topic toggle chips (one per active topic) behave like checkboxes: each tap saves the updated topic list via /api/unsub/save-preferences without closing the accordion. At least one topic must stay selected.
  • Edit reopens the accordion so the subscriber can pick a different frequency.
  • Returning subscribers with a saved frequency see the done state automatically; topic chips reflect saved topic preferences (or all topics selected when none are saved yet).

Quiet unsubscribe

  1. Or unsubscribe from all emails arms a confirmation row.
  2. Keep me, just quieter closes the confirmation and opens Hear from us less so the subscriber can pick a lower frequency or fewer topics.
  3. Unsubscribe runs the normal unsubscribe action.

Template variables

VariableReplaced with
{{preferencesPauseChips}}Pause duration chip buttons from team settings
{{preferencesReduceChips}}Frequency and per-topic toggle chip buttons

If a team has no pause or frequency configs, placeholders are cleared (empty chips area).

Data attributes (behavior vs. styling)

Handlers and CSS use data attributes for behavior and UI state. Classes (.opt-head, .chip, .leave, etc.) are layout and appearance only.

AttributePurpose
data-lc-panel="preference-center"Panel root; scopes click handling
data-action="toggle-opt"Accordion header — expand/collapse pause or reduce
data-lc-expanded="true"Option row is open (set by handler)
data-lc-done="true"Reduce frequency saved — shows “All set” row
data-lc-armed="true"Quiet unsubscribe confirmation visible
data-lc-cooldown="true"Pause suppression cooldown active
data-lc-chip-stateChip feedback: saving, saved-added, saved-removed, error
data-lc-partStructural part: body, done, leave
data-lc-pause-cooldownCooldown message element (template text; not a state flag)

Chip selection uses aria-pressed / aria-busy; accordion headers use aria-expanded.

Validation notes

  • Optional data-action values: toggle-opt, pause-for-duration, confirm-pause-inline, pause-cancel, select-frequency, toggle-reduce-topic, unsubscribe-arm, unsubscribe-cancel, edit-reduce.