Support Highlight Widget

A lightweight, embeddable widget that lets a support agent highlight elements on a caller's page in real time.

• One script tag on the site
• Agent and user both use the same widget
• Peer-to-peer connection via PeerJS
• Only selector payload + hit/miss acknowledgments are sent

Stack

• Next.js app as a local demo surface
• Vanilla JS widget runtime in src/
• PeerJS for WebRTC data channel setup
• esbuild for single-file widget bundling
• Bun for install, scripts, and local workflow

Run Locally (Bun)

bun install
bun run dev

Open two browser tabs to http://localhost:3000.

Test Flow

1. In tab A, open the widget and click Create Session.
2. Read the 6-character code to tab B.
3. In tab B, click Join and enter the code.
4. In tab A, click Arm Picker, then click any element on the page.
5. Tab B should show a highlight. Tab A should receive hit or miss feedback.

Build Widget Bundle

bun run build:widget

Generated files (not committed):

• dist/support-highlight-widget.js
• dist/support-highlight-widget.min.js

Embed Snippet

Use the minified bundle from your CDN:

<script src="https://your-cdn.example.com/support-highlight-widget.min.js" defer></script>

The script auto-initializes and mounts a floating widget in the page corner.

Message Protocol

• Agent -> User:
  • { "type": "highlight-request", "payload": { selector, tagName, label, strategy } }
• User -> Agent:
  • { "type": "ack", "result": "hit" | "miss" }

Debug API

The widget exposes window.SupportHighlightDebug for manual testing.

Useful methods:

• getState()
• createSession()
• joinSession(code)
• endSession()
• armPicker() / disarmPicker()
• highlight(payload)
• clearHighlight()

Known Limitations

• If agent and user are on different pages, selectors may miss.
• Full page reloads break the active peer connection.
• Cross-origin iframe content cannot be targeted.