Chrome Extension Guide

Use the AppPiper Chrome extension to visually build product tours without any code.

Installation

Step 1: Install from Chrome Web Store

Visit the AppPiper extension on Chrome Web Store and click "Add to Chrome".

After installation, you'll see the AppPiper icon in your Chrome toolbar.

Step 2: Sign In

Click the AppPiper extension icon and sign in with your AppPiper account. This connects the extension to your organization.

Step 3: Select Your Website

Navigate to your website in Chrome. The extension will automatically detect if your website has the AppPiper snippet installed.

If you see "Ready to build tours", you're all set. If not, make sure the snippet is installed. See the Installation Guide.

Creating Your First Tour

Tour Builder Overview

When you open the extension on your website, you'll see:

  • • Tour List: View and manage all tours for your website
  • • Create New Tour: Button to start a new tour
  • • Edit Mode: Click on elements to create tour steps
  • • Preview: See how your tour looks to users

Creating a New Tour Step-by-Step

1. Click "Create New Tour"

Enter a name like "Getting Started" and click Create.

2. Enter Edit Mode

The extension will highlight all clickable elements on your page.

3. Select Your First Element

Click on any element you want to highlight in the tour (button, text, input, etc.).

4. Add Step Content

A popup will appear. Add a title and description for the step. This is what users will see.

5. Create More Steps

Click more elements to add additional steps. The extension will number them automatically.

6. Save & Publish

Click "Save Tour" and then "Publish" to make it live.

Element Selection Tips

CSS Classes & IDs

The extension automatically detects CSS classes and IDs. Use consistent, semantic class names for better tour reliability.

Dynamic Content

If you're highlighting elements that appear dynamically (loaded with JavaScript), the extension uses intelligent fallback selectors. The tour will still work reliably.

Testing Different Pages

You can build tours across different pages of your website. Each page can have its own set of tours.

Hover & Click Elements

Tours can highlight buttons, links, form fields, images, text, and more. If an element can be clicked or hovered, the tour can feature it.

Previewing & Testing Tours

Preview Mode

Before publishing, click the "Preview" button to see exactly how users will experience your tour.

Use the Next/Previous buttons to navigate through steps. Check that text is readable and elements are properly highlighted.

Test on Different Devices

Use Chrome DevTools to test your tour on different screen sizes (responsive design mode).

Tours are mobile-responsive by default, but verify that they look good on tablets and phones.

Check Analytics

After publishing, monitor your tour's performance in the AppPiper dashboard. Check completion rates and identify drop-off points.

Editing & Managing Tours

Edit Existing Tours

Click "Edit" on any tour to modify steps, reorder them, or update text. Changes are saved automatically.

Duplicate Tours

Use the "Duplicate" option to create a new tour based on an existing one. Great for creating variations.

Archive or Delete

Archive tours you no longer use, or delete them permanently. Archived tours don't appear to users.

Troubleshooting

Extension doesn't show "Ready to build tours"

This means the AppPiper snippet isn't installed on your website. Check the Installation Guide and ensure the snippet is in your HTML.

Can't select certain elements

Some elements might be difficult to select due to layering (z-index). Try clicking directly on the element or use the extension's search feature if available.

Tour doesn't appear when I start it

Make sure the tour is published (not in draft mode). Also, verify that the element selector still exists on your page (if you updated the HTML, the selector might be outdated).

Need to see the browser console?

Open DevTools (F12) and go to the Console tab. The extension logs useful information for debugging.

Tips for Great Tours

  • • Keep it short: Tours with 3-5 steps have the highest completion rates
  • • Be clear: Use simple language and specific instructions
  • • Highlight one thing at a time: Focus on one action per step
  • • Test on mobile: Ensure steps work on smaller screens
  • • Monitor analytics: See where users drop off and improve

Learn More

For programmatic control of tours, check out the Snippet API Reference.

Need help? Contact our support team or visit the Getting Started guide.