Skip to content

feat(chat-widget): lift the nudge pieces and compact it on phones - #1135

Merged
kmonsoe merged 1 commit into
mainfrom
feat/widget-nudge-mobile-compact
Oct 2, 2026
Merged

kmonsoe merged 1 commit into
mainfrom
feat/widget-nudge-mobile-compact

Conversation

@kmonsoe

@kmonsoe kmonsoe commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

What

Follow-up to #1132.

Lifted pieces (all viewports)

  • The eyebrow (org name · now) is gone. The region keeps the org name as its aria-label.
  • The dismiss button is a round 32px chip floating above the message. It was a 24px bordered square, so the tap target is bigger too.
  • The message bubble and the input field each carry a soft shadow, with a deeper variant in dark mode. The field uses the lighter rule border instead of the ink one.

Compact on phones (≤600px, the same breakpoint where the panel goes full-screen)

  • Only the message and the dismiss button show, with no inline input. Tapping the message opens the full-screen chat with the composer focused.
  • The nudge steps aside once the visitor scrolls more than 60% of a screen from where it appeared. This doesn't count as a dismissal: it isn't snoozed and it returns on the next page load.

Why

On a 375px phone the full nudge covered about a quarter of the screen and followed the visitor down the page. Its inline input was also the risky part on mobile: it opens the on-screen keyboard over a position: fixed element. On a phone the input saved no steps either, because sending opens the full-screen panel anyway, and that panel's composer already handles the keyboard. Hiding the nudge entirely on mobile would cut the feature out for most visitors on many sites, so it stays, in a smaller form.

Testing

  • pnpm -F @getmunin/chat-widget test passes. New tests check that on a phone-sized viewport the nudge hides after enough scrolling without reporting a dismissal, and that it stays put on larger viewports. The eyebrow assertion is replaced by an aria-label check.
  • Headless Chrome against a local harness: at 375px the field is hidden, the nudge stays after a 200px scroll and is gone after 600px. At 1280px it keeps the field and stays through a 1200px scroll. Light and dark mode both checked against the design mock.
  • Not yet checked on a physical iOS or Android device.

skill://conv/setup-chat-widget, the chat-widget docs guide and docs-fixtures/skills.json are updated.

🤖 Generated with Claude Code

The nudge drops its eyebrow, floats the dismiss button as a round chip
and gives the message and field a soft shadow. On screens 600px wide or
less it shows only the message and the dismiss button, and steps aside
without snoozing once the visitor scrolls most of a screen away.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@kmonsoe
kmonsoe merged commit bd86dd9 into main Oct 2, 2026
7 checks passed
@kmonsoe
kmonsoe deleted the feat/widget-nudge-mobile-compact branch October 2, 2026 13:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant