# Design Detail - Embeddable Widgets for Car Detailing Businesses

## Overview
Design Detail is a vertical SaaS platform that provides embeddable widgets for car detailing businesses. From mobile detailers to high-end PPF and ceramic coating shops, we help detailers showcase their services, display pricing, and capture leads with professional widgets that embed directly into any existing website.

## Product Description
Design Detail offers five conversion-optimized widget types that detailers embed on their existing websites using a simple script tag. Widgets auto-populate from business data (services, packages, pricing) and update in real-time when data changes. No website rebuild required - just copy, paste, and go.

## The Five Widget Types

### 1. Pricing Table
Dynamic pricing display that adjusts based on vehicle size. Perfect for showing package options with deliverables, duration, and call-to-action buttons.
- Vehicle size filter (Sedan, SUV, Truck, Van, etc.)
- Auto-populated from packages database
- Customizable colors, fonts, layout
- Responsive 3-column grid design

### 2. Coverage Table
Tabbed package showcase with large images. Ideal for premium shops wanting to highlight 3-5 detailed packages with full descriptions.
- Tab-based navigation between packages
- Large package images with deliverables list
- Vehicle size pricing integration
- Professional, image-first design

### 3. Before/After Slider
Interactive image comparison slider that showcases transformation results. Essential for demonstrating work quality.
- Drag-to-compare functionality
- Touch-friendly for mobile
- Customizable aspect ratios (16:9, 4:3, 1:1)
- Optional title and description overlay

### 4. Contact Form
Lead capture form with service and package selection. Collects customer info, vehicle details, and service preferences.
- Standard fields: name, email, phone, message
- Optional vehicle fields: year, make, model
- Service/package dropdown (auto-populated)
- Submissions viewable in dashboard

### 5. Reviews Carousel
Auto-playing carousel of Google Maps reviews. Builds trust by showcasing real customer feedback.
- Pulls reviews via Google Places API
- Star ratings, reviewer names, dates
- Auto-play with pause on hover
- 7-day cache for API efficiency

## How It Works
1. Detailer signs up and enters business info (services, packages, pricing)
2. Detailer creates widgets in the dashboard, selecting which data to display
3. Detailer copies embed code: `<script src="https://app.designdetail.io/api/embeds/widget.js" data-embed-id="xxx"></script>`
4. Detailer pastes code on their existing website (WordPress, Wix, Squarespace, custom)
5. Widget renders and auto-updates when business data changes

## Target Audience

### Mobile Detailers
- Need simple pricing tables for basic packages
- Before/after sliders to showcase work on social media landing pages
- Contact forms for lead capture

### Full-Service Detail Shops
- Coverage tables to highlight multiple package tiers
- Reviews carousel to build trust
- Comprehensive pricing across all vehicle sizes

### High-End PPF & Ceramic Coating Shops
- Professional coverage tables for premium packages ($500-$5000+)
- Before/after sliders showing paint correction results
- Detailed package breakdowns with deliverables

### Multi-Location Operations
- Consistent branding across all location websites
- Centralized lead management
- Unified pricing updates across all embeds

## Key Benefits
- **No Website Rebuild**: Embed widgets on any existing site
- **Auto-Updates**: Change pricing once, updates everywhere
- **SEO-Friendly**: Direct DOM injection (not iframes) - search engines crawl content
- **Mobile-Responsive**: Works on all devices
- **Conversion-Optimized**: Designed specifically for detailing conversions
- **Analytics Built-In**: Track widget views and form submissions

## Technical Details
- Widgets render via pure JavaScript (no framework dependencies)
- Direct DOM injection for SEO and performance
- Works on any website platform
- CORS-enabled for cross-origin embedding
- Real-time data binding to Supabase database

## Dashboard Features
- `/embeds` - Create, manage, and get embed codes for widgets
- `/packages` - Define packages with deliverables and vehicle-specific pricing
- `/services` - Manage individual services
- `/contact-submissions` - View and manage form submissions
- `/media` - Upload before/after images
- `/settings` - Business info, logo, contact details

## Pricing
- Free tier available with limited widgets
- Pro plans for unlimited widgets and advanced features
- See https://app.designdetail.io for current pricing

## URLs
- Marketing Site: https://www.designdetail.io
- Application: https://app.designdetail.io
- Blog: https://www.designdetail.io/blog

## Industry Keywords
car detailing widgets, auto detailing pricing table, detailing before after slider, car care contact form, PPF pricing display, ceramic coating packages, mobile detailing website, auto detailing lead capture, detailing business software, vehicle detailing embeds

---
Last Updated: 2025-12-15