Skip to content

Show me cards: highlight the gleap_highlight label on the page; version 19.4.0 - #204

Merged
floooat merged 2 commits into
masterfrom
fix-show-me-label-highlight
Nov 6, 2026
Merged

floooat merged 2 commits into
masterfrom
fix-show-me-label-highlight

Conversation

@floooat

@floooat floooat commented Nov 6, 2026 •

Copy link
Copy Markdown
Contributor

Problem

Kai's Show me chat card opens a page of the customer's app with ?gleap_highlight=<label>. The Messenger has added that parameter since the cards shipped, but no SDK read it, so the page opened with nothing marked.

Fix

  • New src/GleapHighlight.js, called from Gleap.checkForUrlParams (so disableQueryParams still turns it off):
    • Reads gleap_highlight and removes it from the address bar with replaceState, keeping history.state and the rest of the URL.
    • Finds the visible element with that label: exact text first, then a label containing it, then the closest label sharing most of its words. The label comes from an AI answer, so an AI may write "Post as draft" for a toggle labelled "Save as draft".
    • Ties go to interactive elements, then smaller ones. A matched label returns its whole control row. Gleap's own UI and hidden elements are skipped.
    • Waits up to 10 s for SPA content, scrolls to the element and outlines it for 6 s in the project colour. The outline follows scroll and resize, goes away on the next click or key, and respects reduced motion.
  • capture-capabilities announces highlight: true, so the Messenger offers Show me only where it works (Messenger-App PR, linked below).

Verification

  • src/GleapHighlight.test.js (13 tests) covers: scoring, a near-miss label ("Post as draft" → the Save as draft toggle row), aria-label buttons, hidden and Gleap elements, URL stripping that keeps router state, late-rendered SPA content, and auto-fade.
  • Full suite: 612 tests green. webpack build OK. Build artifacts are not committed; the release does that.
  • Real browser (Chromium, real layout): a settings page rendered 1.2 s late, with the target toggle about 1,600 px down, opened with ?gleap_highlight=Post+as+draft&v=2. It scrolled to the Save as draft toggle, outlined it, and left ?v=2 in the URL.

Release

Version 19.4.0 (minor: new behaviour). This PR includes the bump: package.json / package-lock.json, a CHANGELOG entry, and the rebuilt build/ and published/19.4.0/ + published/latest/, the same 14 files as the 19.3.8 release commit. Merging deploys the CDN (Workers Builds on master); pushing the 19.4.0 tag publishes to npm (release.yml).

🤖 Generated with Claude Code

Kai's show_me chat card opens a page with ?gleap_highlight=<label>, but no
SDK read the parameter, so nothing was ever highlighted. On load the SDK now
finds the visible button or field with that label (exact text first, then
the closest label sharing most of its words, since the label comes from an
AI answer), scrolls to it and outlines it for a few seconds, waiting up to
10 s for SPA content. The parameter is removed from the address bar,
keeping the router state. capture-capabilities announces highlight: true
so the Messenger only offers the Show me button where it works.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@floooat

floooat commented Nov 6, 2026

Copy link
Copy Markdown
Contributor Author

Messenger side: GleapSDK/Messenger-App#292 (offers Show me only when this SDK announces highlight).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@floooat floooat changed the title Show me cards: highlight the gleap_highlight label on the page Show me cards: highlight the gleap_highlight label on the page; version 19.4.0 Nov 6, 2026
@floooat
floooat merged commit 8e7ae55 into master Nov 6, 2026
1 check passed
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.

2 participants