Lite User Guiding

Lite User Guiding is a lightweight and flexible library for highlighting new features in web applications. It allows you to showcase DOM elements using interactive tooltips, providing a guided user experience. Tooltips are defined via a JSON configuration, making it easy to manage and update feature highlights.

🚀 Features

Lightweight: Minimal footprint for fast and efficient integration. JSON-based Configuration: Define tooltips with ease. Interactive Tooltips: Highlight DOM elements with titles and descriptions. Customizable: Style the tooltips to match your application's design. Perfect for Onboarding and Feature Launches.

📦 Installation

Install the library via npm:

npm install lite-user-guiding

Or use Yarn:

yarn add lite-user-guiding

🛠️ Usage

Import the library

import { LiteUserGuiding } from 'lite-user-guiding';

Add the JSON configuration Define your tooltips in a JSON file:

{
  "version": "1.0.0",
  "url": "https://someurl.com/page-target",
  //notification browser config
  "notificationTitle": "New system version available",
  "notificationBody": "There's a new version of the OMS features. Click to check out what's new.",
  "notificationIcon": "/path/your-image",
  //end notification browser config
  "features": [
    {
      "title": "New feature-sample available",
      "description": "With the new feature-sample, you'll be able to use various resources.",
      "data-feature": "feature-name"
    }
  ]
}

In the feature you want to present, add the data attribute data-feature="feature-name".
Initialize the guide (Using reactJs)

import { useEffect } from 'react';
import ShowNewFeature from 'lite-user-guiding';

function App() {
  useEffect(() => {
    const config = {
      tooltipSelector: '#tooltip',
      tooltipContentSelector: '#tooltipContent',
      overlaySelector: '#overlay',
      nextButtonSelector: '#nextButton',
      dataUrl: '/features/features.json', // JSON file with tooltip data
    };

    const showNewFeature = new ShowNewFeature(config);
    showNewFeature.init();
  }, []);

  return (
    <div>
      <h1>Welcome to the App!</h1>
      <button id="nextButton">Next</button>
      <div id="tooltipContent"></div>
      <div id="overlay"></div>
    </div>
  );
}

export default App;

Using bundling tools like Webpack, Parcel, or Vite

// JS File, like main.js
import ShowNewFeature from 'lite-user-guiding';

// Starting the library
document.addEventListener('DOMContentLoaded', () => {
  const config = {
    tooltipSelector: '#tooltip',
    tooltipContentSelector: '#tooltipContent',
    overlaySelector: '#overlay',
    nextButtonSelector: '#nextButton',
    dataUrl: '/features/features.json',
  };

  const showNewFeature = new ShowNewFeature(config);
  showNewFeature.init();
});

HTML File

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lite User Guiding</title>
</head>
<body>
  <div id="tooltip"></div>
  <div id="tooltipContent"></div>
  <button id="nextButton">Next</button>
  <div id="overlay"></div>

  <script src="dist/main.js"></script> <!-- Aqui vai o bundle gerado -->
</body>
</html>

⚙️ Configuration Options

Option	Type	Default	Description
`tooltipSelector`	`string`	`'#tooltip'`	Selector for the tooltip container element.
`tooltipContentSelector`	`string`	`'#tooltipContent'`	Selector for the element displaying tooltip content.
`overlaySelector`	`string`	`'#overlay'`	Selector for the overlay element to focus on tooltips.
`nextButtonSelector`	`string`	`'#nextButton'`	Selector for the "Next" button in the tooltip.
`dataUrl`	`string`	`null`	URL for fetching tooltip configuration as a JSON file.

🎨 Customization

Customize the tooltips by overriding the default CSS styles:

#tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
  display: none;
  max-width: 450px;
}

#tooltip h2 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.4);
  padding-bottom: 15px;
}

#tooltip p {
  font-size: 1rem;
  margin-bottom: 20px;
}

#tooltipContent {
  margin-bottom: 10px;
}

#nextButton {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

#nextButton:hover {
  background-color: #0056b3;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

🧑‍💻 Contributing

We welcome contributions! Feel free to submit issues, feature requests, or pull requests.

📜 License

Lite User Guiding is licensed under the MIT License.

📬 Contact

For questions or support, feel free to open an issue or reach out via email: contato@andycastro.com.br

Start guiding your users today with Lite User Guiding! 🎉