App Banner(Page Pilot) Integrate with Webapp by NPM Installation

App Banner (PagePilot) Integration with Web Application (NPM Installation Method)

Overview

NPM installation is used to integrate PagePilot with modern web applications and display App Banners that are already created in PagePilot.

This method provides:

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

In This Method

  • PagePilot is integrated by installing the NPM package
  • Initialization code is added to the web application’s frontend source code (e.g., React component)
  • App Banner 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 the NPM method, ensure:

1. Project Setup

  • Install Node.js (npm comes with it)
  • A React (or similar) project should already be created
  • (Example: project folder “school app”)
  • Ability to run commands in terminal

2. Frontend Access

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

3. PagePilot Workspace

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

4. App Banner

  • App Banner should already be created in PagePilot dashboard

5. Target Page Details

  • Target page URL where the App Banner will be displayed

6. PagePilot Dashboard Access

  • Access to configure and publish App Banners

PagePilot Integration

After creating and setting up the application (e.g., React project in VS Code), follow the steps below:

Step 1: Install PagePilot Package

  1. Navigate to the PagePilot module
  2. Click Integrate PagePilot
  3. Select Install via NPM
  4. Copy the installation command

Step 2: Install Package in Project

  • Open project terminal
  • Run the command:

npm install ahdjs

Step 3: Add Script (AHDJS)

  • Copy the AHDJS script from PagePilot

Step 4: Import and Configure

  • Import and configure the AHDJS script in your application code
  • Add required configuration:
  • Application ID
  • API Host

import ahdjs from 'ahdjs';

ahdjs.init({

appId: "YOUR_APP_ID",

apiHost: "YOUR_API_HOST"

});

Step 5: Add Script in Source Code

  • Paste the configuration inside your main component (e.g., App.js)

Step 6: Add Target Page

  • Define the target page where the App Banner should appear

Step 7: Run and Validate Integration

  • Run the application:


npm start

Configure App Banner

Step 8: Edit App Banner



  • Go to PagePilot Dashboard
  • Click Edit on the created App Banner

Step 9: Configure Banner Behaviour



  • Navigate to the Behaviour Section
  • Configure:
  • Banner Position (Top / Bottom / Floating)
  • Display conditions
  • CTA Button (optional)




6

Step 10: Add Target Page



  • Enter the target page URL
  • Configure visibility settings

Step 11: Save Changes



  • Click Save Changes

Step 12: Publish App Banner



  • Click Publish
  • Ensure status is Active

Step 13: Verify on Web App



  • Open your web application
  • Navigate to the configured page
  • Verify that the App Banner is displayed

Summary

NPM integration involves:

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

Key Benefits

  • Best for dynamic applications
  • Supports routing and SPA behavior
  • More flexible and scalable than Script Tag integration