Pendo Guide Automation

This skill automates creating and editing Pendo guides using the Chrome browser automation tools.

IMPORTANT: When Confused or Stuck

If you are unsure how to proceed with any Pendo guide task:

1. Read the INDEX.md file in the project's knowledge_base/ directory
2. The INDEX.md contains a quick reference table mapping tasks to the right documentation file
3. Read the relevant documentation file for detailed instructions

knowledge_base/
├── INDEX.md                 # START HERE - maps tasks to guides
├── guides-overview.md       # Guide types, use cases, best practices
├── create-overlay-guide.md  # Step-by-step overlay guide creation
├── building-blocks.md       # Text, buttons, images, videos, polls
├── add-edit-content.md      # Layout management (rows, columns)
├── button-actions.md        # Button behaviors (dismiss, next, URLs)
└── markdown-syntax.md       # Text formatting syntax

Prerequisites

Before starting, the user must:

1. Have Chrome open with the Claude in Chrome extension
2. Be on the application/website where they want to create the guide (Pendo must be installed on this site)

Workflow

Step 1: Check Browser Context

1. Call mcp__claude-in-chrome__tabs_context_mcp to get available tabs
2. Verify user is on their application site (not app.pendo.io)
3. If no tab available, ask user to navigate to their application first

Step 2: Determine User Intent

Ask the user what they want to do:

• Create a new guide: What type (lightbox, tooltip, banner)? What content?
• Edit an existing guide: Which guide? What changes?

Step 3: Launch the Visual Design Studio

Use mcp__claude-in-chrome__javascript_tool to execute:

pendo.designerV2.launchInAppDesigner()

This launches the Visual Design Studio directly on the user's application - no need to navigate to app.pendo.io.

If the command fails, Pendo may not be installed on this site. Ask the user to:

1. Verify Pendo is installed on this application
2. Check they are logged into Pendo (visit app.pendo.io to login)

Step 4: Using the Visual Design Studio

After launching, the Visual Design Studio appears with:

• Toolbar at top with Save, Exit, Activation, Preview buttons
• Step tray showing guide steps
• Edit window on the left for editing content

Adding Content (Building Blocks)

1. Hover over guide content area
2. Click "Click to Add Content" or the + icon
3. Select building block type:
   • Text: For headings, paragraphs, instructions
   • Button: For actions (Next Step, Dismiss, URL Link)
   • Image: For graphics and icons
   • Video: For embedded videos
   • Divider: For visual separation
   • Poll: For surveys and feedback

If unsure about building blocks: Read knowledge_base/building-blocks.md

Editing Building Blocks

1. Click on any building block to select it
2. Use the Edit window to modify:
   • Text content and formatting
   • Button text and actions
   • Image source and sizing
   • Styling and spacing

Button Actions

Common button actions:

• Next Step: Advance to next guide step
• Dismiss Guide: Close the guide
• Previous Step: Go back one step
• Go to Step: Jump to specific step
• Launch Guide: Open another guide
• URL Link: Navigate to a URL

If unsure about button actions: Read knowledge_base/button-actions.md

Adding Steps

1. Click + Add Step in toolbar
2. Configure step content
3. Set step location and behavior in Edit Container window

Step 5: Set Activation

Click Activation in toolbar to configure:

• Automatic: Shows when page loads
• Badge: Shows when user clicks a badge
• Element: Shows when user interacts with element
• Target Element: Anchor the guide to a specific element

Step 6: Save and Exit

1. Click Save to save progress
2. Click Preview to test the guide
3. Click Exit to close the Visual Design Studio

Editing Existing Guides

1. Ensure user is on their application site
2. Launch the designer: pendo.designerV2.launchInAppDesigner()
3. Select the existing guide from the guide list in the designer
4. Make changes using the same workflow above
5. Save and Exit

Browser Automation Tools Reference

Launching the Designer

The key command to launch the Visual Design Studio:

pendo.designerV2.launchInAppDesigner()

Execute this using mcp__claude-in-chrome__javascript_tool on the user's application tab.

Common Patterns

Simple Announcement (Lightbox)

1. Launch designer with pendo.designerV2.launchInAppDesigner()
2. Create new guide, select lightbox layout
3. Add Text block for title
4. Add Text block for message
5. Add Button with "Dismiss Guide" action

Feature Walkthrough (Multi-step Tooltip)

1. Launch designer on the page with the feature
2. Create new guide, select tooltip layout
3. Add Text explaining the feature
4. Add Button with "Next Step" action
5. Add more steps pointing to different elements
6. Final step has "Dismiss Guide" button

Feedback Poll (Banner)

1. Launch designer with pendo.designerV2.launchInAppDesigner()
2. Create new guide, select banner layout
3. Add Poll building block
4. Configure poll questions
5. Set button to submit and dismiss

Error Handling

• Confused about a task? Read knowledge_base/INDEX.md to find the right guide
• pendo.designerV2 not found? Pendo not installed on this site, or user not logged in
• Element not found? Take screenshot to see current state
• Action fails? Check knowledge base docs, try alternative approach
• Visual Design Studio doesn't load? Ask user to login at app.pendo.io first, then retry