ProofFlow Documentation

Overview

ProofFlow is a WordPress plugin that creates a dedicated client proofing portal directly on your site. Designers and agencies upload their work (images, PDFs, or videos) into galleries, set a password, and share the link with clients. Clients view the work in a clean, distraction-free interface and leave feedback by clicking anywhere on the image to place a pin comment at that exact location.

Every comment is tied to precise X/Y coordinates stored as percentages, so feedback remains accurately positioned regardless of the viewer's screen size or zoom level. Comments have a three-stage status system (pending, in progress, completed) represented by red, amber, and green pin markers. This gives both designers and clients a visual overview of revision progress at a glance.

ProofFlow also includes a task board that turns comments into actionable tasks with priority levels and assignments. For teams, this bridges the gap between client feedback and internal project management without requiring a separate tool. The Standard tier adds PDF page-by-page proofing and video proofing with timeline-based pins, while the Agency tier adds white-label branding so the portal matches your agency's identity.

Installation

Download ProofFlow from your Boulley Technology account or from the email link after purchase. In your WordPress admin, navigate to Plugins › Add New › Upload Plugin, choose the proofflow.zip file, and click Install Now. Once installed, click Activate.

After activation, a new Proofing Galleries menu item appears in the WordPress admin sidebar. This is your main entry point for creating and managing galleries. ProofFlow also registers a custom post type (pf_gallery) and creates the necessary database tables for comments, pins, and tasks on activation.

ProofFlow requires PHP 7.4+, WordPress 5.8+, and the GD or Imagick image library for generating thumbnails. Most hosting environments have at least one of these available by default. The plugin uses the WordPress Media Library for file storage, so your upload limits are determined by your server's PHP configuration (upload_max_filesize and post_max_size).

Creating a Gallery

To create a new gallery, go to Proofing Galleries › Add New. Give your gallery a title that helps both you and your client identify the project (e.g., "Acme Corp Brand Redesign - Round 2"). The title is displayed at the top of the client-facing gallery page.

Click the Upload Images button to open the WordPress Media Library picker. Select one or more images and click Insert. You can also drag and drop files directly onto the upload area. ProofFlow supports JPG, PNG, GIF, WebP, and SVG formats. There is no limit on the number of images per gallery, though very large galleries (100+ images) may take a moment to load on the client side.

Images are displayed in the order they were uploaded. You can reorder them by dragging the thumbnail strips in the gallery editor. Each image gets its own proofing view where clients can zoom in and place pin comments.

Gallery Options

Below the image upload area, you will find several configuration options:

• Checkerboard Background — When enabled, transparent areas in PNG and WebP images are shown against a checkerboard pattern instead of a solid background. This is useful for logo proofing where transparency matters.
• Enable Zoom — Allows clients to zoom into images at 100% resolution. When zoomed in, the client can click and drag to pan around the image. Zoom mode temporarily disables pin placement to avoid accidental comments.
• Allow Downloads — When enabled, clients can download individual images from the gallery. When disabled, right-click saving is also blocked (though this is not a foolproof protection).

Gallery Settings

Each gallery has a status that controls its visibility and behavior. The available statuses are:

• Draft — The gallery is not accessible to clients. Use this while you are still uploading and organizing images.
• Active — The gallery is live and accessible to anyone with the link and password. Clients can view images and leave pin comments.
• Approved — Marks the gallery as client-approved. The gallery remains viewable but commenting is disabled. This is a visual signal that the proofing round is complete.
• Archived — The gallery is hidden from clients. It remains in your admin for reference but the public link returns a "gallery not available" message.

Password Protection

Every gallery is password-protected by default. When you create a new gallery, ProofFlow auto-generates a strong password. You can accept the auto-generated password or set your own. The password is required on the client-facing page before any images are displayed.

Passwords are hashed before storage, so they cannot be recovered from the database. If a client loses the password, generate a new one from the gallery settings and share it again. You can also remove password protection entirely by leaving the password field empty, though this is not recommended for client work.

Sharing with Clients

Each gallery has a unique public URL that you share with your client. To copy the link, open the gallery in the admin and click the Copy Link button next to the gallery title. The URL follows the format https://yoursite.com/proofing/gallery-slug/.

Share the link along with the gallery password. ProofFlow provides a convenient Copy Password button next to the password field. For a professional touch, you can compose an email with both the link and the password, or use an email template if you have CommandPost installed.

ProofFlow also generates a QR code for each gallery. Click the QR icon in the gallery editor to view and download the code. This is useful for in-person presentations where clients can scan the code on their phone to access the gallery immediately. The QR code encodes the gallery URL only (not the password), so you still need to share the password separately.

Client Experience

When a client visits the gallery link, they are presented with a clean password gate. The page displays the gallery title and a single password input field. After entering the correct password, the client is taken to the gallery view. A session cookie keeps them authenticated for 24 hours, so they do not need to re-enter the password on return visits within that window.

The gallery view shows a thumbnail strip along the bottom of the screen and the currently selected image in the main viewport. Clients navigate between images by clicking thumbnails or using the left/right arrow keys. The interface is minimal and distraction-free, with no WordPress admin chrome visible.

To leave feedback, the client clicks anywhere on the image to place a pin. A comment form appears next to the pin, asking for their name (remembered across sessions) and their comment text. After submitting, the pin appears on the image with a red marker indicating a pending comment. The client can place as many pins as needed on each image.

Clients can also reply to existing pins by clicking on them. This creates a threaded conversation attached to that specific location on the image. Replies appear in a chat-like format below the original comment, making it easy to discuss a specific detail back and forth.

Pin Commentary System

The pin commentary system is the core of ProofFlow's proofing workflow. Each pin is a visual marker placed on an image at the exact coordinates where the client clicked. Pins are stored as X/Y percentage values relative to the image dimensions, which ensures they remain correctly positioned regardless of the viewer's screen resolution or browser window size.

For example, a pin placed at the center of an image is stored as x: 50%, y: 50%. If another viewer opens the gallery on a smaller screen, the pin still appears at the center of the image because the percentage-based positioning scales proportionally. This approach is fully responsive and works across desktop, tablet, and mobile viewports.

Status Colors

Each pin has a status that is reflected by its color on the image:

• Pending — A new comment that has not been acknowledged. The default status when a client places a pin.
• In Progress — The designer has seen the comment and is working on it. Set this from the admin to signal to the client that their feedback is being addressed.
• Completed — The revision has been made. Green pins give clients a visual sense of how much progress has been made across the gallery.

The status color system provides an instant visual summary. When a client opens a gallery and sees mostly green pins, they know most of their feedback has been addressed. A mix of red and amber pins tells them work is still in progress. This reduces the back-and-forth of status update emails.

Image Viewing

ProofFlow's image viewer is designed for detailed inspection. The main viewport displays the selected image scaled to fit the browser window while maintaining aspect ratio. A horizontal thumbnail strip runs along the bottom, showing small previews of all images in the gallery. The currently selected image is highlighted with a border accent.

Clients can navigate between images by clicking thumbnails, pressing the left/right arrow keys, or swiping on touch devices. The image transitions are instant with no loading delay for images that have been cached.

Zoom Mode

When zoom is enabled in the gallery settings, clients can click the zoom icon (or press Z) to enter 100% zoom mode. In this mode, the image is displayed at its native resolution, which is typically much larger than the viewport. The client can click and drag to pan around the image, inspecting fine details like typography, pixel alignment, or texture quality.

Pin placement is disabled while in zoom mode to prevent accidental comments from drag gestures. Clients must exit zoom mode (click the icon again or press Z) to place new pins. Existing pins are still visible in zoom mode and can be clicked to read the attached comments.

Checkerboard Background

For images with transparency (PNG, WebP, SVG), enabling the checkerboard option displays a light/dark grid pattern behind the transparent areas. This is essential for proofing logos, icons, and other assets where the transparent region is part of the design. Without the checkerboard, transparent areas appear as the page background color, which can make it difficult to see the edges of the artwork.

Managing Comments

All pin comments for a gallery are visible in the WordPress admin through the gallery's meta box. Open a gallery in the editor and scroll down to the Comments meta box. Each comment shows the commenter's name, the comment text, the image it belongs to, and a small preview thumbnail with the pin marker drawn at the correct position.

From this meta box, you can update the status of each comment using the status dropdown:

• Pending → In Progress — Set this when you start working on the revision.
• In Progress → Completed — Set this when the revision is done.
• You can also move comments back to a previous status if needed.

The meta box includes filtering options to show comments by status (all, pending, in progress, completed) and by image. This makes it easy to work through feedback systematically. Each status change is immediately reflected on the client-facing gallery, so clients see updated pin colors in real time on their next page load.

You can also reply to comments from the admin. Admin replies are distinguished from client replies by an "Admin" badge, making the conversation thread clear for both sides.

Task Board

The Task Board converts pin comments into structured tasks that your design team can track and manage. To create a task from a comment, click the Create Task button next to any comment in the meta box. The task inherits the comment text, the image reference, and the pin location.

The Task Board is accessible from the gallery editor under the Tasks tab. It offers two views:

• List View — A flat list of all tasks, sortable by priority, status, assignee, or creation date. Best for quick scanning and bulk status updates.
• Kanban View — Columns for each status (To Do, In Progress, Done). Drag tasks between columns to update their status. Best for visual workflow management.

Priority Levels

Each task can be assigned a priority level to help your team focus on the most critical feedback first:

• Critical — Must be addressed before delivery. Blocks approval.
• High — Important feedback that should be resolved in this round.
• Medium — Standard revision requests. The default priority.
• Low — Minor nitpicks or suggestions that can be deferred.

Assigning Tasks

Tasks can be assigned to any WordPress user on your site. Click the assignee field on a task to see a dropdown of available users. Assigned users receive a WordPress admin notification when a task is assigned to them. The task board can be filtered by assignee, making it easy for each team member to see their own workload.

PDF Proofing (Standard+)

The Standard tier and above supports PDF proofing in addition to images. When you upload a PDF to a gallery, ProofFlow renders each page as a separate image. Clients navigate between pages using the page strip at the bottom (similar to the image thumbnail strip) or with left/right arrow keys.

Pin comments on PDFs are scoped to individual pages. Each page has its own set of pins, and the pin coordinates are stored relative to that page's dimensions. This means a pin placed on page 3 will only appear when the client is viewing page 3. The comments meta box in the admin shows the page number alongside each comment for easy reference.

PDF rendering uses the server-side library to generate page images at a resolution suitable for on-screen viewing (150 DPI by default). If your PDFs contain very fine detail or small text, you can increase the rendering DPI in ProofFlow's settings. Higher DPI produces sharper images but increases processing time and storage requirements.

Clients can also download the original PDF from the gallery if the Allow Downloads option is enabled. This lets them view the PDF in their preferred reader for a more detailed review while using ProofFlow's pins for feedback.

Video Proofing (Standard+)

Video proofing extends ProofFlow's pin commentary system to video files. Upload an MP4, MOV, or WebM file to a gallery and clients can place pins on specific frames of the video. Each pin is tied to a timestamp in addition to its X/Y position, creating a time-and-space-specific comment.

When a client watches the video and wants to comment on something at the 1:23 mark, they pause the video and click on the frame to place a pin. The pin records the current playback timestamp. Later, when you or the client clicks on that pin in the comments list, the video automatically jumps to that exact timestamp so you can see exactly what the comment refers to.

The video player includes standard controls (play/pause, seek, volume, fullscreen) and a timeline that displays pin markers as small dots at each timestamp where a comment exists. This gives a visual overview of where in the video feedback has been left. Hovering over a timeline marker shows a tooltip with the comment preview.

Video files are served through the WordPress Media Library. For best compatibility and performance, use H.264 encoded MP4 files. ProofFlow does not transcode video, so the file must be in a web-compatible format before upload. Maximum file size is determined by your server's PHP upload limits.

White-Label (Agency)

The Agency tier adds white-label branding so the client-facing gallery matches your agency's visual identity instead of showing ProofFlow or WordPress branding. White-label settings are found under Proofing Galleries › Settings › Branding.

Customizable elements include:

• Logo — Upload your agency logo to replace the default ProofFlow wordmark. The logo appears on the password gate, the gallery header, and in email notifications.
• Primary Color — Sets the accent color used for buttons, links, the pin active state, and the progress indicators. Enter a hex color code or use the color picker.
• Background Color — Overrides the default dark gallery background. Useful for agencies that prefer a light theme for their proofing portal.
• Footer Text — Custom text displayed in the gallery footer, such as your agency's name, copyright notice, or tagline.

White-label settings apply to all galleries on the site. If you manage multiple client brands, the branding will be your agency's identity rather than each client's. The password gate, gallery view, and all client-facing pages will display your logo and color scheme, creating a professional, branded experience.

License Activation

ProofFlow's free version includes image galleries with pin comments and basic comment management. Upgrading to Standard unlocks PDF proofing, video proofing, and the task board. The Agency tier adds white-label branding on top of all Standard features.

To activate your license, go to Proofing Galleries › License. Enter the license key from your Boulley Technology purchase (format: PF-XXXX-XXXX-XXXX-XXXX) and click Activate. The key is validated against the Boulley Technology license server and bound to your site's domain.

Each key is valid for one domain. To move ProofFlow to a different site, deactivate the license from the License tab first, then activate on the new domain. You can also deactivate remotely from your Boulley Technology account if you no longer have access to the original site.

Troubleshooting

Images Not Loading in Gallery

If images appear broken or do not load on the client-facing gallery, check the following:

• Verify that the images exist in the WordPress Media Library. If they were deleted from the library, they will not display in the gallery.
• Check your server's file permissions. Gallery images are served through WordPress, so the wp-content/uploads directory must be readable by the web server.
• If you are using a CDN or security plugin that restricts hotlinking, ensure that requests from your own domain are allowed.
• Clear any caching plugins and try again. Some full-page caches may serve stale HTML that references moved or renamed files.

Pins Appearing Misaligned

Pins use percentage-based positioning, so they should scale correctly across different screen sizes. If pins appear offset from their intended location, the most common cause is CSS interference from your theme or another plugin. ProofFlow's frontend uses a scoped CSS class (.pf-gallery) to isolate its styles, but aggressive global resets or box-sizing changes can affect positioning.

To diagnose, open the gallery in a private/incognito window with no browser extensions. If the pins align correctly there, a browser extension is interfering. If they are still misaligned, temporarily switch to a default WordPress theme (like Twenty Twenty-Four) to test for theme conflicts. Report the issue to support with the theme name and a screenshot.

Password Not Working

If a client reports that the correct password is not being accepted, keep in mind that passwords are case-sensitive. Double-check for leading or trailing spaces in the password you shared. If the issue persists, generate a new password from the gallery settings and share the updated one. Also verify that the gallery status is set to Active — Draft and Archived galleries are not accessible to clients regardless of the password.

PDF Pages Not Rendering

PDF rendering requires the Imagick extension with PDF/Ghostscript support. If pages appear as blank images, check that Imagick is installed on your server (phpinfo() will show it under the Imagick section). Some shared hosting providers disable PDF rendering in Imagick for security reasons. In that case, you may need to contact your host or upgrade to a VPS where you control the PHP configuration.

FAQ