Installation Guide

Add AppPiper to your website in seconds. Choose your framework below.

Vanilla JavaScript (HTML)

Add this single line to the <head> or <body> of your HTML:

<script src="https://cdn.apppiper.com/v1/YOUR_ORG_ID.js"><\/script>

That's it! AppPiper will initialize automatically. Replace YOUR_ORG_ID with your organization ID from the dashboard.

React / Next.js

Option 1: Script Tag in _document.tsx (Next.js 12-14)

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script src="https://cdn.apppiper.com/v1/YOUR_ORG_ID.js" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Option 2: Script Tag in layout.tsx (Next.js 13+)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <script src="https://cdn.apppiper.com/v1/YOUR_ORG_ID.js" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Option 3: useEffect Hook

Load the snippet dynamically in a client component:

'use client';

import { useEffect } from 'react';

export default function RootLayout({ children }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.apppiper.com/v1/YOUR_ORG_ID.js';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return <>{children}</>;
}

Vue.js

Add the script tag to your index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <title>My App</title>
    <script src="https://cdn.apppiper.com/v1/YOUR_ORG_ID.js"><\/script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"><\/script>
  </body>
</html>

AppPiper will initialize automatically when the page loads.

Angular

Method 1: angular.json

Add the script to the scripts array in angular.json:

"projects": {
  "myApp": {
    "architect": {
      "build": {
        "options": {
          "scripts": [
            "https://cdn.apppiper.com/v1/YOUR_ORG_ID.js"
          ]
        }
      }
    }
  }
}

Method 2: index.html

Add directly to src/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="https://cdn.apppiper.com/v1/YOUR_ORG_ID.js"><\/script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Verify Installation

After adding the snippet, verify it's working:

  1. 1. Open your website in a browser
  2. 2. Open the browser DevTools (F12)
  3. 3. In the Console, type: window.tours
  4. 4. You should see the AppPiper object. If it's undefined, the snippet didn't load.

What's Next?

Now that you've installed the snippet, use the Chrome extension to visually build your first tour. See the Chrome Extension Guide for detailed instructions.