Page Highlighting

Docuworm can highlight host-page text when a response citation points to Page context.

How highlights are triggered

When users click a Page context citation pill in assistant messages, the widget tries to match excerpt text on the page and wraps matches in highlight spans.

Highlight classes

Docuworm uses these CSS classes on your host page:

.docuworm-page-highlight
.docuworm-page-highlight-active

You can override them in your app stylesheet.

.docuworm-page-highlight {
  background-color: rgba(255, 255, 0, 0.4);
  border-radius: 2px;
}

.docuworm-page-highlight-active {
  background-color: rgba(255, 255, 0, 0.6);
}

Clear highlights

The widget header shows a clear-highlights button whenever highlights exist. Clicking it removes all active marks.

Integration guidance

Keep long, dynamically re-rendering documents stable to improve text matching.
Avoid removing highlighted DOM nodes immediately after user interaction.
If your app has very dense content, tune highlight styles for accessibility.

Enable page context

To make Page context citations useful, configure both:

Agent-level page context in dashboard settings.
Widget-level enable-page-context attribute.

<docuworm-chat
  access-token="worm_xxx"
  thread-ref="case_12345"
  enable-page-context
  theme="dark"
></docuworm-chat>