Skip to content

User Guide

Jump to bottom
Wei Xuan edited this page Feb 7, 2026 · 1 revision

User Guide

Learn how to use Web Guide to navigate the web more easily.

Overview

Web Guide acts as your personal tour guide on any webpage. It can:

  • Explain what a page is about
  • Tell you where you are
  • Guide you to specific elements
  • Answer questions about the page
  • Help you navigate to your goal

Interface Overview

Extension Interface

The Web Guide popup contains:

  • Microphone Button: Click to start voice input
  • Response Area: Displays text responses from the AI
  • Status Indicator: Shows when the extension is listening or processing
  • Settings Icon: (if available) Configure preferences

Using Voice Commands

Starting a Voice Command

  1. Click the Web Guide icon in your toolbar
  2. Click the microphone button (or it may auto-listen)
  3. Speak your command clearly
  4. The extension will process your request and respond

Voice Commands Examples

Voice Command Examples

Understanding Your Location

  • "Where am I?"
  • "What is this page about?"
  • "What website is this?"
  • "Summarize this page"

Getting Guidance

  • "What can I do here?"
  • "What should I do next?"
  • "Help me navigate this page"
  • "What are my options?"

Finding Elements

  • "Find the search bar"
  • "Show me the menu"
  • "Where is the login button?"
  • "Take me to checkout"
  • "Find the navigation menu"

Specific Actions

  • "I want to log in"
  • "I want to search for something"
  • "Take me to my cart"
  • "Show me the contact page"
  • "Find customer support"

Page Content Questions

  • "What products are available?"
  • "Tell me about the main content"
  • "What are the top articles?"
  • "Show me the comments section"

Visual Guidance System

Visual Guidance

When Web Guide identifies a relevant element on the page, it provides visual cues:

1. Automatic Scrolling

  • The page automatically scrolls to bring the element into view
  • Smooth scrolling ensures you don't lose context

2. Animated Arrow

  • A colorful, animated arrow points to the target element
  • The arrow pulses to draw your attention
  • Multiple arrows may appear for multiple elements

3. Tooltip Description

  • A text bubble appears near the element
  • Describes what the element is and what it does
  • Example: "This is the search input field"

4. Highlight Overlay

  • A semi-transparent highlight covers the element
  • Pulsing animation makes it impossible to miss
  • The element boundary is clearly outlined

5. Dismissing Highlights

  • Click anywhere on the page to remove the highlight
  • The highlight auto-dismisses after a few seconds
  • Voice commands can override current highlights

Full Visual Guide

Voice Responses

Web Guide can respond in two ways:

Text Responses

  • All responses appear as text in the popup
  • Easy to read and reference
  • Scroll through longer responses

Voice Responses (Text-to-Speech)

  • Responses are spoken aloud
  • Hands-free operation
  • Helpful for visually impaired users
  • Can be toggled in settings

Best Practices

For Best Results

  1. Speak Clearly

    • Use a normal speaking pace
    • Avoid background noise when possible
    • Hold the microphone button if needed

  2. Be Specific

    • Instead of "What is this?" try "What is this button for?"
    • Instead of "Help" try "Help me find the checkout"

  3. Use Natural Language

    • You don't need to use keywords
    • Speak as you would to a person
    • Ask follow-up questions naturally

  4. Wait for Response

    • Give the AI a moment to process
    • Don't issue multiple commands rapidly
    • Listen to or read the full response

Common Use Cases

E-commerce Shopping

  • "What products are on sale?"
  • "Find the add to cart button"
  • "Take me to checkout"
  • "Show me similar products"

Research and Reading

  • "Summarize this article"
  • "Find the references section"
  • "What are the main points?"
  • "Show me related articles"

Account Management

  • "Where do I sign in?"
  • "How do I create an account?"
  • "Find my profile settings"
  • "Show me my orders"

Navigation

  • "Take me to the homepage"
  • "Find the contact page"
  • "Show me the menu"
  • "Where is the search?"

Accessibility Features

Web Guide is built with accessibility in mind:

WCAG Compliance

  • Perceivable: Information presented both visually and audibly
  • Operable: Fully navigable via voice and mouse
  • Understandable: Clear, simple language in all responses
  • Robust: Works with screen readers and assistive technologies

Keyboard Shortcuts (Coming Soon)

  • Activate voice input without clicking
  • Navigate through responses
  • Quick dismiss of highlights

Privacy and Data

  • Voice commands are processed via the Groq API
  • No personal data is stored by the extension
  • Page content is only analyzed locally and sent to API for processing
  • See Privacy Policy for details

Tips and Tricks

  • Pin the Extension: Keep it easily accessible in your toolbar
  • Refresh If Needed: If the extension seems unresponsive, refresh the page
  • Check Permissions: Ensure microphone access is granted
  • Use on Complex Pages: Web Guide shines on complicated websites
  • Combine Commands: "Summarize this page and show me the search bar"

Next Steps

← Back to Getting Started | Next: Technical Documentation →

Clone this wiki locally