Unread indicator for Announcements embed widget

The embedded pop-up widget will now support content viewership tracking. This allows us to provide an unread count that is inserted into your product and is only shown when new announcements have been published since your end-users last clicked the embed toggle. Additionally, we now show a small indicator on each announcement card until it has been viewed. This is achieved by giving end-users a unique, anonymous ID, eliminating the need for PII tracking or client-side cookies.

This currently is only supported by the pop-up embed.

Key interaction details

• First time viewers (new sign-ups) will not see an unread indicator. We will only show unread content after we've seen them for the first time

• The unread counter will disappear once the toggle button has been clicked. It will not re-appear until another announcement that fits their segmentation criteria is published.

• The unread content indicator will show on each piece of content until they view the content (click into the card)

Embed improvements

• Improved load times and content rendering

• Unread indicator and global style block are rendered in the client's dom (style in head, unread indicator as a sibling of the toggle element) allowing easy style overrides outside of the widget.

• Content caching improves load times of announcement content modal

New embed props (pop-up only)

anonymous-user-id [String] - a unique anonymous id to track individual viewers of the embed

show-unread [Boolean] - a flag to show or hide the unread indicator. Tracking still happens if anonymous-user-id is provided.

unread-background-color [String] css color value - the background and flashy color of the unread indicator.  If this is not provided, it defaults to primary-color

unread-text-color [String] css color value - the text color of the unread indicator.  If this is not provided, it defaults to the heading-color

unread-placement [String] - where the unread indicator should be rendered relative to the toggle selector.

Available placement options:
  auto // (default)
  auto-start
  auto-end
  top
  bottom
  right
  left
  top-start
  top-end
  bottom-start
  bottom-end
  right-start
  right-end
  left-start
  left-end