- PROJECTED DONE:
- September 2021
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)
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