App Banner(Page Pilot) Integrate with Webapp by Script Tag Installation

Overview

Script Tag integration is the quickest way to connect PagePilot with a web application and display App Banners that have already been created in PagePilot.


Key Highlights

  • You only need to copy the script (code) from PagePilot and paste it into your web app HTML file
  • No additional JavaScript coding is required
  • PagePilot automatically loads and manages App Banners

Supported Use Cases

  • Static HTML websites
  • Landing pages
  • CMS-based websites (WordPress, Webflow, etc.)
  • Any application where the HTML <head> can be edited

Prerequisites

Before integrating PagePilot using the Script Tag method, ensure the following:

1. Frontend Access

  • Access to the web application’s frontend source code
  • Ability to modify the <head> section



2. PagePilot Workspace

  • A workspace/application must be created in PagePilot
  • The Application ID is auto-generated and included in the integration script


3. Integration Script

  • Access to copy the Script Tag from the PagePilot integration screen

4. Target Elements (Optional for Advanced Targeting)



  • UI elements (e.g., Home Menu, Search Bar, Upgrade Button) can have unique identifiers (ID or class)

(Note: App Banners generally apply to the full page, but identifiers may be used for advanced conditions.)

5. Target Page Details

  • User should have the target page URL where the App Banner will be displayed

6. PagePilot Dashboard Access

  • Access to create, configure, and publish App Banners

7. Browser Access

  • A modern browser (Chrome, Edge, etc.)
  • Internet connection to load the PagePilot script

Integration Steps

Step 1: Access PagePilot Integration

Step 2: Navigate to PagePilot Module

  • Select the workspace (e.g., ZAB Corporation)
  • Click Integrate PagePilot

Step 3: Copy Script Tag

  • Locate the Script Tag code
  • Click Copy Script

This script connects your website with PagePilot.

Step 4: Add Script to HTML

  • Open your HTML file (e.g., index.html)
  • Paste the script inside the <head> section

<head>

<!-- PagePilot Script -->

<script src="..."></script>

</head>

  • Save the file
  • Open your website in a browser

Note

No success message is shown after integration.

You can verify integration by creating and publishing an App Banner.

Configure App Banner

Step 5: Edit or Create App Banner


  • Go to PagePilot Dashboard
  • Click Edit on an existing App Banner or create a new one

Step 6: Configure Banner Details

  • Enter Banner Title and Message
  • Add CTA Button (optional, e.g., Upgrade Now)
  • Select Banner Position (Top / Bottom / Floating)

Step 7: Configure Target Page

  • Add Target Page URL where the App Banner should be displayed
  • Configure display conditions if required

Step 8: Save Changes

  • Click Save Changes

Step 9: Publish App Banner

  • Click Publish Button
  • Add required details if prompted
  • Click Publish

Step 10: Verify on Web Application

  • Open your web application in the browser
  • Navigate to the configured page
  • Verify that the App Banner is visible


Final Result

  • Script integration completed successfully
  • App Banner is displayed on the configured page
  • Users can view the message and interact with the CTA button

Important Notes

  • App Banner does not require step-by-step configuration like tours
  • It is a single message display component
  • Best used for announcements, promotions, and alerts