FlowCraft: Agency Conversion Kit

Available

FlowCraft Scope Estimator

Interactive Estimator Widget

An estimator interface built with HTML, Tailwind CSS, and vanilla JavaScript. Visitors set a project size from 500 to 4,000 sq ft, choose a service package, and the estimated price range updates as they go. No npm install or build step.

Try the Live Demo

Adjust the size and package and watch the range update in your browser. It uses the buyer-delivered widget's default settings.

Live Demo

Free

Free Static HTML Shell

The visual layout and sample structure of the estimator, so you can review the design and markup in your own project.

Complete visual layout
Sample structure and markup
Does not include live estimator logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Interactive Estimator — $97

The working estimator, with its pricing and email-form settings in config.json.

Interactive JavaScript pricing behavior
Editable pricing, packages and currency in config.json
Quote form that sends leads to your own form, CRM or webhook (editable wording, can be switched off)
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full Estimator — $97

Checkout and download are handled by Payhip.

What is included

index.htmlInterface
app.jsCalculation logic and email-form delivery
config.jsonPricing, packages and email-form settings
.htaccessApache/Hostinger caching and UTF-8 settings

Available

FlowCraft Lead Wizard

Multi-Step Lead Generation Form

A three-step lead form built with HTML, Tailwind CSS, and vanilla JavaScript. Visitors enter their name and email, choose a budget and timeline, then see a thank-you screen that summarises their answers. A progress bar, inline validation and smooth step transitions keep them moving. No npm install or build step.

Try the Live Demo

Fill in the steps and submit to see the thank-you screen. Nothing you enter is saved or sent.

Live Demo

Project inquiry

Step 1 of 3

Start your project

1Your info
2Project
3Done

Let's get acquainted

Who should we send the proposal to?

Full name

Work email

Demonstration only: nothing you enter is saved or sent.

Free

Free Static HTML Shell

The visual layout of all three steps and the thank-you screen, so you can review the design and markup in your own project.

Complete visual layout of every step
Sample structure and markup
Does not include the step logic or validation

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Lead Wizard — $67

The working three-step wizard with validation, animated transitions and a ready spot for your form endpoint.

Step logic, validation and transitions in vanilla JavaScript
Add your form, CRM or webhook URL in one place in app.js
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full Lead Wizard — $67

Checkout and download are handled by Payhip.

What is included

index.htmlThe three steps and success screen, styled with Tailwind CSS
app.jsStep logic, validation and transitions, heavily commented
style.cssTransition animations and field states
.htaccessApache/Hostinger caching and UTF-8 settings

Available

FlowCraft Proof Slider

Before & After Image Slider

A before-and-after image comparison built with HTML, Tailwind CSS, and vanilla JavaScript. Visitors drag the handle with a mouse or finger, click to jump, or use the arrow keys, and the top image is trimmed to reveal the one beneath. Swap in your own project photos. No npm install or build step.

Try the Live Demo

Drag the handle on the right. The sample images show a made-up website redesign.

Free

Free Static HTML Shell

The slider's layout and markup with the sample images, fixed at the halfway point, so you can review the design in your own project.

Complete visual layout and sample images
Sample structure and markup
Does not include the drag, touch or keyboard logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Proof Slider — $67

The working before-and-after slider you just tried, ready for your own project photos.

Drag with a mouse or finger, click to jump, or use the arrow keys
Built-in "Get a Free Quote" form sends visitor leads to your form service
Swap in your own images by replacing two files
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full Proof Slider — $67

Checkout and download are handled by Payhip.

What is included

index.htmlThe slider markup, styled with Tailwind CSS
app.jsMouse, touch and keyboard logic, with the pointer math commented step by step
style.cssHandle, focus ring and glide effects
assets/images/before.jpg and after.jpg samples to replace with your own

Available

FlowCraft Portfolio Grid

Filterable Portfolio & Directory Grid

A project grid with category filter buttons, built with HTML, Tailwind CSS, and vanilla JavaScript. Visitors pick a category and the other projects fade away while the matching ones glide into place. Add your own projects and categories in the HTML. No npm install or build step.

Try the Live Demo

Click the filters on the right. The full demo shows the grid at full size, with project details.

Live Demo

Modern two-storey family home with a dark upper storey, large windows and a garden path

Residential

Cedar Lane Residence

New build · 2,400 sq ft

A two-storey family home with an open-plan ground floor and large south-facing windows.

Small backyard cottage with pale siding, a sliding glass door and a fenced garden

Residential

Garden Cottage ADU

Backyard cottage · 600 sq ft

A detached one-bedroom cottage built behind an existing home, with its own entrance.

Brick café storefront with a green awning and large lit window

Commercial

Harbor Coffee Fit-Out

Storefront & interior · 1,800 sq ft

A full café fit-out: new storefront, awning, seating area and service counter.

Eight-storey glass office tower against a blue sky, between lower buildings

Commercial

Westfield Office Tower

Facade renovation · 8 floors

A glass curtain-wall replacement on an eight-storey office building, floor by floor.

Large grey warehouse with an orange stripe, four loading docks and a delivery truck

Industrial

Riverside Distribution Center

4-dock warehouse · 60,000 sq ft

A distribution warehouse with four loading docks and a reinforced truck yard.

Manufacturing plant with a sawtooth roof and two chimneys at sunset

Industrial

Summit Manufacturing Plant

Production expansion · 42,000 sq ft

A new production hall with a sawtooth roof added to an operating plant.

Free

Free Static HTML Shell

The grid's layout, filter buttons and six sample cards with images, so you can review the design and markup in your own project.

Complete visual layout and sample images
Sample structure and markup
Does not include the filtering or animation logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Portfolio Grid — $67

The working filterable grid you just tried, ready for your own projects and categories.

Category filters with counts and a clear active state
Cards fade out and the grid glides into place, no jumping
Built-in "Get a Free Quote" form sends visitor leads to your form service
Add projects or categories in the HTML, no JavaScript changes
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full Portfolio Grid — $67

Checkout and download are handled by Payhip.

What is included

index.htmlFilter buttons and six sample cards, styled with Tailwind CSS
app.jsFiltering and the smooth rearranging animation, commented step by step
style.cssFade and scale transitions and the active filter state
assets/images/Six sample project images to replace with your own

Available

FlowCraft Pricing Matrix

SaaS Pricing Toggle Matrix

A three-plan pricing table with a Monthly / Annual toggle, built with HTML, Tailwind CSS, and vanilla JavaScript. Flip the switch and every price, "/mo" or "/yr" and the yearly savings update instantly. The middle plan is highlighted, and each plan's button passes the chosen plan and billing to your signup or contact page. No npm install or build step.

Try the Live Demo

Flip the switch on the right. The full demo shows the complete plan cards and features.

Live Demo

Monthly Annual Save 20%

Standard

For freelancers and small teams.

$29/mo

Up to 3 team members
10 active projects
Basic analytics
Email support

Start with Standard

Professional

For growing agencies that need more room.

$79/mo

Up to 15 team members
Unlimited projects
Advanced analytics & reports
Client portal
Priority support

Start with Professional

Enterprise

For larger teams with custom needs.

$199/mo

Unlimited team members
Unlimited projects
Custom integrations
Single sign-on (SSO)
Dedicated account manager

Talk to Sales

Prices in USD. Annual plans are billed once a year.

Free

Free Static HTML Shell

The pricing table's layout: the toggle and three plan cards, so you can review the design and markup in your own project.

Complete visual layout
Sample structure and markup
Does not include the toggle logic or price updates

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Pricing Matrix — $67

The working pricing table you just tried, ready for your own plans and prices.

Monthly/Annual toggle updates every price, "/mo" ↔ "/yr" and the savings instantly
Set prices and the annual discount in the HTML; the math is done for you
Plan buttons pass the chosen plan and billing to your signup page, or to the built-in quote form that sends leads to your form service
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full Pricing Matrix — $67

Checkout and download are handled by Payhip.

What is included

index.htmlThe toggle and three plan cards, styled with Tailwind CSS
app.jsToggle logic, price math, button links and the quote form, heavily commented
style.cssThe sliding toggle and price-change animation
README.txtSetup guide, plus an optional .htaccess for Apache/Hostinger

Available

FlowCraft ROI Calculator

SaaS ROI / Savings Calculator

A two-column savings calculator built with HTML, Tailwind CSS, and vanilla JavaScript. Visitors set their team size and current software cost, and the annual savings, 3-year savings and 3-year ROI update in real time, formatted as currency. A built-in quote form sends their email and numbers to your form service. No npm install or build step.

Try the Live Demo

Drag the slider or change the cost on the right. The full demo adds the cost comparison and the quote form.

Live Demo

Your current setupTell us about your team and software spend.

Number of employees25

Current monthly software cost

$

Everything you pay each month for the tools we'd replace.

With us: $300 a month ($50 base + $10 × 25 employees)

Estimated annual savings

$10,800

That's $900 a month back in your budget.

3-Year ROI

300%

3-Year savings

$32,400

Free

Free Static HTML Shell

The calculator's layout: inputs, results card and quote form, so you can review the design and markup in your own project.

Complete visual layout
Sample structure and markup
Does not include the calculation or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full ROI Calculator — $97

The working calculator you just tried, ready for your own pricing.

Annual savings, 3-year savings and ROI update as visitors drag and type
Set your own base fee, per-seat price, years and currency in the HTML
Built-in quote form sends each visitor's email and numbers to your form service
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full ROI Calculator — $97

Checkout and download are handled by Payhip.

What is included

index.htmlInputs, results card and quote form, styled with Tailwind CSS
app.jsSavings and ROI math, currency formatting and the quote form, heavily commented
style.cssCustom slider, animated cost bars and number updates
README.txtSetup guide, plus an optional .htaccess for Apache/Hostinger

Available

FlowCraft Video Player

Custom HTML5 Video Player

A branded video player built with HTML, Tailwind CSS, and vanilla JavaScript. It replaces the browser's default controls with your own: play/pause, a progress bar you can click or drag, volume, full screen and keyboard shortcuts. When the video ends, an end screen invites the viewer to ask for a quote, and the form sends their email and how much they watched to your form service. No npm install or build step.

Try the Live Demo

Press play on the right and drag along the bar. The full demo adds the end screen's quote form.

Live Demo

0:00 / 0:27

Project Showreel · sample video

Free

Free Static HTML Shell

The player's layout: poster, control bar, end screen and quote form, so you can review the design and markup in your own project.

Complete visual layout with the sample poster
Sample structure and markup
Does not include the player or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Video Player — $67

The working player you just tried, ready for your own video.

Custom play/pause, draggable progress bar, volume and full screen
Keyboard shortcuts and screen-reader labels
End screen and quote form send each viewer's email, the video title and how much they watched to your form service
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full Video Player — $67

Checkout and download are handled by Payhip.

What is included

index.htmlPlayer, control bar, end screen and quote form, styled with Tailwind CSS
app.jsPlay, seek, volume, full screen, keyboard shortcuts and the quote form, heavily commented
style.cssAuto-hiding controls, progress bar hover and volume slider styling
assets/video/Sample showreel (MP4 and WebM) and poster, plus README.txt and an optional .htaccess

Available

FlowCraft Scroll-Spy Contents

Scroll-Spy Table of Contents

A sticky table of contents for long pages, built with HTML, Tailwind CSS, and vanilla JavaScript. As visitors scroll, the link for the section they're reading lights up, and clicking a link glides smoothly to that section, stopping just below your sticky header. It uses the browser's IntersectionObserver instead of heavy scroll checks, turns into a swipeable pill bar on phones, and includes a quote form that sends the reader's email and the sections they read. No npm install or build step.

Try the Live Demo

Scroll inside the box on the right or tap a step. The full demo adds the desktop sidebar, reading progress and the quote form.

Live Demo

Step 1 · Week 1

Discovery

A laptop, notebook and coffee on a meeting table in front of a wall of sticky notes

Every project starts with a conversation. Before we sketch a single page, we want to understand your business: who you serve, what makes you different, and what you need your website to do. Is it bringing in enquiries, taking bookings, selling products, or simply giving people confidence when they look you up?

We'll ask about your current site, what works and what doesn't, and look at a few sites you like and dislike. Those examples tell us more about your taste in ten minutes than a long questionnaire ever could.

Step 2 · Weeks 1–2

Strategy & sitemap

A whiteboard showing a website sitemap: Home branching to About, Services, Work and Contact

Next, we plan the structure. A sitemap is simply a map of every page and how they connect. It sounds basic, but it's where most of the important decisions happen: what visitors need to find first, which services deserve their own page, and where every "Get in touch" button should lead.

We look at how your customers actually search, the questions they ask before buying, and the pages your competitors rank for. That tells us which pages to create and what each one needs to say.

Step 3 · Weeks 2–4

Design

With the plan approved, we design the look and feel. We start with your brand: logo, colours and fonts. If you don't have a full brand yet, we'll put together a simple style guide so everything feels consistent.

We design the homepage first, on desktop and on a phone, because it sets the tone for everything else. You'll see a realistic mockup with your real content where possible, not grey boxes and placeholder text.

Step 4 · Weeks 4–6

Build

A laptop with a code editor open, beside a phone showing the same website on a small screen

Now the designs become a working website. We build on a private preview link, so you can click through the real site on your own phone and laptop while it takes shape.

Every page is built to work on any screen size, load quickly and be readable by search engines and screen readers. Forms are connected to your inbox, and tools like booking calendars or maps are set up and tested.

Step 5 · Week 6 and beyond

Launch & care

A live website in a browser window next to a launch checklist with every item ticked

Launch day is calm when the checklist is done. We connect your domain, switch on the security certificate, set up redirects from your old pages so existing links keep working, and test every form one last time.

We submit your sitemap to Google, connect analytics if you'd like it, and check the site on a range of real devices and browsers.

Free

Free Static HTML Shell

The page layout: sticky sidebar, pill bar, five sample sections with images and the quote form, so you can review the design and markup.

Complete visual layout with sample images
Links jump to sections (the browser's plain jump)
Does not include the highlighting, smooth scroll or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Scroll-Spy Contents — $47

The working component you just tried, ready for your own long pages.

Highlights the section being read, using IntersectionObserver
Smooth scrolling that stops below your sticky header
Sticky sidebar on desktop, swipeable pill bar on phones, reading progress
Quote form sends each reader's email and the steps they read to your form service

Buy the Full Scroll-Spy Contents — $47

Checkout and download are handled by Payhip.

What is included

index.htmlSticky contents, five sample sections and the quote form, styled with Tailwind CSS
app.jsScroll-spy, smooth scrolling, reading progress and the quote form, heavily commented
style.cssLink transitions, progress bar and the swipeable pill bar on phones
assets/images/Five sample section illustrations, plus README.txt and an optional .htaccess

Available

FlowCraft Logo Marquee

Infinite Auto-Scrolling Logo Marquee

A continuously scrolling strip of client logos, built with HTML, Tailwind CSS, and vanilla JavaScript. It copies the logos just enough times to fill any screen and slides exactly one set's width, so the loop is perfectly seamless. It pauses on hover, on keyboard focus and with a pause button, works with images and cards in either direction, and includes a quote form that sends the visitor's email and the project they picked. No npm install or build step.

Try the Live Demo

Hover over either strip on the right to pause it. The logos are fictional sample brands.

Free

Free Static HTML Shell

The layout: logo strip, project-card strip, sample logos and images and the quote form, so you can review the design and markup.

Complete visual layout with sample logos and images
Sample structure and markup
Does not include the scrolling loop or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Logo Marquee — $47

The working marquee you just tried, ready for your own logos.

Truly seamless infinite loop at a constant speed, on any screen width
Pauses on hover, on keyboard focus, off-screen, and with a pause button
Works with logos, images or cards, in either direction
Quote form sends each visitor's email and the project they picked to your form service

Buy the Full Logo Marquee — $47

Checkout and download are handled by Payhip.

What is included

index.htmlLogo strip, project-card strip and quote form, styled with Tailwind CSS
app.jsSeamless copying, speed, pausing, resizing and the quote form, heavily commented
style.cssThe loop animation, edge fades, grey-to-colour logos and pause states
assets/images/Six sample website screenshots and six placeholder logos, plus README.txt and an optional .htaccess

Available

FlowCraft Offer Countdown

Honest Promotional Countdown Timer

A days, hours, minutes and seconds countdown for offers that really end, built with HTML, Tailwind CSS, and vanilla JavaScript. Give each visitor a personal 24-hour window that survives refreshes and never quietly restarts, or count down to a fixed date. At zero the offer swaps to an "Offer ended" message and the discount code disappears. A quote form sends the visitor's email, the offer status and the time left. No npm install or build step.

Try the Live Demo

The countdown on the right is your own 24-hour sample window. The full demo lets you skip to the end and see the "Offer ended" swap.

Live Demo

A laptop showing a new website, a stopwatch and a 20% off tag

Launch offer

20% off a new website

Book your website project while this offer is open and save 20% on design and build.

Offer ends in

Ends —

CodeLAUNCH20

Try the full demo →

Sample offer. Applies to new website projects booked before the offer ends.

Free

Free Static HTML Shell

The layout: offer card with image, countdown boxes, "Offer ended" message and quote form, so you can review the design and markup.

Complete visual layout with the sample image
Sample structure and markup
Does not include the countdown or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Offer Countdown — $47

The working countdown you just tried, ready for your own real offer.

Personal 24-hour windows that survive refreshes and never quietly restart
Fixed-date mode for real sales, plus an optional campaign hard stop
Automatic swap to "Offer ended" at zero; the code disappears with it
Quote form sends each visitor's email, the offer status and time left to your form service

Buy the Full Offer Countdown — $47

Checkout and download are handled by Payhip.

What is included

index.htmlOffer card, countdown, "Offer ended" message and quote form, styled with Tailwind CSS
app.jsPersonal and fixed deadlines, the countdown, the expiry swap and the quote form, heavily commented
style.cssDigit tick and the fade from the offer to "Offer ended"
assets/images/A sample offer illustration, plus README.txt and an optional .htaccess

Available

FlowCraft Mortgage Calculator

Mortgage & Loan Payment Calculator

A monthly payment calculator built with HTML, Tailwind CSS, and vanilla JavaScript. It splits the payment into principal and interest, property tax, insurance, PMI and HOA fees, shows total interest and the payoff date, and drops PMI at 78% of the price. A loan mode covers car and personal loans.

Try the Live Demo

Change any number on the right and the payment updates. The full demo adds the year-by-year schedule and quote form. Sample figures, not a loan offer.

Live Demo

Mortgage calculator

What would your monthly payment be?

Change any number and the payment updates as you type. (Sample figures.)

Home price$450,000

$

Down payment

$

%

Loan term

15 years 20 years 30 years

Interest rate

%

Example rate, not a quote. Your rate depends on your credit, the lender and the market.

Taxes, insurance & fees

Property tax (% a year)

Home insurance ($ a year)

HOA fees ($ a month)

PMI (% of loan a year)

Estimated monthly payment

$2,838

on a 30-year loan of $360,000

Principal & interest$2,275
Property tax$413
Home insurance$150
PMI$0
HOA fees$0

Total interest

$459,160

Paid off

Sep 2056

Total of payments

$819,160

Down payment

$90,000

No PMI: the down payment is 20% or more.

Estimates only, for illustration. The interest rate is an example, not a loan offer.

Free

Free Static HTML Shell

The layout: header image, inputs, payment breakdown, schedule and quote form, so you can review the design and markup.

Complete visual layout with the sample image
Sample structure and markup
Does not include the calculation or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Mortgage Calculator — $97

The working calculator you just tried, ready for your own figures.

Payment split into principal and interest, tax, insurance, PMI and HOA
PMI that drops off at 78% of the price, plus total interest and payoff date
Year-by-year schedule, loan mode for car and personal loans, any currency
Quote form sends each visitor's email and numbers to your form service

Buy the Full Mortgage Calculator — $97

Checkout and download are handled by Payhip.

What is included

index.htmlCalculator, results panel, year-by-year schedule and quote form, styled with Tailwind CSS
app.jsThe payment math, PMI drop-off, amortization schedule, loan mode and quote form, heavily commented
style.cssPrice slider, term buttons, payment bar and number flash
assets/images/A sample house illustration, plus README.txt and an optional .htaccess

Available

FlowCraft Service Area Checker

"Do We Serve Your Area?" ZIP Code Checker

A ZIP code checker built with HTML, Tailwind CSS, and vanilla JavaScript. List the areas you serve as exact codes, ranges or prefixes; visitors get an instant yes or not yet, with the area's name and a note, and a lead form for either answer.

Try the Live Demo

Try 98402 (served) or 98101 (not yet) in the checker on the right. The sample list covers a few Tacoma-area ZIP codes.

Live Demo

Service area

Do we serve your area?

Enter your ZIP code to check in a second.

Areas we serve

Tacoma & Lakewood
Gig Harbor
Puyallup
Spanaway

Checked by ZIP code. Near the edge of an area? Contact us and we'll confirm.

Free

Free Static HTML Shell

The layout: map image, ZIP box, both answers, quote form and area chips, so you can review the design and markup.

Complete visual layout with the sample image
Sample structure and markup
Does not include the checking or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Service Area Checker — $67

The working checker you just tried, ready for your own areas.

Your own list of ZIP codes, ranges (98371-98375) and prefixes (984*)
An instant answer with the area's name and a note like "Same-day service"
A lead form for every answer, including visitors outside your area
Quote form sends each visitor's email, ZIP code and answer to your form service

Buy the Full Service Area Checker — $67

Checkout and download are handled by Payhip.

What is included

index.htmlThe checker, both answers, the quote form and your list of served areas, styled with Tailwind CSS
app.jsExact codes, ranges and prefixes, the answers, the returning-visitor memory and the quote form, heavily commented
style.cssThe answer animation, area chips and the red box for a mistyped code
assets/images/A sample map illustration, plus README.txt and an optional .htaccess

Available

FlowCraft Smart Popup

Exit-Intent, Scroll & Time Sign-Up Popup

A sign-up popup built with HTML, Tailwind CSS, and vanilla JavaScript. It opens on exit intent, scroll depth or time on page, is easy to close, stays away for a week after closing and for good after a sign-up, and becomes a slide-up panel on phones.

Try the Live Demo

Open the popup from the card on the right. The full demo page runs the real triggers, with a board that shows each one counting down.

Free

Free Static HTML Shell

The layout: the popup shown open on a sample page, with offer image, heading, form and "No thanks", so you can review the design and markup.

Complete visual layout with the sample image
Sample structure and markup
Does not include the triggers, closing or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Smart Popup — $67

The working popup, ready for your own offer.

Exit-intent, scroll and time triggers; the first to fire opens it
Easy to close; stays away for 7 days after closing, and for good after sign-up
A Google-friendly slide-up panel on phones, plus buttons that open it on demand
Sign-up form sends each visitor's email and the trigger that worked to your form service

Buy the Full Smart Popup — $67

Checkout and download are handled by Payhip.

What is included

index.htmlA sample page with the popup, sign-up form and "You're in!" screen, styled with Tailwind CSS
app.jsExit-intent, scroll and time triggers, closing, snooze and sign-up memory, and the form, heavily commented
style.cssCentred dialog on computers, slide-up panel on phones, and the fade
assets/images/A sample offer illustration, plus README.txt and an optional .htaccess

Available

FlowCraft Review Wall

Customer Review & Testimonial Wall

A review wall built with HTML, Tailwind CSS, and vanilla JavaScript. Paste in your genuine reviews; it works out an honest average and star breakdown from all of them, adds star and service filters, shows owner replies, and ends with a quote form.

Try the Live Demo

Try the filters on the right: the average stays true whatever you choose. All reviews shown are clearly marked samples with made-up names.

Live Demo

Customer reviews

What our customers say

4.3

Based on 10 reviews

5★0
4★0
3★0
2★0
1★0

Showing all 10

Free

Free Static HTML Shell

The layout: header image, rating summary, filter chips, six sample review cards and the quote form, so you can review the design and markup.

Complete visual layout with the sample images
Sample structure and markup
Does not include the review list, filters or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Review Wall — $67

The working wall, ready for your own reviews.

Your reviews in a simple list; average and star breakdown worked out from every one
Star and service filters, sorting, "Read more" and "Show more reviews"
Owner replies, links to the original reviews, and a swipeable row on phones
Quote form sends each visitor's email and the service they looked at to your form service

Buy the Full Review Wall — $67

Checkout and download are handled by Payhip.

What is included

index.htmlThe wall, the card design, the quote form and your review list, styled with Tailwind CSS
app.jsThe average and breakdown, filters, sorting, "Read more", paging and the quote form, heavily commented
style.cssStars, filter chips, the grid-to-swipe layout and the rating bars
assets/images/A header illustration and cartoon sample avatars, plus README.txt and an optional .htaccess

Available

FlowCraft Floating Contact Hub

Call, Text, WhatsApp & Email Button with Opening Hours

A contact hub built with HTML, Tailwind CSS, and vanilla JavaScript. One corner button opens call, text, WhatsApp and email, and shows "Open now" or "Closed · opens Mon 8:00 AM" worked out on the business's own time zone, with split hours, holidays and daylight saving handled.

Try the Live Demo

The card on the right shows the inline layout with the sample business's real-time status (Pacific time). The full demo has the floating button and a "Pretend it's…" clock.

Free

Free Static HTML Shell

The layout: the panel shown open with its header image, status line, four contact buttons, opening hours and email form, so you can review the design and markup.

Complete visual layout with the sample image
Sample structure and markup
Does not include the open/closed logic, panel or form logic

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Floating Contact Hub — $47

The working hub, ready for your own hours and numbers.

Call, text, WhatsApp and email in one corner button, or inline on a Contact page
"Open now", "Closing soon" or "Closed · opens Mon 8:00 AM" on your own time zone
Split hours, holidays and daylight saving; visitors elsewhere also see their own time
Email form sends each visitor's email and whether you were open to your form service

Buy the Full Floating Contact Hub — $47

Checkout and download are handled by Payhip.

What is included

index.htmlA sample page with the hub: your hours, your four contact buttons and the email form, styled with Tailwind CSS
app.jsOpen, closing-soon and closed on your time zone, split hours, holidays, daylight saving, the panel and the form, heavily commented
style.cssThe corner button, panel, status dot, inline layout and hours list
assets/images/A sample header illustration, plus README.txt and an optional .htaccess

Agency Conversion Kit

Available now

FlowCraft Scope Estimator

Project Scope Calculator

Free Static HTML Shell

Full Interactive Estimator — $97

What is included

FlowCraft Lead Wizard

Start your project

Free Static HTML Shell

Full Lead Wizard — $67

What is included

FlowCraft Proof Slider

Free Static HTML Shell

Full Proof Slider — $67

What is included

FlowCraft Portfolio Grid

Cedar Lane Residence

Garden Cottage ADU

Harbor Coffee Fit-Out

Westfield Office Tower

Riverside Distribution Center

Summit Manufacturing Plant

Free Static HTML Shell

Full Portfolio Grid — $67

What is included

FlowCraft Pricing Matrix

Standard

Professional

Enterprise

Free Static HTML Shell

Full Pricing Matrix — $67

What is included

FlowCraft ROI Calculator

Free Static HTML Shell

Full ROI Calculator — $97

What is included

FlowCraft Video Player

Free Static HTML Shell

Full Video Player — $67

What is included

FlowCraft Scroll-Spy Contents

Discovery

Strategy & sitemap

Design

Build

Launch & care

Free Static HTML Shell

Full Scroll-Spy Contents — $47

What is included

FlowCraft Logo Marquee

Free Static HTML Shell

Full Logo Marquee — $47

What is included

FlowCraft Offer Countdown

20% off a new website

This offer has ended

Free Static HTML Shell

Full Offer Countdown — $47

What is included

FlowCraft Mortgage Calculator

What would your monthly payment be?

Free Static HTML Shell

Full Mortgage Calculator — $97

What is included

FlowCraft Service Area Checker

Do we serve your area?

Free Static HTML Shell

Full Service Area Checker — $67

What is included

FlowCraft Smart Popup

Get the 12-point website launch checklist

Free Static HTML Shell

Full Smart Popup — $67

What is included

FlowCraft Review Wall

What our customers say

Free Static HTML Shell

Full Review Wall — $67

What is included