Webstuffguy Labs — WordPress plugins

User Guide

Complete walkthrough of the Submittal Builder interface

Overview

This guide walks you through the complete process of creating a submittal packet using the frontend builder interface. The builder follows a simple 3-step workflow designed to be intuitive for contractors, engineers, and sales teams.

The Three-Step Process

Step 1: Select Products → Step 2: Review & Customize → Step 3: Generate PDF

Each step is designed to be straightforward while offering powerful functionality for organizing and customizing your submittal packets.

Step 1: Select Products

The product selection interface allows users to browse your catalog and select items for their submittal packet.

Interface Overview

Top Bar:

  • Search box (searches all product data)
  • Results count
  • Expand All / Collapse All button
  • Selection counter

Main Area:

  • Collapsible product group sections (dark blue headers)
  • Type subsections (bright blue bars) within each product
  • Product cards organized by type
  • Real-time filtering

Bottom:

  • Selected products tray (sticky)
  • “Continue to Review” button

Browsing Products

Product Organization

Products are organized in a 4-level hierarchy for easy navigation:

Hierarchy:

  1. Category (sidebar filters) – e.g., “Framing – Drywall”
  2. Product (dark blue collapsible headers) – e.g., “25 GAUGE 18 MIL”
  3. Type (bright blue subsections) – e.g., “2-1/2″ Flange”, “Slotted Tracks”
  4. Models (individual product cards) – e.g., “400T300-18”, “362SLT250-18”

Collapsible Groups:

  • Click any dark blue product header to expand/collapse that section
  • Use the “Expand All” / “Collapse All” button to toggle all sections at once
  • Product groups start collapsed by default to reduce visual clutter
  • Your collapse/expand preferences are saved and remembered

Gallery View (Default)

Product cards displayed in a grid layout, grouped by type:

Each Card Shows:

  • Model name/number
  • Category breadcrumb (at top)
  • Key specifications (Size, Thickness, KSI, etc.)
  • Configurable dropdown fields (if applicable)
  • Visual thumbnail (if available)

To Select a Product:

  1. Click anywhere on the card
  2. Card highlights with “✓ ADDED” indicator
  3. Counter updates in real-time
  4. Click again to deselect

List View

Compact table-style display:

Columns:

  • Model Number
  • Category
  • Type
  • Specifications (abbreviated)
  • Select checkbox

To Select a Product:

  1. Click checkbox on the right
  2. Row highlights
  3. Counter updates

Toggle Views:
Click the view toggle button in the top right (grid/list icons).

Using Search

The search box performs real-time filtering across all product data.

Searches:

  • Model numbers
  • Product names
  • Categories
  • Types
  • All specification values (Size, KSI, Thickness, etc.)

How to Search:

  1. Click search box
  2. Start typing (e.g., “362” or “20 gauge”)
  3. Results filter instantly
  4. Clear search to see all products again

Tips:

  • Search is case-insensitive
  • Searches partial matches (e.g., “36” finds “362S162-20”)
  • Works with spec values (e.g., “6 inch” finds all 6″ products)

Category Filters

Filter products by category using dropdown or tag buttons.

To Filter by Category:

  1. Click category dropdown or filter button
  2. Select desired category
  3. Only products in that category show
  4. Select “All Categories” to reset

Combined Filtering:
You can use category filter + search together for precise results.

Selection Counter

The selection counter shows how many products you’ve selected.

Display Format:

"5 Products Selected" or "VIEW 5 →"

Click Counter to:

  • View selected products (quick preview)
  • Remove selections
  • Proceed to next step

Keyboard Shortcuts (Step 1)

KeyAction
/ or Ctrl+FFocus search box
Arrow KeysNavigate cards
SpaceSelect/deselect focused card
EnterProceed to next step
EscClear search

Step 2: Review & Customize

Review your selections, reorder items, add project information, and prepare for PDF generation.

Interface Overview

Left Panel: Selected Products

  • Drag handles for reordering
  • Product details
  • Remove buttons
  • Count indicator

Right Panel: Project Information

  • Project name field
  • Company/contact info (optional)
  • Additional notes (optional)
  • Pro PDF options (theme, watermark, signature block)
  • Generate PDF button

Reviewing Selections

All selected products are listed with full details.

Each Product Shows:

  • Model number
  • Category and type
  • All specifications
  • Remove button (X icon)

To Remove a Product:

  1. Click X icon next to product
  2. Product removed from list
  3. Count updates

To Go Back:
Click “← Back to Products” to return to Step 1 and modify selections.

Reordering Products

Change the order products appear in the PDF.

How to Reorder:

  1. Hover over product item
  2. Drag handle appears (≡ icon)
  3. Click and drag to new position
  4. Release to drop
  5. Order saved automatically

Why Reorder?

  • Group related products together
  • Organize by installation sequence
  • Place most important items first
  • Match architect’s spec order

PDF Order:
Products will appear in the PDF in the exact order shown in this list.

Adding Project Information

Provide context for the submittal packet.

Project Name (Recommended)

Field: “Project Name”

Examples:

  • “Miller Hall – West Wing Renovation”
  • “Acme Office Building – 3rd Floor”
  • “Residential – 123 Main St”

Usage:

  • Appears on PDF cover page
  • Helps recipient identify project
  • Used in tracking/analytics (Pro)
  • Included in lead data (Pro)

Company Information (Optional)

If lead capture is enabled (Pro), additional fields may appear:

  • Company name
  • Contact name
  • Email address
  • Phone number

Notes Field (Optional)

Add any additional context or instructions.

Examples:

  • “Per architect specifications revision 3”
  • “Alternate products for value engineering”
  • “For submittal package #5”

Pro PDF Options (Pro)

Customize your PDF appearance and add professional elements with Pro features.

PDF Theme Selection (Pro)

Choose from three professionally designed color schemes that apply across your entire PDF.

Available Themes:

  • Engineering (Default) – Professional blue color scheme
  • Architectural – Modern gray/silver palette
  • Corporate – Elegant navy/charcoal styling

How to Select:

  1. Look for “PDF Theme” dropdown in right panel (Pro users only)
  2. Select your preferred theme
  3. Theme applies to cover page, TOC, summary table, and product sheets

Theme Colors:
Each theme provides consistent color coding throughout the PDF, affecting:

  • Header backgrounds
  • Accent colors
  • Table styling
  • Section dividers

PDF Watermark (Pro)

Add a custom diagonal text watermark across all pages.

Common Uses:

  • “DRAFT” – For review copies
  • “CONFIDENTIAL” – For sensitive documents
  • “FOR REVIEW ONLY” – For preliminary submittals
  • “PRELIMINARY” – For early-stage documents

How to Add:

  1. Find “PDF Watermark” field in right panel (Pro users only)
  2. Enter your custom text (e.g., “DRAFT”)
  3. Leave blank to disable watermark
  4. Watermark appears diagonally across all PDF pages

Display:

  • Appears in semi-transparent gray
  • Rotated 45 degrees diagonally
  • Large text spanning center of each page
  • Does not obscure content readability

Approval Signature Block (Pro)

Add a professional 3-column approval table at the end of each product sheet.

How to Enable:

  1. Check “Include Approval Signature Block” checkbox (Pro users only)
  2. Optionally pre-fill approval fields:
    • Approved By: Name of approver
    • Title: Job title or role
    • Date: Approval date
  3. Leave fields blank to provide empty signature lines
  4. Block appears at bottom of each product sheet

Use Cases:

  • AHJ (Authority Having Jurisdiction) approval
  • Engineering review and sign-off
  • Architect/designer approval
  • Code compliance verification
  • Quality assurance documentation

Layout:

┌──────────────┬──────────────┬──────────────┐
│ Approved By  │    Title     │     Date     │
├──────────────┼──────────────┼──────────────┤
│ [Signature]  │ [Title/Role] │ [Date/Stamp] │
└──────────────┴──────────────┴──────────────┘

Branding Preview

The right panel shows a preview of your branding:

  • Logo
  • Brand color
  • Company name
  • Contact information

This is what will appear on the PDF cover page.

Pro Users: The selected PDF theme will affect the color scheme throughout your PDF, while the branding preview shows your logo and company information.

Generating the PDF

Once you’re satisfied with your selections and project info:

Click “Generate PDF” Button

What Happens:

  1. Loading indicator appears
  2. PDF generation begins on server
  3. Progress shown (typically 3-10 seconds)
  4. Success page displays when complete

During Generation:

  • Do not close browser window
  • Do not navigate away
  • Wait for completion message

Step 3: Success & Download

PDF generation complete – download and share your submittal packet.

Success Page

Displays:

  • Success message
  • PDF file name
  • File size
  • Action buttons

Available Actions:

  • Open PDF – View in browser
  • Download PDF – Save to device
  • Start Over – Create another packet
  • Copy Link – Share URL (Pro feature with tracking)

Opening the PDF

Click “Open PDF” to:

  • View in browser tab
  • Verify contents before downloading
  • Print directly from browser
  • Share URL from address bar (temporary)

Browser Compatibility:

  • Chrome: Opens in built-in PDF viewer
  • Firefox: Opens in built-in viewer
  • Safari: Opens in preview
  • Edge: Opens in built-in viewer

Downloading the PDF

Click “Download PDF” to:

  • Save to your device
  • File downloads to default folder (usually “Downloads”)

Default Filename Format:

submittal-{project-name}-{date}.pdf

Example:

submittal-miller-hall-2025-10-15.pdf

PDF Contents

Your generated PDF includes:

1. Cover Page

  • Your logo
  • Brand color scheme (customized by PDF theme if Pro)
  • Project name
  • Date generated
  • Company contact information
  • Watermark overlay (if enabled – Pro)

2. Table of Contents

  • List of all products
  • Page numbers
  • Quick navigation

3. Summary Table

  • All selected products organized by product group
  • Columns: Qty, Type, Model, Key Specifications, Notes
  • Type column with prominent blue styling for easy scanning
  • Quick reference overview of entire packet
  • Watermark overlay (if enabled – Pro)

4. Individual Spec Sheets

  • One page per product model
  • Full breadcrumb navigation (Category / Product / Type)
  • Complete specifications
  • Product images and details
  • Formatted for compliance and code requirements
  • Approval signature block at bottom (if enabled – Pro)
  • Watermark overlay (if enabled – Pro)

5. Footer

  • Page numbers
  • Company information
  • Date generated

Sharing the PDF

Email:
Attach downloaded PDF to email for clients, architects, or inspectors.

File Size:
Typical PDFs are 200-500 KB per product (email-friendly).

Print:
PDFs are optimized for standard letter-size (8.5″ × 11″) printing.

Cloud Storage:
Upload to Dropbox, Google Drive, or project management tools.

Tracking (Pro):
Use the “Copy Link” feature to share a trackable URL and monitor when recipients view the packet.

Common Workflows

Workflow 1: Simple Submittal (5 products)

Time: 2-3 minutes

  1. Visit builder page
  2. Search for products by model number
  3. Select 5 products
  4. Click “Continue”
  5. Add project name
  6. Generate PDF
  7. Download and email

Best For: Quick submittals, simple projects

Workflow 2: Large Packet (25+ products)

Time: 10-15 minutes

  1. Use category filters to narrow down
  2. Select products systematically
  3. Review selections carefully
  4. Reorder by installation sequence
  5. Add detailed project notes
  6. Generate PDF
  7. Verify all products included

Best For: Comprehensive submittals, complex projects

Workflow 3: Repeat Customer

Time: 1-2 minutes

  1. Search for previously used products
  2. Select quickly (familiar with catalog)
  3. Add project name
  4. Generate and send

Best For: Regular customers, standard configurations

Tips & Best Practices

For Contractors

✅ Do:

  • Add project name for easy reference
  • Review selections before generating
  • Download PDF immediately (temporary storage)
  • Keep organized folders for project submittals

❌ Don’t:

  • Skip project name (makes tracking difficult)
  • Generate PDFs with wrong products (slows approvals)
  • Forget to download (links expire after 24 hours)

For Sales Teams

✅ Do:

  • Use consistent project naming conventions
  • Reorder products by customer priority
  • Include notes for clarification
  • Save PDFs to CRM or project folders

❌ Don’t:

  • Rush through selections (causes errors)
  • Skip reviewing before generating
  • Forget to track sent packets (Pro: use tracking feature)

For Engineers

✅ Do:

  • Organize products by specification section
  • Reorder by CSI division or installation sequence
  • Add detailed notes for compliance
  • Verify all specs match project requirements

❌ Don’t:

  • Mix incompatible product lines
  • Skip specification verification
  • Generate without double-checking selections

Accessibility Features

The builder is designed to be accessible to all users.

Keyboard Navigation

  • Tab – Move between interactive elements
  • Space/Enter – Activate buttons and select products
  • Arrow Keys – Navigate product cards
  • Esc – Close modals and clear search

Screen Reader Support

  • All interactive elements have proper labels
  • Search results announced dynamically
  • Selection changes announced
  • Error messages announced

Visual Accessibility

  • High contrast mode supported
  • Focus indicators visible
  • Large touch targets (44px minimum)
  • Color is not the only indicator

Mobile Responsiveness

  • Touch-friendly interface
  • Optimized for small screens
  • Swipe gestures supported
  • Responsive PDF generation

Troubleshooting

“No products found”

Cause: Catalog is empty or filters too restrictive.

Solution:

  1. Clear search box
  2. Reset category filters
  3. Check with administrator if catalog is populated

Search not working

Cause: JavaScript error or slow server response.

Solution:

  1. Refresh page
  2. Try different browser
  3. Clear browser cache
  4. Check browser console for errors

Can’t select products

Cause: JavaScript disabled or browser compatibility issue.

Solution:

  1. Enable JavaScript in browser settings
  2. Update browser to latest version
  3. Try different browser (Chrome, Firefox, Edge)

PDF generation fails

Cause: Server timeout, memory limit, or file generation error.

Solution:

  1. Try generating with fewer products
  2. Refresh and try again
  3. Contact site administrator
  4. See Troubleshooting Guide

PDF download link doesn’t work

Cause: Link expired (24-hour limit) or file deleted.

Solution:

  1. Generate PDF again
  2. Download immediately
  3. Save to device before link expires

Branding doesn’t appear in PDF

Cause: Branding not configured in admin settings.

Solution:

  1. Contact site administrator
  2. Admin should configure: Submittal Builder → Settings → Branding
  3. See Branding Guide

Mobile Usage

The builder works on mobile devices (phones and tablets).

Best Practices for Mobile

Portrait Mode:

  • Better for browsing products
  • Easier to read specs
  • More comfortable for one-handed use

Landscape Mode:

  • Better for reviewing selections
  • More products visible at once

Touch Gestures:

  • Tap to select products
  • Swipe to scroll
  • Pinch to zoom (on PDFs)

Performance:

  • Generating large PDFs (20+ products) may be slower on mobile
  • Use Wi-Fi for best results
  • Keep browser app updated

Advanced Features

Bulk Selection (Coming Soon)

Select multiple products at once using checkboxes or Shift+Click.

Saved Configurations (Pro)

Save frequently used product sets for quick generation.

Custom Templates (Agency) Coming soon

In development and not in the current release. When it ships it will apply different PDF templates based on project type or client.

Next Steps

Learn More

  • Product Management – For administrators adding products
  • Branding & PDFs – Customizing PDF appearance
  • Admin Settings – Configuring the builder
  • Troubleshooting – Solving common issues

Get Support

  • Documentation: Full Documentation
  • WordPress.org Forum: https://wordpress.org/support/plugin/submittal-spec-sheet-builder/
  • Email Support: support@webstuffguylabs.com (Pro users)

© 2025 Webstuffguy Labs. All rights reserved.

Still stuck?

Questions about the free plugin go to the WordPress.org support forum. Pro licence holders can email support@webstuffguylabs.com directly. See Support for what to include.