@thatsnu/browser-sdk NPM

Motivation

🤷‍ Problem

🙋‍ ️Use cases

⭐️ ️Features

🕹Demo

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.

Usage

📦 Install

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

🪄 Basic usage

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>

Initialize the SDK:

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

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

Watch the results:

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

⚙️ Options

SDK options

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

Indicator options

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.

🏆 Example

General

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.

New feature introduction

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:

Persistence

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