Are you familiar with those requests by your Product Manager to highlight features you developed as "New" but you said: "Oh, we need to invest a time and build something generic for the whole product and not just for this specific case" and then its postponed?

Did they also asked you to have the same ability but for new dynamic data that appear in lists?

With Thatsnu you can cover those use-cases easily and save the time of building such a mechanism, save the features the user exposed to, so later he won't see them again.

• Announce new features, step by step
• Introduce recently added dynamic data
• Combine both..

• Group features hierarchically, with same look & feel
• Automatically expire an after users should be familiar with it
• Customize each indicator via Javascript code or HTML attributes
• Have bi-directional sync between user's watched indicators for persistence capabilities

demo.thatsnu.com

In this demo you can see a fake customer portal website with Thatsnu SDK in use, the examples' screenshots below also from that demo website.

npm install --save-dev @thatsnu/browser-sdk

1. Define an indicator next to an existing element(s) on your page

<span
    data-tnu-id="customers"
    data-tnu-text"New!"
    data-tnu-tooltip="New features inside, Check it out!"></span>

2. Initialize the SDK:

import thatsnu from '@thatsnu/browser-sdk';

await thatsnu.init({
    defaultColor: '#462a68'
});

3. Watch the results:

4. When a user clicks on the New icon, it disappears, and next time he won't see it anymore.

Here are the options you can provide the SDK init function (thatsnu.init(...) above):

Here are the options of a particular indicator's, they can be provided via HTML attributes or inside each object in the indicators array that sent to the SDK above.

Worth to invest 5 minutes to read!

The library has two parts, HTML declaration of the elements you want to indicate and a javascript SDK that once initiated, search and generates indicators next to the HTML elements you declared.

Each HTML element has to have an identifier that defines via the data-tnu-id attribute, this value should be unique across your system to prevent conflicts with other elements and to be able to understand whether the user already clicked/saw it or not and hide it later.

For example, assume you added a new reports system for your users, probably you're going to have a new menu item on the left, that you want the user to be aware of, and stop shows it when use clicked on it or after a while when users got used to it.

To do so, add the following attributes to your exists menu item element belong to the nre Reports:

<div 
    data-tnu-id="reports" 
    data-tnu-tooltip="Introducing new reporting system!" 
    data-tnu-expiration='2022-11-15T23:59:59.728Z'>
  Reports
</div>

This code will generate an indicator next to the Reports menu item:

And it'll be visible until 2022-11-15, end of day, or if the user will click it.

Later, you added few new reports to the list, and you want to make sure the user is aware of them, you can add the following to each:

const ReportsComponent = () => {
    const reports = [{ id: 1, name: 'All customers'}, { id: 2, name: 'Youth customers' }];
    
    return (
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
            { reports.map(report => {
                if (report.isNew) {
                    <td
                        data-tnu-id={`reports.${report.id}`}
                        data-tnu-text='New!'
                        data-tnu-tooltip={`New report added: ${report.name}`}>
                        {report.id}
                    </td>
                } else {
                    <td>{report.id}</td>
                }
                <td>{report.name}</td>
            })}
        </table>
    );
}

This code will generate an indicator next to each new report:

Later, you added a new feature to let user share a report with others, inside a report page there will be a Share button, and you can use this code to make the users aware of it:

<div>
  <button>
    Share
  </button>
  <span data-tnu-id="reports.share"
        data-tnu-tooltip="New! share this report with others"></span>
</div>

The code will generate an indicator next to the share button:

By default, the library persist the user's clicks on indicators on localStorage, its good as long as the user

This library is front-end only (for now) and to make sure the same user won't see indicators he alreasy say form another
browser, you need to handle