How does the embed widget track whether a user has seen the latest update?

The widget compares the `published_at` timestamp of the latest note with an ISO timestamp stored in the user's browser `localStorage`. If newer, an unread indicator dot is displayed.

Will the widget CSS interfere with the parent web app styles?

No. The widget renders inside a sandboxed iframe or closed Shadow DOM, completely isolating host styles from widget typography.

What is the performance footprint of the embed script?

The loader script is under 3KB gzipped, asynchronously loaded, and fetches feed data only when the user clicks or hovers.

Can visitors react to updates directly from the widget?

Yes. Visitors can submit one-click emoji reactions ('Useful', 'Excited', 'Need more info') stored idempotently by Soobrief.

In-App 'What's New' Embed Widget: Architecture and Best Practices

How to integrate a lightweight, unread-badged product changelog modal directly inside your SaaS application with a single script tag.

Soobrief Team — Product & Engineering, Sooapps · 2026-09-08

In short

The in-app 'What's New' embed widget injects a customizable changelog modal and unread notification badge into any web application using a lightweight script tag. Operating via an isolated iframe or shadow DOM, it displays recent release publications without style leaks or performance overhead.

Publishing changelogs on a remote blog means only a fraction of active users ever see your hard work. Displaying updates directly inside your SaaS application increases feature adoption immediately.

1. Single-Tag Drop-in Implementation

Integrating the widget requires adding a single script tag before the closing </body> tag:


<script 
  src="https://api.soobrief.com/v1/public/widgets/YOUR_WIDGET_KEY/script.js" 
  async>
</script>

The script creates an unobtrusive floating trigger button (or binds to your existing navigation bell icon via data-soobrief-trigger).

2. Unread Badge State Management

To avoid annoying repeat visitors, the unread state is calculated locally:


const lastSeen = localStorage.getItem('soobrief-seen-' + widgetKey);
const hasUnread = !lastSeen || new Date(latestPublishedAt) > new Date(lastSeen);
if (hasUnread) renderBadgeDot();

When the modal opens, lastSeen updates immediately to the current timestamp.

3. Real-Time Feedback and Adoption Metrics

Users can react to each feature card with pre-configured reactions (useful, excited, more_info). These signals feed directly into your Soobrief analytics dashboard, showing which features resonated best.