Creating Guides
Learn how to capture screenshots, GIFs, and videos to create professional help guides for your users.
Screenshot Capture
Screenshots are perfect for step-by-step instructions. Each screenshot captures:
- The full page or a selected area
- Page URL and title
- Clicked element information (selector, text, position)
- Timestamp
One-Click Capture
Click the camera icon in the floating widget to capture the entire visible page. The screenshot is automatically added as a new step in your guide.
Area Selection
To capture a specific region:
- Click the area selection button (dotted rectangle icon)
- Click and drag to select the region you want to capture
- Release to capture the selected area
Tip: Use area selection to focus on specific UI elements and avoid showing sensitive information on the page.
GIF Recording
GIFs are great for showing short interactions like clicking, hovering, or typing. They auto-loop and play inline in your guides.
Recording Settings
| Duration | 3-15 seconds (configurable) |
| Frame Rate | 10-30 fps (default: 15) |
| Max Dimensions | 800 x 600 pixels |
| Max File Size | 5 MB (auto-optimized) |
How to Record
- Click the GIF icon (film strip) to start recording
- Perform the interaction you want to capture
- Click "Stop" or wait for auto-stop at the duration limit
- Preview the GIF and trim if needed
- Click "Add to Guide" to include it as a step
Best Practice: Keep GIFs short and focused on a single interaction. Longer workflows are better shown as separate GIF steps or videos.
Video Recording
Videos are ideal for longer workflows, tutorials, or when you need audio narration.
Recording Options
| Max Duration | 5 minutes |
| Audio | Optional microphone narration |
| Format | WebM (MP4 conversion available) |
| Max File Size | 100 MB |
How to Record
- Click the video icon to open recording options
- Choose: Tab only or Tab + Microphone
- Click "Start Recording"
- Perform your workflow (pause/resume as needed)
- Click "Stop Recording"
- Preview and trim the video
- Upload to your guide
Note: Video recording requires the "desktopCapture" permission. Chrome will show a dialog asking you to select the tab to record.
Step Management
After capturing media, you can organize and edit your steps before uploading.
Reorder
Drag and drop steps to change their order
Edit
Change step titles and add notes
Delete
Remove unwanted steps from the guide
AI Enhancement
After uploading to SupportFlow, use AI to automatically generate step descriptions:
- Open your guide in the SupportFlow admin editor
- Click the "AI Enhance" button
- AI analyzes screenshots and element context
- Descriptions are generated for each step
- Review and edit as needed
Example: A screenshot showing a clicked button becomes: "Click the Sign Up button in the top right corner to begin registration."
Best Practices
Keep guides focused
Each guide should cover one specific task or workflow. Create separate guides for different features.
Use clear, descriptive titles
"How to Create a New Project" is better than "Projects".
Blur sensitive information
Use the annotation tools to blur or redact personal data, passwords, or other sensitive content before uploading.
Test your guide
After publishing, follow the guide yourself to ensure the steps are clear and accurate.