Client Dashboard

The AltSnap Client Dashboard provides a clean, focused view of your account activity and usage metrics. It gives you immediate visibility into how AltSnap is performing on your website and helps you track your subscription usage and limits.

Client Dashboard - Clean interface with Traffic Overview and Account Usage metrics

Traffic Overview

The Traffic Overview widget displays key performance metrics for your AltSnap integration:

• Generations: Shows the total number of AI-generated alt text entries created for your images
• Cache Hits: Displays how many times cached alt text was served instead of generating new content

A visual line graph tracks these metrics over time, helping you understand usage patterns and optimize your AltSnap integration for better performance and cost efficiency.

Account Usage

The Account Usage widget provides a comprehensive view of your subscription and limits:

• Current Plan: Displays your active subscription tier and monthly cost
• Total Images: Shows the number of images AltSnap has processed across your website
• Alt-Text Generations: Tracks your usage against your plan's generation limit with a progress bar
• Cache Hits: Monitors your cache hit usage against your plan's limit

Progress bars and remaining counts help you stay within your plan limits and understand when you might need to upgrade for higher usage volumes.

Navigation & Features

The dashboard sidebar provides easy access to all AltSnap features:

• Dashboard: Your main overview (current page)
• Alt Text: Manage and review generated alt text for your images
• AI-SEO Scans: Access SEO analysis and recommendations
• Documentation: Quick access to integration guides and API docs
• Web Snippet: Configure and manage your website integration

This streamlined interface focuses on the essential metrics you need to monitor your AltSnap usage and ensure your website's images are properly optimized for accessibility and SEO.

Alt Text Management

The Alt Text management interface provides comprehensive control over AI-generated alt text across your website. You can review confidence scores, edit descriptions, and instantly deploy changes without requiring code updates.

Alt Text List View

The main Alt Text screen displays a comprehensive table of all images that have been processed by AltSnap. This centralized view helps you monitor and manage alt text across your entire website.

Alt Text List View - Comprehensive table showing all processed images with confidence scores and quick actions

Table Columns

• Image: Thumbnail preview of each processed image
• Name: The filename of the image (e.g., blog-01.jpg, altsnap-logo-circle-2.svg)
• Location: The URL where the image is hosted
• Confidence: AI confidence score with visual indicators:
  • 72-75%: Yellow warning icon - indicates medium confidence, may need review
  • 82-85%: Green checkmark icon - indicates high confidence, likely accurate
• Created: Date when the alt text was generated
• Actions: View and Edit buttons for each image

Key Features

• Refresh Button: Updates the list with the latest processed images
• Confidence Filtering: Visual indicators help prioritize which alt text needs attention
• Quick Actions: Direct access to view details or edit alt text for any image

Alt Text Details Modal

Clicking the "View" button opens a detailed modal showing comprehensive information about a specific image and its generated alt text. This view provides the context needed to evaluate alt text quality.

Alt Text Details Modal - Detailed view with confidence assessment, image preview, and editable alt text field

Confidence Assessment

The confidence score is prominently displayed with contextual feedback:

• High Confidence (85%+): Green indicator with "Excellent! This description is accurate and contextually complete."
• Medium Confidence (72-84%): Yellow indicator with "Good, but you may want to review for accuracy."
• Low Confidence (<72%): Red indicator suggesting the alt text needs improvement

Image Information

• Image Preview: Visual reference for the alt text being evaluated
• Image Key: Unique identifier for the image
• Generated On: When the alt text was created
• Image Name: Original filename
• Locale: Language setting for the generation
• Image URL: Direct link to the image file
• Location: The webpage where this image appears

Editable Alt Text

The generated alt text is displayed in an editable text field, allowing immediate modifications. This is crucial for the "force override" functionality that enables instant deployment of changes.

Alt Text Edit Modal

The edit modal provides full control over alt text content and deployment options. This is where you can refine AI-generated descriptions and choose how changes are applied.

Alt Text Edit Modal - Full editing control with confidence guidance and Force Override deployment options

Confidence-Based Guidance

The confidence score provides context-specific guidance:

• Medium Confidence (72%): "Good, but you may want to review for accuracy" - suggests careful review
• High Confidence (85%+): "Excellent! This description is accurate and contextually complete" - indicates ready to use

Alt Text Editing

The main editing area includes:

• Current Alt Text: The AI-generated description in an editable text area
• Guidance Prompt: "Provide a clear, descriptive alt-text that explains what's shown in the image"
• Full Edit Capability: Complete control to modify, refine, or completely rewrite the alt text

Alt-Text Injection Mode

This is the critical feature that enables instant deployment without code changes:

• Evaluate Only: "Only evaluate the existing alt-text on the website without overriding it" - for testing and review
• Force Override: "Override the existing alt-text on the website with the AltSnap version" - for instant deployment

Action Buttons

• Cancel: Discards any changes and closes the modal
• Save Alt-Text: Applies changes based on the selected injection mode

Workflow Best Practices

To effectively manage alt text across your website:

1. Review Low Confidence Items: Start with images showing yellow warning icons (72-75% confidence)
2. Use Force Override for Urgent Fixes: When immediate changes are needed, use Force Override to deploy instantly
3. Test with Evaluate Only: Use Evaluate Only mode to review changes before deploying
4. Monitor High Confidence Items: Green checkmark items (82%+) typically don't need immediate attention
5. Regular Reviews: Periodically review the Alt Text list to ensure ongoing quality

AI-SEO Scans

The AI-SEO Scans feature provides comprehensive SEO analysis and recommendations for your websites. It scans your pages for technical SEO issues, content optimization opportunities, and structured data improvements, helping you improve search engine visibility and performance.

AI-SEO Sites List

The main AI-SEO Scans screen displays a comprehensive overview of all scanned websites and their overall performance metrics. This centralized view helps you monitor SEO health across multiple domains.

AI-SEO Sites List - Overview of all scanned websites with performance metrics and quick access to details

Table Columns

• Host: The domain name of the scanned website (e.g., www.altsnap.ai)
• Site Score: Overall SEO performance score with visual indicators:
  • 60.7%: Orange warning icon - indicates fair performance, needs improvement
  • 80%+: Green checkmark icon - indicates good performance
• 7-Day Trend: Performance change over the past week (e.g., 0.0% indicates no change)
• Pages: Number of pages scanned (e.g., "8 / 7" shows 8 pages scanned out of 7 expected)
• Last Updated: Date of the most recent scan
• Actions: "Details" button to drill down into specific site analysis

Key Features

• Refresh Button: Updates the list with the latest scan results
• Sortable Columns: Click column headers to sort by Host, Site Score, or Last Updated
• Quick Access: Direct navigation to detailed site analysis

Site Details

Clicking "Details" opens a comprehensive view of a specific website's SEO analysis. This screen provides site-wide metrics and a detailed breakdown of individual page performance.

Site Details - Comprehensive site analysis with overview metrics and individual page performance

Site Overview Cards

• Overall Score: Site-wide SEO performance with color-coded indicators (e.g., 60.7% - Fair)
• 7-Day Trend: Performance change over the past week
• Pages Scanned: Total number of pages analyzed
• Last Rollup: Timestamp of the most recent comprehensive analysis

Scanned Pages Table

The "Scanned Pages" section provides detailed analysis for each individual page:

• Page URL: The specific page path (e.g., "/", "/docs.html", "/blog/...")
• Overall: Individual page SEO score with color coding
• Content: Content quality and optimization score
• Depth: Page hierarchy level (0 = homepage, 1 = main sections, 2 = subpages)
• Scanned: When the page was last analyzed
• Actions: "Actions" button to view page-specific recommendations

Page Recommendations

Clicking "Actions" on any page opens a detailed list of SEO recommendations specific to that page. This view helps you prioritize and work through issues systematically.

Page Recommendations - Detailed list of SEO issues with severity levels and resolution status

Recommendation Table Columns

• Severity: Issue priority level:
  • INFO: Informational recommendations for optimization
  • WARN: Yellow warning icon - important issues that should be addressed
  • ERROR: Red error icon - critical issues requiring immediate attention
• Status: Current resolution state (OPEN = needs attention, RESOLVED = fixed)
• Category: Type of SEO issue (Content, Crawl, StructuredData, Tech, Media)
• Message: Brief description of the recommendation
• Actions: Eye icon to view detailed recommendations and fix instructions

Recommendation Categories

• Content: Text optimization, heading structure, introductory paragraphs
• Crawl: Page title optimization, meta descriptions, URL structure
• StructuredData: Schema.org JSON-LD, breadcrumb markup, rich snippets
• Tech: Performance optimization, preconnect hints, loading improvements
• Media: Image optimization, color contrast, accessibility compliance

Recommendation Details

Clicking the "View" action opens a detailed modal with comprehensive information about the specific recommendation, including step-by-step fix instructions and implementation examples.

Recommendation Details - Comprehensive fix instructions with code examples and resolution tracking

Detailed Information

• Severity & Status: Visual indicators showing issue priority and current state
• Issue Description: Clear explanation of what needs to be addressed
• How to Fix: Step-by-step instructions with specific implementation guidance
• Code Examples: Ready-to-use code snippets for common fixes (e.g., JSON-LD structured data)
• Best Practices: Additional tips for optimal implementation

Recommendation Metadata

• Rule ID: Unique identifier for the recommendation (e.g., structured.add_jsonld)
• Category: SEO category classification
• First Detected: When the issue was initially identified
• Last Detected: Most recent occurrence of the issue

Resolution Workflow

The recommendation details modal includes a powerful resolution workflow:

• Mark as Resolved: Green button to mark the issue as fixed after implementation
• Queue Management: Track your progress by resolving issues one by one
• Status Tracking: Monitor which issues are open vs. resolved
• Progress Visibility: See your SEO improvement progress over time

Workflow Best Practices

To effectively use the AI-SEO Scans feature:

1. Start with High-Impact Issues: Focus on WARN and ERROR severity items first
2. Work by Category: Address all StructuredData issues, then Content, then Tech
3. Use the Queue System: Mark items as resolved to track your progress
4. Implement Code Examples: Use the provided code snippets for quick fixes
5. Monitor Trends: Check 7-day trends to see improvement over time
6. Regular Reviews: Periodically review recommendations to catch new issues

Web Snippet

The AltSnap Web Snippet allows you to automatically generate and evaluate alt text for all images on your website by adding a small JavaScript embed code. This is the easiest way to implement AI-powered accessibility and alt text optimization.

How it works

Once installed, the embedded script automatically scans every image on your page. For images missing alt text, it generates new, WCAG-informed descriptions using AI. For images that already have alt text, AltSnap evaluates those entries and assigns a confidence score—indicating how well the existing text fits the image and surrounding page context.

• New alt text is generated once per image. After generation, it’s cached and reused for better performance.
• Existing alt text is reviewed and scored. Low-confidence results are flagged for review in your dashboard.
• First-time page views trigger background scans and AI evaluations.
• Subsequent visits use cached results for instant alt text rendering.

This approach ensures every image—whether previously labeled or not—gets the attention it deserves. AltSnap helps surface low-quality or outdated alt text so you can make quick improvements without manual audits.

Reliability

Generated and evaluated alt texts are cached in a global CDN for high availability and fault tolerance. This ensures your visitors receive consistent accessibility data even during traffic spikes or temporary service disruptions.

Performance Impact

The AltSnap web snippet is designed to have minimal impact on your website's performance:

• Lightweight JavaScript library (~15KB gzipped)
• Asynchronous loading that never blocks rendering
• Intelligent caching to minimize API calls
• CDN delivery for fast global access

Privacy & Security

We take privacy and security seriously:

• Images are processed securely on our servers
• No personal data is collected or stored
• HTTPS-only communication
• GDPR-compliant data handling

Get Started with Web Snippet

Get AltSnap's AI-powered alt text generation working on your website in under 5 minutes. Follow these simple steps to implement the web snippet.

Step 1: Get Your API Key

First, you'll need to create an AltSnap account and generate an API key:

1. Sign up for an account at app.altsnap.ai
2. Log in to your dashboard
3. Navigate to the "Web Snippet" section
4. Generate a new API key for your website
5. Copy the Web Snippet to add to your webiste

Step 2: Add the Snippet to Your Website

Add the following code to the <head> section of your website, replacing YOUR_API_KEY_AND_SECRET with your actual API key:

Step 3: Test Your Implementation

After adding the snippet to your website:

1. Visit a page on your website with images that don't have alt text
2. Open your browser's developer tools (F12)
3. Check the Network tab for requests to api.altsnap.ai
4. Inspect the images on the page - they should now have alt text attributes

Basic Configuration

You can customize the behavior of the web snippet by adding additional configuration options:

Installation Guide

Detailed installation instructions for different platforms and content management systems. Choose the method that works best for your setup.

HTML/Static Websites

For static HTML websites, simply add the AltSnap snippet to the <head> section of your HTML files:

WordPress

For WordPress sites, you can add the snippet through your theme's functions.php file or using a plugin:

Method 1: functions.php

Shopify

For Shopify stores, add the snippet through your theme's liquid template:

React/Next.js

For React applications, you can add the script to your HTML head or use a component:

Testing Your Installation

After installing the snippet on your website, follow these steps to verify it's working correctly:

1. Check the browser console for any AltSnap-related messages or errors
2. Inspect network requests to see if API calls are being made to altsnap.ai
3. Examine image elements to verify alt text attributes are being added
4. Test with new images to ensure the generation process works for fresh content

Advanced Features

Fine-tune how AltSnap scans, generates, and evaluates alt text. These options let you control selection, scoring, retries, and more—so the snippet fits your site and workflow.

Configuration Options

Add options to window.AltSnapConfig before loading the SDK:

<script>
            window.AltSnapConfig = {
              apiKey: "YOUR_API_KEY_AND_SECRET",
          
              // Optional overrides
              // endpoint: "https://api.altsnap.ai",
              // selector: "img",             // CSS selector for images to process
              // overwrite: false,            // If true, can replace existing alt attributes
              // evaluateExisting: true,      // Evaluate existing alt text as well (default: true)
              // tagExistingScores: true,     // Write data-* attributes with scores/flags
              // observe: true,               // Use IntersectionObserver for lazy/later images
              // enableOCR: false,            // Extract on-image text (requires Tesseract)
              // ocrLang: "eng",              // OCR language
              // ocrScriptUrl: "https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js",
              // domainHint: "ecommerce",     // Optional domain hint to guide generation
              // log: false,                  // Console logging
              // autorun: true,               // Auto-run on DOM ready
          
              // Hooks
              // beforeSend: (payload, img) => payload, // mutate payload before POST
              // onResult:  (result,  img) => {},       // per-image result callback
          
              // Retry policy (long-running jobs / transient failures)
              // requestTimeoutMs: 30000,
              // maxRetries: 2,
              // backoffBaseMs: 4000,
              // backoffCapMs: 20000,
              // queueMax: 200,
              // retryConcurrency: 3,

              // evaluateExisting: true, // Evaluate existing alt text for scoring/quality (doesn't overwrite unless overwrite:true)
              // tagExistingScores: true, // Write returned scoring/flags to data-* attributes

              // ---- AI SEO scan ----
              // aiSeoScanEnabled: true,
              // aiSeoScanDebounceMs: 1500, // wait for SPA bursts to settle
              // scanVersion: "v1",
          
              // Ignore policy (merge with defaults)
              // ignore: {
              //   emptyAltPolicy: "evaluate", // "skip" | "evaluate" | "generate"
              //   ariaHidden: true,
              //   rolePresentation: true,
              //   minPixels: 3,               // skip 1–2px trackers
              //   skipCssHidden: true,
              //   // Advanced:
              //   // skipDataUris: ["data:image/gif;base64,R0lGODlhAQAB"],
              //   // skipSrcPatterns: [/pixel/i, /tracker/i, /spacer/i, /beacon/i, /clear\.gif$/i, /blank/i, /placeholder/i],
              //   // skipClassPatterns: [/icon/i, /sprite/i, /emoji/i, /caret/i, /chevron/i, /arrow/i, /hamburger/i, /close\b/i],
              //   // skipSelectors: ["template img", "noscript img"],
              //   // skipIf: (img) => false
              // }
            };
          </script>
          <script src="https://cdn.altsnap.ai/sdk/v1/altsnap.min.js" defer></script>
          

Evaluate Existing Alt Text

Even if you’ve already written alt text, AltSnap can evaluate it for contextual fit and assign a confidence score. Use evaluateExisting (on by default) to enable scoring, and tagExistingScores to annotate images with data attributes you can read in your UI/tests.

window.AltSnapConfig = {
            apiKey: "YOUR_API_KEY_AND_SECRET",
            evaluateExisting: true,
            tagExistingScores: true
            // … other options
          };
          

When tagExistingScores is enabled, the snippet applies data-* attributes to the image element (example keys shown below; exact keys may evolve):

OCR (On-Image Text)

Enable OCR to capture visible text (e.g., charts, screenshots, UI labels) and feed it into context. This uses Tesseract in the browser; include the script and set language as needed.

window.AltSnapConfig = {
            apiKey: "YOUR_API_KEY_AND_SECRET",
            enableOCR: true,
            ocrLang: "eng",
            ocrScriptUrl: "https://unpkg.com/tesseract.js@4.0.2/dist/tesseract.min.js"
          };
          

Selective Processing & Ignore Policy

Control what gets scanned via selector, include/exclude patterns, and the ignore policy. This reduces noise and saves API calls.

window.AltSnapConfig = {
            // ...
            ignore: {
              emptyAltPolicy: "evaluate",
              ariaHidden: true,
              rolePresentation: true,
              minPixels: 3,
              skipCssHidden: true
            }
          };

window.AltSnapConfig = {
            // ...
            ignore: {
              // skipDataUris: [...],
              // skipSrcPatterns: [/pixel/i, /spacer/i, /placeholder/i],
              // skipClassPatterns: [/icon/i, /emoji/i, /chevron/i],
              // skipSelectors: ["template img", "noscript img"],
              // skipIf: (img) => img.width < 8
            }
          };

Reliability: Retries & Queueing

Tune retry/backoff for long-running generations or transient network issues. A bounded queue prevents runaway work in heavy pages.

window.AltSnapConfig = {
            apiKey: "YOUR_API_KEY_AND_SECRET",
            requestTimeoutMs: 30000,
            maxRetries: 2,
            backoffBaseMs: 4000,
            backoffCapMs: 20000,
            queueMax: 200,
            retryConcurrency: 3
          };

Hooks

Use hooks to enrich payloads, route by tenant/site, and respond to results (e.g., telemetry, custom UI).

window.AltSnapConfig = {
            apiKey: "YOUR_API_KEY_AND_SECRET",
          
            beforeSend: (payload, img) => {
              // Attach page context or tenant info
              return { ...payload, meta: { ...payload.meta, tenantId: "acme-co" } };
            },
          
            onResult: (result, img) => {
              // result: { source, confidence, alt, flags, id, ... }
              if (result.confidence < 0.7) {
                console.warn("AltSnap: low confidence", { src: img.src, result });
                // e.g., highlight image or enqueue for human review
              }
            }
          };

Logging

Turn on log during development for visibility into selection, requests, and caching.

window.AltSnapConfig = { apiKey: "YOUR_API_KEY_AND_SECRET", log: true };

Lazy & Late-Loading Images

Enable observe so images added later (infinite scroll, sliders, SPA routes) are discovered automatically via IntersectionObserver.

window.AltSnapConfig = { apiKey: "YOUR_API_KEY_AND_SECRET", observe: true };

Domain Hints & Writing Style

Guide generation with domainHint and choose concise vs. descriptive vs. detailed in your dashboard (or prompt templates). For product catalogs, set a hint like "ecommerce".

window.AltSnapConfig = { apiKey: "YOUR_API_KEY_AND_SECRET", domainHint: "ecommerce" };