• Automated Product …
• Documentation
• Getting Started

Getting Started

Welcome to FreshShots! This guide will quickly walk you through setting up FreshShots to automatically keep your product screenshots up to date.

Tagging Your UI Elements

FreshShots identifies and captures UI elements on your website using a simple HTML attribute called data-freshshots-id. HTML attributes provide additional information about HTML elements without affecting their visual presentation.

To tag an element for FreshShots:

<button data-freshshots-id="submit-btn">Submit</button>

Each data-freshshots-id must be unique within a page to ensure accurate screenshot capturing.

Setting Up a Workflow

A workflow in FreshShots defines how your screenshots are captured. Follow these steps to set up your first workflow:

1. Create a Workflow

   • Log in to your FreshShots dashboard at app.freshshots.io
   • Navigate to Workflows and click Create New Workflow
   • Choose a starting template or create from scratch

2. Configure Workflow Settings

   • Name: Give your workflow a descriptive name
   • Base URL: Enter the primary URL your workflow will visit
   • Device: Choose browser type (Chromium, Firefox, WebKit) and device emulation
   • Viewport: Set custom viewport dimensions if needed

3. Build Your Workflow Steps

   Use the visual drag-and-drop editor to add steps:

   • Visit Page: Navigate to specific URLs
   • Take Screenshot: Capture full page or specific elements
   • Click Element: Interact with buttons, links, or other clickable elements
   • Type Input: Fill form fields with text
   • Select Dropdown: Choose options from dropdown menus
   • Check/Uncheck Box: Toggle checkboxes
   • Scroll To: Navigate to specific page sections
   • Hover Over: Trigger hover effects

4. Target Elements for Screenshots

   • Add data-freshshots-id attributes to elements you want to screenshot
   • Use the screenshot step to capture these elements with optional padding and zoom

5. Test and Save

   • Use the Test Run feature to validate your workflow
   • Save your workflow when ready
   • Run manually or integrate with your CI/CD pipeline

Your screenshots will be automatically processed and delivered via CDN for fast global access.

Automating Screenshots

FreshShots executes your workflows in a secure browser environment to:

• Navigate to your web pages using real browser automation
• Interact with your UI through clicks, form fills, and other user actions
• Capture screenshots of full pages or specific elements marked with data-freshshots-id
• Process images with custom dimensions, padding, and zoom settings
• Deliver screenshots via global CDN for fast loading
• Track execution status with real-time updates and detailed logs

All screenshots are automatically versioned and organized by workflow for easy management.

Integrate FreshShots via CDN

For quick integration, your FreshShots images can be directly embedded using URLs provided in your dashboard:

<img src="{your-cdn-image-url}" alt="FreshShots screenshot" />

This enables easy embedding of updated screenshots into your documentation or product materials.

You’re all set! With FreshShots, your documentation stays perfectly in sync with your live UI.