HairGraftPro
A hair-transplant & SMP conversion toolkit for WordPress + Elementor — interactive graft & cost calculators, an AI photo scanner, and a before/after case-study gallery, built to turn website visitors into booked consultations.
What HairGraftPro actually does
Most clinic websites ask a visitor to "book a free consultation" with zero context — no idea what it will cost or how many grafts they might need. HairGraftPro replaces that guesswork with an on-page estimator: the visitor picks their gender, technique and hair-loss stage (or lets AI read a photo), immediately sees a graft count and cost range, and is handed straight into a booking form. The completed estimate — plus every answer they gave — lands in your inbox as a qualified, pre-warmed lead.
Everything ships as native Elementor widgets — there are no shortcodes to memorise. Drag a widget onto any page, and every label, colour, price and disclaimer is editable from the normal Elementor panel.
The Graft Calculator (manual), the Before/After gallery and Case Studies are free forever. The AI Photo Scanner, the Visual Scalp Map, the PRP/GFC/SMP calculators and the Combo Treatment Builder require a Pro license. See Free vs Pro for the full breakdown.
How it works
One journey, from an anonymous page visitor to a named, qualified lead in your inbox — with no manual follow-up required to capture it.
1. Visitor lands on the page
They open the Graft Calculator, a treatment calculator, or the Combo Builder embedded anywhere on your site.
2. Severity is assessed
Pro AI Vision reads an uploaded photo, or the visitor self-selects a Norwood/Ludwig stage from the card grid — always available on Free.
3. Estimate is calculated
Graft/session/zone count and a live cost range render instantly, using the rates your clinic configured in the widget.
4. Lead reaches your inbox
Name, contact details, requested appointment slot, and the full estimate are emailed to your clinic — with an optional auto-reply to the patient.
Every calculator submits through a single AJAX endpoint (hairgraftpro_submit_lead) protected by a WordPress nonce. The visitor sees an instant confirmation message in place — nothing redirects them away from your page.
Requirements
HairGraftPro is deliberately small: three things need to be true before you install it.
wp_mail).HairGraftPro shows a dismissible admin notice — "HairGraftPro requires Elementor to be installed and activated" — and stays dormant until Elementor is switched on. It won't fatal your site either way.
Installation
Five minutes from zip file to your first calculator on a live page.
Install Elementor first
From Plugins → Add New, search "Elementor", install and activate the free plugin if it isn't already running on your site.
Upload HairGraftPro
Go to Plugins → Add New → Upload Plugin, choose the hairgraftpro.zip file, and click Install Now. (Or unzip it into /wp-content/plugins/ over FTP/SFTP.)
Activate the plugin
From the Plugins list, click Activate under HairGraftPro. A new HairGraftPro item appears in your WP Admin sidebar.
Open the HairGraftPro Dashboard
Set your notification email, review the medical disclaimer text, and (optionally) add an AI Vision API key. Defaults work out of the box if you'd rather configure this later — see Dashboard Overview.
Drop a widget onto a page
Edit any page with Elementor, open the widget panel, and scroll to the HairGraftPro – Hair & SMP Suite category. Drag in the Estimator & AI Scanner or Before/After Gallery widget — both work immediately on Free.
Publish a case study
Go to Case Studies → Add New, upload a before and after photo, fill in the grafts/timeline/surgeon fields, and publish. It's now available to any Before/After Gallery widget set to the Clinical Case Studies source.
There's no license key screen blocking the Free tier — every free module works the moment you drag it onto the page. Pro modules render a clean "Upgrade to Pro" card instead of breaking, until a license is applied.
Free vs Pro
One plugin, one zip file — Pro features are simply unlocked by a license rather than requiring a separate install.
| Feature | Free | Pro |
|---|---|---|
| Graft & Cost Calculator (manual severity selection) | ||
| AI Hair Loss Photo Scanner (auto-detect stage) | — | |
| Interactive Visual Scalp Map | — | |
| Before/After Comparison Slider with Follicle Zoom | ||
| Clinical Case Studies (CPT + filterable gallery) | ||
| PRP Therapy Calculator | — | |
| GFC Therapy Calculator | — | |
| SMP Coverage Calculator | — | |
| Combo Treatment Builder (bundled multi-service quote) | — | |
| Lead notification email to clinic | ||
| Patient auto-responder email | ||
| PDF quote generation, WhatsApp button, lead dashboard, multi-clinic, white-label | — | Rolling outShipping progressively across Pro updates — check the in-plugin changelog for what's live today. |
What "Pro-gated" looks like in practice
A Pro module never breaks or vanishes on a Free site. It renders a locked preview card in its place, on both the front end and the Elementor editor, so a visitor never lands on a half-built widget:
AI Scalp & Hairline Scanner
Let visitors take or upload a photo and have AI Vision suggest their Norwood/Ludwig stage automatically. The calculator below still works manually.
Upgrade to HairGraftPro ProEstimator & AI Scanner Free core
Widget name: HairGraftPro Estimator & AI Scanner. The flagship calculator — Norwood scale for men, Ludwig scale for women, three procedure types, and an optional AI photo read.
Try it
This is a live, fully working recreation of the widget's front end — the same stages, prices and math the real plugin ships with by default.
Take a live photo or upload from your gallery — Pro unlocks this scanner across every calculator.
Content controls
Every label on the widget is editable from Elementor's Content tab, grouped into six sections:
Headings & Labels
{module_name} token used inside the disclaimer text.Visual Scalp Map Pro
A clickable top-down scalp diagram sits above the card grid — click Hairline & Temples, Mid-Scalp, or Crown & Vertex (plus a separate "Diffuse / All-Over Thinning" pill for Norwood 5-6 / advanced cases) and the matching card is selected automatically. It's a second way to reach the same result, not a separate calculation.
Lead Form Fields & Booking
Four fields can be shown or hidden independently: Location/City, Preferred Contact Window, Appointment Date & Time, and the Comments box. Name, email and phone are always required.
Men's & Women's Procedure Rates
Six number fields set the per-unit price used in the live calculation — change these once per widget instance to match your clinic's actual pricing.
Men — default rates
Women — default rates
Severity scale reference
| Scale | Stage | Grafts (default) | SMP Zones |
|---|---|---|---|
| Norwood (Men) | Norwood 2 — Temples/Hairline | 1,200 | 1 |
| Norwood 3 — Deep Receding/Frontal | 2,000 | 2 | |
| Norwood 4 — Frontal & Crown | 2,800 | 3 | |
| Norwood 5-6 — Extensive Baldness | 3,800 | 4 | |
| Ludwig (Women) | Ludwig I — Central Part Thinning | 1,000 | 1 |
| Ludwig II — Widening Part/Crown | 1,800 | 2 | |
| Ludwig III — Diffuse Thinning | 2,500 | 3 |
Every stage card's SVG icon can also be replaced with your own icon under Content → Stage Icons, per stage.
Styling
The Style tab exposes eight sections — Card Container, Headings, Gender Tabs, Procedure Tabs, Stage Cards, Estimate Summary Box, Lead Form Inputs, and the Submit Button — each with normal/active/hover color states, typography, borders and shadows, so the widget can be re-skinned to match any Elementor theme without touching CSS.
Before / After Gallery Free
Widget name: Medical Before/After Gallery. A drag-to-reveal comparison slider with an optional zoom loupe, badge ribbon, and a filterable gallery pulled straight from your Case Studies.
Try it
Two data sources
Manual Single Case Slider
Upload one before photo and one after photo directly in Elementor, set the four badge values by hand (grafts, technique, stage, timeline), and place it anywhere — a landing page hero, a testimonial block, wherever one hero result belongs.
Clinical Case Studies (CPT)
Pulls a live, filterable grid (1–3 columns) from your published Case Studies, complete with a category filter bar built from any one of the four taxonomies. Badges and photos come straight from each case's meta fields — publish a case once, it appears everywhere the gallery is embedded.
Follicle Zoom & slider settings
BEFORE and AFTER (9 Months).PRP / GFC / SMP Calculators Pro
Three lighter-weight siblings of the Graft Calculator — one severity scale each, no gender split (session/zone counts for these therapies don't fork by gender), sharing the exact same AI scanner and lead form.
Widget: HairGraftPro PRP Calculator · Unit: Sessions · Default price: $150/session · AI field: prp_sessions
| Severity Tier | Description | Sessions |
|---|---|---|
| Mild Thinning | Early-stage shedding, receding hairline, or preventive maintenance. | 3 |
| Moderate Thinning | Noticeable density loss across the crown or widening part-line. | 4 |
| Advanced Thinning | Significant miniaturization requiring a full treatment course. | 6 |
| Diffuse / Extensive Thinning | Widespread thinning across the scalp needing an intensive protocol. | 8 |
Widget: HairGraftPro GFC Calculator · Unit: Sessions · Default price: $200/session · AI field: gfc_sessions
| Severity Tier | Description | Sessions |
|---|---|---|
| Mild Thinning | Early-stage shedding or preventive scalp maintenance. | 3 |
| Moderate Thinning | Noticeable density loss across the crown or part-line. | 4 |
| Advanced Thinning | Significant miniaturization requiring a full regenerative course. | 6 |
Widget: HairGraftPro SMP Calculator · Unit: Zones · Default price: $400/zone · AI field: smp_zones
| Coverage Tier | Description | Zones |
|---|---|---|
| Hairline / Temple Touch-Up | Restoring or sharpening the frontal hairline and temples only. | 1 |
| Crown + Hairline Coverage | Blending thinning crown density together with the hairline. | 2 |
| Full Scalp Coverage | Complete scalp coverage for advanced pattern baldness. | 3 |
| Full Scalp + Density Boost | Maximum density layering for diffuse thinning or scarring. | 4 |
Because the AI response already returns grafts, prp_sessions, gfc_sessions and smp_zones together, a single photo scan on any of these widgets — or the Combo Builder below — fills in every treatment's estimate simultaneously. No re-scanning per calculator.
Combo Treatment Builder Pro
Widget name: HairGraftPro Combo Treatment Builder. Lets a visitor mix any of the four treatments into one bundled quote, with an automatic discount for choosing 2 or more.
Try it
How the bundle discount works
The Bundle Discount % field (default 10%) applies to the combined subtotal automatically the moment two or more treatment lines are switched on — set it to 0 to disable bundling entirely and just show a flat combined total. The discount line displays both the percentage and the dollar amount together, e.g. -$1,080 (10% off).
Content controls
Clinical Case Studies Free
A standalone custom post type (hgp_case_study) for publishing real patient results — the data source behind the Before/After Gallery's filterable mode.
Adding a case study
Taxonomies
Four independent, hierarchical taxonomies classify each case — assign any that apply, they're what powers the Before/After Gallery's filter bar:
| Taxonomy | Slug | Example terms |
|---|---|---|
| Treatment Area | hgp_service_area | Hairline, Crown, Beard, Full Scalp, SMP |
| Technique | hgp_technique | FUE, DHI, SMP, Robotic |
| Hair Loss Stage | hgp_norwood_stage | Norwood 2–6, Ludwig I–III |
| Hair Texture | hgp_hair_type | Straight, Curly, Wavy, Afro-textured |
It's a standalone top-level item in the WP Admin sidebar (not nested under HairGraftPro) so clinic staff who only manage results content don't need access to plugin settings.
Dashboard Overview
One settings screen — WP Admin → HairGraftPro — with seven tabs controlling every module, email and disclaimer plugin-wide.
Modular Addon Switcher
Toggle individual modules — disabled ones stop loading scripts and widgets entirely.
Medical Metadata Badges Manager
Enable and set default text for the badges shown on Before/After case studies.
AI Vision Photo Scanner Configuration PRO
Power real-time stage detection using Google Gemini or OpenAI Vision. Configure the key now — it activates the moment you upgrade.
Medical Disclaimer & Consent Terms
One global disclaimer, with an optional override per calculator.
Clinic / Doctor Notification Email
Where consultation inquiries and AI scans are sent, with a click-to-copy placeholder bank.
{name}
{grafts}
{estimate}
{ai_analysis}
…+13 more
See Email & Placeholders for the full list — every chip is click-to-copy in the real dashboard.
Patient Auto-Responder Email
An instant confirmation sent to the patient the moment they submit a calculator.
License & Upgrade
Your current plan and what upgrading unlocks — see License & Upgrade below for the full list.
Free PlanAI Vision Engine Pro
The AI Photo Scanner is powered by a vision-capable model of your choice. Configuration lives in one place and applies to every calculator at once.
Choosing a provider
| Provider | Model used | Notes |
|---|---|---|
| Google Gemini Vision Default | Gemini vision models, with automatic fallback across three endpoints if one is unavailable | Free tier available directly from Google AI Studio |
| OpenAI Vision | GPT-4o-mini | Paid — requires an OpenAI API key with available credit |
Getting a Gemini API key
Visit Google AI Studio
Sign in with any Google account and generate a free API key — no billing setup required for the free tier.
Paste it into the AI Vision Engine tab
Enter the key (it starts with AIzaSy…) into the Google Gemini Free API Key field.
Click "Test / Verify Key"
The dashboard calls Google directly over AJAX and reports back instantly — ✅ API Key is Valid! Connected to Google Gemini. or the exact rejection reason if not.
Save, then enable the scanner per widget
Turn on Enable Frontend AI Photo Scanner here, then toggle Show AI Photo Scanner on each individual calculator widget in Elementor.
What the AI actually returns
Every scan sends one clinical-diagnostic prompt with the photo and gets back a single structured JSON object — this is what pre-fills the entire estimate, across every calculator at once:
{
"valid_scalp": true,
"gender": "men",
"stage": "Norwood 4",
"grafts": 2800,
"smp_zones": 3,
"prp_sessions": 6,
"gfc_sessions": 6,
"analysis": "Moderate frontal and crown thinning consistent with Norwood stage 4."
}
If the photo isn't a recognisable scalp/hairline — a room, a pet, an unrelated object — the AI instead returns valid_scalp: false with a plain-English rejection message, which the widget shows directly to the visitor instead of a nonsensical estimate.
Each photo is saved under /wp-content/uploads/hairgraftpro-scans/ so it's available to your team from the lead notification email. Review your data-retention policy for clinical photos if you operate under HIPAA, GDPR, or an equivalent regime.
Email & Placeholders Free
Two emails, fully rewritable, both built from the same set of 17 dynamic placeholders. Click any chip below to copy it.
Clinic notification email
Sent to your Recipient Email(s) (comma-separated for multiple staff) the instant any calculator is submitted. Falls back to your WordPress admin email if left blank.
Patient auto-responder Optional
An immediate confirmation sent back to the patient's own email address — off by default, one switch to enable.
All available placeholders
Default clinic email preview
Subject: New Consultation Request: {name} ({gender} - {stage})
Hello Medical Team,
You have received a new consultation & booking inquiry from HairGraftPro:
Patient Name: {name}
Email Address: {email}
Phone / WhatsApp: {phone}
Location / Branch: {location}
Best Time to Contact: {preferred_time}
Requested Appointment Date: {booking_date}
Requested Appointment Time: {booking_time}
Patient Notes / Comments: {comments}
Gender Profile: {gender}
Hair Loss Stage: {stage}
Selected Procedure: {service}
Estimated Requirement: {grafts}
Estimated Cost Range: {estimate}
AI Diagnostic Report:
{ai_analysis}
Uploaded Photo Link: {photo_url}
Disclaimer Accepted: Yes
Submitted on: {date}
Page Origin: {site_title}
License & Upgrade
HairGraftPro ships as a single zip with Free and Pro code together — a valid license simply unlocks what's already installed, powered by Freemius.
Graft Calculator (manual), one Before/After Slider, unlimited Case Studies, and basic clinic email notifications — enough to prove value with real patients before paying anything.
Everything in Free, plus the AI Photo Scanner, the Visual Scalp Map, PRP/GFC/SMP calculators, the Combo Treatment Builder, and PDF quotes, a WhatsApp button, a lead dashboard, multi-clinic support and white-labeling as they roll out.
Clicking Upgrade to Pro anywhere in the plugin opens your clinic's secure checkout and account page. Once a license activates, every Pro module unlocks immediately — no re-installing, no separate Pro zip file.
Troubleshooting
The fixes behind the most common support questions.
| Symptom | Cause & fix |
|---|---|
| No HairGraftPro widgets in Elementor | Elementor isn't active. Check Plugins for the admin notice and activate the free Elementor plugin — HairGraftPro's widget category won't register without it. |
| "Invalid image uploaded" on every AI scan | The photo wasn't recognised as a real image upload. Confirm the file is a JPEG/PNG/WebP under your host's upload limit, and that camera permissions were granted in the browser. |
| AI Vision request failed / API key errors | Use Test / Verify Key on the AI Vision Engine tab — it surfaces Google's exact rejection reason (invalid key, quota exceeded, region restricted) instead of a generic timeout. |
| Photo scan fails only occasionally, mid-response | The model's response was cut off before the JSON closed. Try a smaller, well-lit photo — the plugin already raises the token limit and retries across fallback model endpoints automatically. |
| Leads aren't arriving by email | Check Email Notifications → Recipient Email(s) is correct, and that your host's outgoing mail isn't blocked — consider an SMTP plugin if wp_mail() is unreliable on your server. |
| Before/After photos show a placeholder icon | No photo has been uploaded yet on that Case Study, or the widget is set to "Manual Single Case" with no image chosen in Elementor. Upload directly in the widget/CPT editor, not via the Media Library alone. |
| A module's toggle won't turn on in Module Manager | PRP, GFC, SMP and the Combo Builder are Pro-gated at the toggle level — they stay visually locked until a valid Pro license is active, even if you try to force them on. |
| Camera button does nothing with two calculators on one page | Make sure you're on the current plugin version — each widget's camera/upload handler is isolated per instance so multiple AI-enabled calculators on the same page don't intercept each other's clicks. |
FAQ
Quick answers to what clinics ask before and after installing.
Does HairGraftPro work without Elementor?
No. Every HairGraftPro feature is delivered as a native Elementor widget, so the free Elementor plugin must be installed and active. There's no shortcode fallback, and the plugin shows a clear admin notice if it can't detect Elementor.
Is HairGraftPro compatible with Elementor Pro?
Yes — it works identically with both the free and Pro versions of Elementor.
Where do calculator and AI scan leads get sent?
To the notification email address(es) configured on the HairGraftPro Dashboard's Email Notifications tab. If that field is left blank, leads fall back to your site's WordPress admin email automatically.
Can I customise the Case Study fields?
Case Studies use a standard custom post type with four taxonomies (Treatment Area, Technique, Hair Loss Stage, Hair Texture) plus meta fields for grafts, timeline, patient age and surgeon. A developer can extend these further using standard WordPress hooks and meta boxes.
Can I use HairGraftPro on more than one page, with different prices?
Yes. Pricing, labels, colors and disclaimer text are all set per widget instance in Elementor — you can drop the Estimator onto three different pages with three different rate cards if, for example, each represents a different clinic branch.
What happens to Pro widgets if my license lapses?
They gracefully fall back to the same locked "Upgrade to Pro" card shown to Free users — your page layout and any Free content around them stays intact, nothing breaks or disappears.
Is the medical disclaimer legally sufficient on its own?
HairGraftPro gives you full control over the disclaimer text and a required consent checkbox, but it is not legal advice. Have your own compliance or legal counsel review the wording for your jurisdiction and specialty before launch.