Tooltip(Page Pilot) Integrate with Webapp by NPM installation



Tooltip (PagePilot) Integration with Web Application (NPM Installation Method)

Overview

NPM installation is used to integrate PagePilot with modern web applications and display tooltips, product tours, and demos that are already created in PagePilot.

Screen- Tooltip Published post Integration on Web App

This method provides:




  • Better control in dynamic applications
  • Support for multi-page routing
  • Seamless integration with frameworks like React

Screen – Tooltip Published on Web App (After Integration)

In this method

  • PagePilot is integrated by installing the npm package
  • Initialization code is added to the website application’s(web app) or Project front end source code (such as a React component)
  • Tooltip configuration and publishing are handled from the PagePilot dashboard


Supported Use Cases

This integration method is suitable for:



  • Applications built using React or Angular
  • Dynamic web applications with client-side rendering
  • Single Page Applications (SPAs)
  • Multi-page applications requiring route-based behavior


Prerequisites

Before integrating PagePilot using NPM method, ensure:

Project Setup

  • Install Node.js (npm is included with Node.js)
  • A React (or similar) project should be already created.Here in screenshot Project folder name is school app under react app.
  • Run required commands in the terminal


Frontend Access

  • Access to the web application’s frontend source code
  • Ability to modify component files (e.g., App.js)

Screen- Source Code of web App


PagePilot Workspace

  • Workspace/application created in PagePilot
  • Application ID auto-generated and available

Screen- workspacee and Application Id


Tooltip

  • Tooltip already created in PagePilot dashboard


Target Elements and Target Page

For puplishing the tooltip successfully user must have the follwing details.



  • UI elements must have unique ID/class
  • webapp url contains the taget page details


Screen - Details of Target Page and Element ID on web app page

PagePilot Dashboard Access

  • Access to configure and publish tooltips



PagePilot Integration

After creating and setting up the application (e.g., a React project) in Visual Studio Code, the user must install the PagePilot package, add the required script, run the application, and perform validation to ensure successful integration.


Install PagePilot Package

1.Navigate to the Tooltip module in PagePilot

2. click Integrate Tooltip

3. select Install via NPM and copy the installation command.

Screen - Steps to copy the npm package




4.Open the project terminal( on vs tool) and run the command: npm install ahdjs

Screen- Add NPM package

Add Script

5.copy the AHDJ

Screen- Copy the AHDJs


6.Import and configure the AHDjs script in your application code using the provided configuration details (Application ID, API host, etc.).

Screen- Import AHDjs

Configure Ahdjs

7.Copy the script

Screen- Add NPM package

8.Paste it source code inside the function

Screen-Add script

10.Add target page

Screen-Add target page


Validate Integration

10.Run the application npm start on terminal.it complied sucessfully. User must open browser, go to:http://localhost:3000/dashboard and check your app UI.Now go to PagePilot and test your tooltip


Screen-Run npm

Configure Tooltip

11.Go to PagePilot Dashboard .Click on edit button of created tootltip.

Screen- Select Tooltip to Add element id and Target Page




Configure Tooltip Behaviour

12.Navigate to the Behaviour section to define how the tooltip will be displayed.

Set options such as Position, Trigger Behaviour (e.g., On Hover), and configure Trigger Label and Icons as required.

Screen- Add Element ID and Configure Tootltip Placement


13.The Target Element ID is the CSS query selector of the element on your web app where the tooltip should appear.


How to find it:

  1. Open your web app in the browser
  2. Right-click the element you want the tooltip on → select Inspect
  3. Look for the id or class attribute on that HTML element

How to enter it:

If the element has an id attribute, prefix it with # — for example, id="submit-btn" becomes "#submit-btn". If it has a class attribute, prefix

it with . — for example, class="help-icon" becomes .".help-icon".

hink of it as pointing PagePilot to the exact spot on your page where the tooltip should be attached.


14.Click on save change button .

15.Click Publish.Ensure status is Active

16.Add target page details as described in project or web page url with tooltip visibility setting details.

Screen- Add Target Page

17.Click on publish button.


Screen- Tooltip Published post Integration on Web App

Summary

NPM integration involves:

Create Project → Install Package → Add Code → Run App → Configure → Publish

Best for dynamic applications

More flexible and scalable than script tag