Tour(Page Pilot) Integrate with Webapp by Script Tag Installation

Integrate a Website with PagePilot (Script Tag Method)

Overview

The Script Tag method is the quickest way to integrate a website with PagePilot and display tours that have already been created in the PagePilot dashboard.

Once the integration script is added to your web application, PagePilot automatically loads and manages published tours without requiring additional JavaScript development.

Screen – Tour Published Successfully Post Integration

How It Works

Using this integration method:

Copy the integration Script Tag from PagePilot.
Paste the script into the<head>section of your website's HTML file.
No additional JavaScript coding is required.
Tours are managed directly from the PagePilot dashboard.

Supported Use Cases

Static HTML websites
Landing pages
CMS-based websites (WordPress, Webflow, etc.)
Angular, React, Flutter Web, and other web applications where the HTML<head>section can be edited

Prerequisites

Before integrating PagePilot, ensure the following requirements are met.

A. Frontend Source Code Access

You should have access to the web application's source code and permission to edit the HTML`<head>`section.

Screen -Web App Source code

B. PagePilot Workspace Already Exist

A workspace/application must already exist in PagePilot.

TheApplication IDis automatically generated and included in the integration script.

Screen – Script Tag

C. Access Script Tag

Access the Script Tag from the PagePilot Integration screen.

D.Availibility of Target Elements

The UI elements where the tour will be displayed should have unique identifiers such as anIDorClass.

Example:

Home Menu →#menu-home
Search Bar →#search-bar
Upgrade Button →#upgrade-btn.These identifiers are used as selectors for displaying tour steps.

E. Target Page Details

The target page URL where the tour should appear must be available.

This information can be copied from the web application's browser URL.

F. PagePilot Dashboard Access

The user should have permission to create, edit, and publish tours.

Screen- Created Tour

G. Browser

Use a modern browser such as:Google Chrome,Microsoft Edge and active internet connection is required to load the PagePilot script.

Integration Steps

Step 1: Select the Tour Screen

After successfully logging in to the PagePilot application, open the required workspace where the required tour is created or saved for integration

Step 2: Click on integration tour link

To integrate created tour click on

Step 3: Copy the Script Tag

Locate theScript Tag.
ClickCopy Script.

Screen – Copy Script Tag

The copied script connects your web application with PagePilot.

Step 4: Add the Script to Your Website

Open the website project in your IDE (e.g., VS Code).
Open the HTML file (for example,index.html).
Paste the copied script inside the<head>section.
Save the file.
Run the website in the browser.

Screen – Paste Script in HTML Head

Screen – Save and Run the Project

Note:No success message is displayed after integration. The integration can be verified after creating and publishing a tour.

Step 5: Edit the Tour

Open the PagePilot Dashboard.
Create a new tour or edit an existing one.

Here, the existing tour is edited.

Screen – Edit Tour

Step 5: Configure Tour Steps

Open the required tour or create a new one.
Select the required Tour Step(Step 1, Step 2, or Step 3).
Open the Behaviour tab.
Enter theTarget Element(Element ID) for the selected step (for example,#menu-home,#search-bar, or#upgrade-btn).
Configure the remaining tour settings as required.
ClickSave Changes.
Repeat the same process for each additional tour step.

Screen – Configure Tour Step 1
Screen – Configure Tour Step 2
Screen – Configure Tour Step 3

Step 7: Publish the Tour

ClickPublish.
Enter the requiredTarget Pagedetails.
Verify the remaining publish settings.
ClickPublish.

Screen – Publish Tour

Screen – Tour Published Successfully

Verify the Integration

Refresh the web application.
Navigate to the configured page.
The first tour step appears on the configured target element.
Click Next to continue through the remaining tour steps.

Important Notes

Adding the Script Tag only connects the website with PagePilot.
Tours must be created and configured from the PagePilot dashboard.
Ensure every target element exists on the page before publishing.
Always use the correct selector format:
- ID:#element-id
- Class:.class-name
Enter only the page path or required target page information as configured by PagePilot. Do not use incorrect or unrelated URLs.
Save website changes after adding the Script Tag.
Refresh the browser after publishing the tour.
This integration method is recommended for static websites and web applications where the HTML<head>section can be edited.

This version follows a cleaner documentation style with separate sections forOverview → Prerequisites → Integration → Tour Configuration → Validation → Notes, making it easier for end users to follow.

Overview

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

screen- Tour Published successfully post integration

Screen- Tour step 2

Screen- Tour (steps) Published post Integration on Web App at different elements

In this method:

You only need to copy script (code)from Page Pilot tool andpaste a script into web app HTML file
No additional JavaScript coding is required
PagePilot automatically loads and manages tours

These will be used as selectors for tour

Screen- Element Id /Identifier

Target Page Details

User should have details of target page to publish tour.user can get those details on web page url

Screen- Targel Page on web Page url

PagePilot Dashboard Access

Access to configure and publish tour

Integration Steps

Access PagePilot Integration

Navigate to PagePilot Module
Select the workspace(Here ZAB corporation is selected) where tooltip is created.
ClickIntegrate PagePilot

Screen- Steps to copy script

Copy Script Tag

4.Locate theScript Tag code.

5.ClickCopy Script.

Screen- Select method and copy script

This script connects your website with PagePilot

Add Script to HTML on VS code

6.Open your HTML file (e.g., index.html)

7.Paste the script inside the <head> section

Screen- Select web app File and paste script on Head

8.Save the file

9.Open your website in browser

Screen- Save and Run Project on Browser

No success message is shown after integration, so the user can verify it by creating and publishing a tour.

Configure Tour

10.Go toPagePilot Dashboard .Create if not created or edit a tour. Here we click on edit button of created tour.

Screen - Steps to Edit the Tour details

11.click on behavoiur tab

Screen- Add element id and configure other details in tour step 1

12.Target Element→ e.g., #menu-home and configure the tooltip details of tour step1

13.click on save change .

14.Click on step 2

This will redirect the step 2 tour step screen .User must follow same step to add element id in step 2 and configure other details og tour step2

15.click on behavoiur tab

16Target Element→ e.g., #search-bar configure the tooltip details of tour step2

17..Click on save change .

18..Click on step 3 .

Screen-Screen- Add element id and configure other details in tour step 2

19.click on behavoiur tab

20.Target Element→ e.g., #upgrade-btn and configure the tooltip details of tour step3

21.Click on save button.

22.Click on Publish button.

Screen- Add element id and configure other details in tour step 3

23.Add target page details from project or web page url with other details.