Zonar Theme 2026 — Module Library
Counters, Comparisons & Calculators
17 modules · Part 4 of 6. Each module below is rendered with its default field values beneath its name, file path and description.
Counters & Stats
Two Column Counter
modules/Two Col Counter.module
Renders a countdown section split into two columns: a large H2 heading on the left and five countdown cards on the right showing Month, Day, Hour, Minute and Seconds, plus a decorative spiral image in a purple circle. The only content fields are the heading, a datetime field that sets the countdown target (output hidden in the markup and read by the script), the spiral image and a custom ID; the style group sets background color, heading color and four-breakpoint spacing. JavaScript reads the hidden date, computes the remaining time and updates the five counters every interval, zeroing them out when the date passes.
Example: On a zonar.com event or webinar landing page, an editor would set the heading to Countdown to Zonar Ignite 2026 and pick the event start date so visitors see a live ticking countdown.
The countdown is on...
Four Column Counter
modules/Four Col Counter.module
A statistics band with a section heading and an unbounded repeater of counter cards, each with a target number, a unit label like Years, and a rich-text description. JavaScript uses an IntersectionObserver to animate each number counting up from a start value to its target once the section scrolls 50 percent into view, running only once, and applies jQuery matchHeight to equalize card and description heights. Style options are background color, section heading color, count number color, and responsive spacing for four breakpoints, plus a custom anchor ID.
Example: Placed on the About or homepage as a proof band showing 25 years in business, 450000 assets connected, 99.9 percent uptime and 1200 customers, each animating as the visitor scrolls to it.
Others talk, we stack results.
25Years
In the industry
25Years
In the industry
25Years
In the industry
25Years
In the industry
Two Column Counter and Image
modules/Two Column Counter and Image Module.module
Renders a two-column stats section: the left column has an H2 heading above a fixed grid of exactly four counter cards (the counter_group repeater is locked to min 4, max 4), each with a number, an optional prefix or suffix text shown in a span, and a label; the right column holds a single image. The style group sets background color, heading color, counter label color and counter number color (the number color also draws the decorative borders between cards), plus four-breakpoint spacing. JavaScript animates each counter from zero to its target value over 1.5 seconds when the page loads.
Example: On the zonar.com about or homepage, an editor would show stats like 450000 plus connected assets, 20 plus years in telematics, 99.9 percent uptime and 24/7 support next to a photo of a Zonar-equipped fleet.
H2 heading how this solution helps
50%
Lorem ipsum
50%
Lorem ipsum
50%
Lorem ipsum
50%
Lorem ipsum
SEO Stat Counter with Media
modules/SEO Stat Counter with Media.module
A two-column section pairing animated stat counters with a media block, designed with SEO extras. The content side has a heading (H2, H3 or H4), rich text description, alignment and max width controls, a 1 or 2 column layout for the 1 to 8 metric repeater (icon type of none, image, inline SVG or Bootstrap icon; prefix, number, suffix, label, description, per-metric accent color and a hide-counter option), and a full button group. The media side can show an image, a video with optional Magnific Popup lightbox and thumbnail, or list or text content blocks, with toggles for uneven border radius, borders, shadows and side swapping. A very large style group covers colors and weights for headings, numbers, labels and dividers plus stat-card styling (background, radius, padding, top border, grid gap, hover lift, halo glow) and watermark options, and an SEO group can emit Dataset JSON-LD with a dataset name and URL plus an aria label. JavaScript animates the counters with easing, restarting on viewport re-entry and honoring prefers-reduced-motion, and powers the video popup.
Example: On a high-traffic landing page such as GPS Fleet Tracking, an editor would place four counting stats like 1.2B miles tracked annually next to a product screenshot or popup demo video, with JSON-LD enabled so the statistics are machine-readable.
H2 heading how this solution helps
- 118
- Survey Respondents
- 75%
- Cite driver shortages as their number one challenge
- 33%
- Are prioritizing student ridership verification in 2026
- 48%
- Say limited staff is their primary data challenge
Metrics With Icons
modules/Metrics With Icons.module
Displays a heading above a row of animated statistic counters, configurable as 2, 3 or 4 columns, with a metrics repeater allowing 1 to 8 items. Each metric has an icon (choice of no icon, custom image, inline SVG code, or Bootstrap icon class), a prefix, a numeric value, a suffix, a label and a rich text description. Extensive style controls cover heading, number, icon, watermark, label and divider colors, font weight choices from Light 300 to Black 900 for heading, number and label, toggles for dividers and a background watermark, watermark size, and responsive spacing groups. The JavaScript animates the numbers with an eased count-up (comma formatting, decimal support) that restarts each time the section re-enters the viewport, with a configurable animation duration in milliseconds.
Example: On the zonar.com homepage or an About page, an editor would showcase proof points like 450,000+ assets connected, 25 years in business and 99.9% uptime, each with a relevant icon that counts up as visitors scroll to it.
Landing Page Stats
modules/lp-stats-band.module
A statistics band with an optional heading (h2 or h3) and subheading, an optional supporting image, and a stats repeater of 1 to 6 items each holding a value, label, footnote and optional icon image. Styles control overall and per-stat alignment, padding presets, four value text sizes (sm to xl), divider treatment (none, vertical lines, or card style), mobile column behavior (stacked or two-up), and colors for background, text, stat values, card backgrounds and dividers. The module.js file is intentionally empty; the band is fully static.
Example: A proof band on the main fleet management landing page showing '450,000+ assets connected', '99.9% uptime' and '20+ years serving fleets' in large accent-colored numerals with vertical dividers.
Results that prove it works
- Up to 90%
- reduction in accident-related litigation costs
- Up to 90%
- reduction in accident-related litigation costs
- Up to 90%
- reduction in accident-related litigation costs
- Up to 90%
- reduction in accident-related litigation costs
Comparison & Tables
Comparison Module
modules/Comparison Module.module
Renders a simple generic comparison table with a section heading above it. The table_group contains a title_container repeater (max 3, default 3) for the column headers and an unlimited add_new_row repeater where each row holds a column_value_group repeater (max 3, default 3) of plain text cell values, producing a table of up to three columns and any number of rows. Style options are limited to heading color, section background color, responsive spacing at desktop, laptop, tablet and mobile breakpoints, and a custom anchor ID. The table scrolls horizontally inside a wrapper on small screens and there is no JavaScript.
Example: On a Zonar pricing or product-tier page, an editor would build a three-column table comparing plan levels or contrasting paper inspections, basic telematics and the Zonar platform across a handful of rows.
How does Zonar compare
| Feature | Feature | Feature |
|---|---|---|
| Feature 1 | Feature 1 | Feature 1 |
| Feature 1 | Feature 1 | Feature 1 |
| Feature 1 | Feature 1 | Feature 1 |
| Feature 1 | Feature 1 | Feature 1 |
Comparison Table
modules/Comparison Table.module
Renders a polished us-versus-them comparison table with a table caption, section heading, richtext subheading and intro copy above it, plus editable column labels for the us and them columns. The rows repeater (min 1, max 12, default 5) gives each row a label, optional per-row badge, and for each side a text value with a positive boolean; a show_check_icons toggle renders check/X icons and a show_badge toggle with badge text highlights the featured column. Alignment choices (left, center, right) exist separately for headers, cells and footer, and a footer heading with richtext body sits below the table. The style group is extensive: section, table, per-column header and cell background/text colors, row label, border, and badge colors, plus four-breakpoint responsive spacing. A stub module.js confirms no JavaScript is needed.
Example: On a zonar.com competitor or switch-to-Zonar page, an editor would set the columns to Zonar and Other Providers and fill five rows like Verified Inspections, OEM Partnerships and US-Based Support, with a Most Popular badge on the Zonar column.
Why Choose Us
| Zonar | The Other Guys | |
|---|---|---|
| Real-Time GPS Tracking | Sub-second updates | Delayed by minutes |
| DVIR Compliance | Fully electronic | Paper-based |
| Customer Support | 24/7 live support | Email only |
| Integration Options | Open API platform | Limited connectors |
| Implementation Time | Days, not months | Lengthy onboarding |
Compare Chart
modules/Compare Chart.module
Renders a static three-column comparison table pitting your brand against a single competitor, with an editable heading and heading tag choice (h2, h3, h4 or p), plus editable column labels for the first column, your brand and the competitor. The rows repeater (min 1, max 30, default 7) gives each row a feature name and, for each side, a text value plus a positive boolean that renders a colored check or X icon. The style group exposes header background, per-column brand and competitor colors, feature label and cell text colors, border and header border colors, check and X icon colors, a base font size in pixels, and padding via a spacing field. On mobile the column labels are re-injected per cell using CSS pseudo-elements. No JavaScript is used.
Example: On a zonar.com competitive landing page, an editor would list features like Verified Electronic Inspections, Predictive Maintenance and 24/7 Support down the rows, with green checks under Zonar and X marks or caveats under a rival telematics provider.
| Zonar Ignition | Others | |
|---|---|---|
| Ecosystem |
Integrated hardware and software built to work together
|
Disconnected software with third-party hardware
|
| Inspection |
Verified inspections with RFID validation
|
Digital checklists without physical verification
|
| Hardware |
Rugged telematics devices for deep diagnostics
|
Plug-and-play devices with limited data
|
| Safety |
Unified view of telematics, video and driver coaching
|
Basic tracking without driver context
|
| Focus |
Built for complex, high-accountability fleets
|
Designed for general, light-duty operations
|
| EV Readiness |
Battery health, charging, and compliance visibility
|
Limited support for EV fleet management
|
| Support |
Fleet-focused experts with regulatory knowledge
|
General support without fleet specialization
|
Competitor Comparison Table
modules/Competitor Comparison Table.module
Renders a review-score comparison card set against a two-color gradient background, featuring a highlighted brand (logo, rating badge image, overall score and review count) versus a competitors repeater (min 1, max 8, default 5) of names and logos. A categories repeater (min 1, max 10, default 4) defines rating rows, each with a featured score and a competitor_scores repeater of numeric scores; source attribution text and logo credit the review platform, and a button group offers the full theme button style (7 variants) and size (3 sizes) choices. The JavaScript renders the numeric scores as SVG star ratings with full, half and empty stars, positions a featured ribbon, and syncs row heights across cards. Style fields cover gradient start/end, card background, featured column color and text, category and score text, star and empty star colors, borders, card radius, and four-breakpoint spacing.
Example: On a zonar.com why-Zonar page, an editor would show Zonar's G2 ratings across categories like Ease of Use, Quality of Support and Product Direction, with star rows comparing against Samsara, Geotab, Verizon Connect and Motive.
Section Heading
|
4.6
(356)
|
Featured brand scores | Verizon | Azuga | Motive | Geotab | Samsara |
|---|---|---|---|---|---|---|
| Ease of Use | 4.6 | 4.5 | 3.4 | 4.4 | 4.4 | 4.3 |
| Customer Service | 4.7 | 4.2 | 2.8 | 4.2 | 4.4 | 4.2 |
| Features | 4.5 | 4.4 | 3.3 | 4.2 | 4.4 | 4.3 |
| Value for Money | 4.5 | 4.2 | 2.8 | 4.3 | 4.2 | 4.4 |
Rewards Table
modules/Rewards Table.module
Renders a rewards or commission comparison table with a heading, rich text subheading and footnote. Editors set three column labels and add 1 to 12 rows of three text cells, with any row markable as featured to get an accent border and an optional badge label. On desktop it outputs a semantic three-column table with a highlighted middle column; on mobile the same rows re-render as stacked cards. Style fields cover heading, subheading, background, header background and text, highlight, featured accent and row border colors plus responsive spacing. No JavaScript.
Example: On a partner or referral program page, an editor would build a tier table with columns like Tier, Commission Rate and Requirements, featuring the Gold row with a Most Popular badge.
Referral Rewards
The more vehicles in the fleet you refer, the more you earn.
| Fleet Size | You Earn | Total Reward |
|---|---|---|
| 1 – 25 vehicles | $500 | $500 |
| 26 – 50 vehicles | $1,000 | $1,000 |
| 51 – 100 vehicles | $2,500 | $2,500 |
| 101 – 250 vehicles | $5,000 | $5,000 |
| Top Tier 251+ vehicles | $10,000 | $10,000 |
Role Chart
modules/Role Chart.module
Renders an if-this-then-that role mapping chart with a heading (H2, H3, H4 or paragraph tag choice), three editable column labels plus separate mobile labels, and a rows repeater of 1 to 20 entries. Each row has a role name, a choice of 14 built-in inline SVG icons (fleet manager grid, safety shield, dispatcher map pin, wrench, truck, bus, clipboard, analytics chart, driver, finance, EV bolt, hours clock, gauge, route), per-row icon background and stroke colors, and if and gives text cells. Style fields control header, cell text, role name, border and mobile label colors, mobile card background, font size, icon size and radius, plus a spacing field. Desktop renders a table-like grid and mobile re-renders rows as cards. No JavaScript.
Example: On a product page like Zonar Ground Traffic Control, an editor would map roles such as Fleet Manager, Dispatcher and Maintenance Lead to the specific benefit each gets, e.g. If you manage routes, Zonar gives you real-time GPS visibility.
| Your role | If this is you | Ignition gives you |
|---|---|---|
|
|
You're piecing together the full picture across multiple platforms. | A unified dashboard with real-time KPIs, asset visibility, and one-click drill-down reports. |
|
|
You're managing driver risk across disconnected camera and telematics systems. | Integrated driver performance insights with video evidence, auto-coaching, and risk scoring. |
|
|
You need fast, accurate visibility to route and respond in real time. | A live map with find-nearest tools, proximity search, and real-time video streaming. |
|
|
You're tracking defects and inspections across paper and digital systems. | A unified maintenance view with verified inspections, defect tracking, and full asset history. |
Calculators & Tools
CARB ROI Calculator
modules/CARB ROI Calculator.module
An interactive ROI calculator for CARB Clean Truck Check compliance. Editors control an optional urgency banner (headline, richtext sub, button text), a delta callout comparing manual testing vs Zonar, all section labels and instructions, savings-note variants, a lease callout, disclaimer, and primary/secondary CTAs; an assumptions group exposes the business model (CARB fee per vehicle, Zonar retest and risk factors, incident cost and frequency, add-on and standalone per-vehicle pricing, hardware purchase and lease costs) and a defaults group sets initial slider values plus default compliance cycles (4 or 2 per year) and plan (addon or standalone). The front end renders six range sliders (fleet size, test cost, hours per test, labor rate, fail rate, risk incidents) plus toggle button groups for cycles and plan. The JavaScript recalculates savings live on every input using requestAnimationFrame, formats currency outputs, syncs toggle states, and includes a see-2027 button that switches the cycle assumption.
Example: On a zonar.com CARB Clean Truck Check landing page, a California fleet manager would drag the sliders to their 120-truck fleet and see projected annual savings with Zonar's compliance solution versus manual smoke testing.
Adjust the six data points below to calculate your cost and savings.
| Cost category | Manual process | Zonar automated |
|---|---|---|
| CARB compliance fee ($32.13 / vehicle) | — | — |
| In-person testing costs | — | $0 |
| Staff labor (scheduling + transport) | — | $0 |
| Retest costs (failed vehicles) | — | — |
| Non-compliance risk exposure | — | — |
| Zonar subscription | $0 | — |
| Total annual cost | — | — |
Emissions Check ROI Calculator
modules/Emissions Check ROI Calculator.module
An interactive savings calculator that estimates what CARB Clean Truck Check compliance costs a fleet without Zonar Emissions Check. Editors control the eyebrow, headline, sub-headline, a rich-text 2027 regulatory callout, a disclaimer, and every input and results-row label through a dedicated labels group. A defaults group sets the initial value, min, max and step for three sliders (number of vehicles, cost per third-party scan, downtime cost per scan), plus default toggle states for scans per year (2 or 4) and service type (add-on vs standalone), while a pricing group holds the add-on and standalone monthly per-asset rates fed to the script. JavaScript reads a JSON config from a data attribute, recalculates fleet size, total scans, scan cost, downtime cost, total without Zonar, Zonar cost and net annual savings live as sliders and toggle buttons change, and shows or hides the 2027 callout. A style group exposes eleven colors (accent, savings, warning, negative, text, panel background, borders, toggle background and more) and there is a single CTA with editable text and link.
Example: Placed on the Emissions Check or CARB Clean Truck Check product page so a California fleet manager can drag the vehicle-count slider to their fleet size and immediately see estimated annual savings before clicking the get-pricing CTA.
See what CARB compliance costs without Zonar.
Adjust your fleet details below to estimate your potential annual savings with Zonar Emissions Check.
Savings Calculator
modules/Savings Calculator.module
An interactive fleet savings calculator with an editable heading and rich text subheading, a defaults group where editors preset ten numeric inputs (fleet size, breakdowns per year, cost per breakdown, tires per vehicle, cost per tire, tire lifetime, annual mileage, fuel efficiency, fuel price and calculation years), and a formulas group exposing three assumption percentages (breakdown reduction, tire savings, rolling resistance). Style fields cover background, heading, subheading, label, input border, accent, results panel and total highlight colors plus responsive spacing, and an optional methodology section holds explanatory rich text. The JavaScript recalculates breakdown, tire and fuel savings in real time on every input, formats results as currency, supports an imperial versus metric unit toggle that relabels and converts the mileage, efficiency and fuel price fields, and toggles the methodology panel open and closed.
Example: On a zonar.com ROI or pricing page, a prospect with 150 trucks enters their fleet details and instantly sees projected per-vehicle and total fleet savings over five years from fewer breakdowns and better fuel economy.
Tire ROI Savings Calculator
See how much your fleet could save with proper tire pressure monitoring.
Your Estimated Savings
Savings per breakdown: 85% of the amount of breakdowns times the cost per breakdown per vehicle.
Tire Cost Savings: 10% of the cost of a new tire times the number of tires per vehicle due to proper inflation, divided by average tire lifetime.
Fuel Savings: 25% of total fuel consumption based on tires rolling resistance. 10% of fuel consumption based on rolling resistance times the average price per gallon due to proper inflation.
Credit Card Processing ROI Calculator
modules/credit-card-roi.module
An interactive credit card processing ROI calculator laid out as a form panel next to a results panel. Editors set the section title, form label, results title, an initial annual revenue value, an initial credit-card percentage, per-provider processing rates for FieldSync, Stripe and QuickBooks, and a logo image for each provider. A spacing group exposes text-based padding, margin and form-to-results gap values, and a style group covers section background color and image, results panel background and text colors, plus highlight, success and alert colors; a custom ID field supports anchor linking. All calculator logic lives in an inline require_js block in module.html: a revenue text input and a 1-100 range slider recalculate and compare estimated annual processing fees across the three providers as the user types or drags.
Example: A Zonar FieldSync landing page for field service operators, where the editor enters current Stripe and QuickBooks rates so prospects can slide their credit card sales percentage and see projected savings with FieldSync payments.
Calculate how much you'll save on payment processing fees.
Comparison Results
District Stackup Quiz
modules/District Stackup Quiz.module
A fully interactive self-assessment quiz that lets school district fleet managers see how their operation stacks up against peer districts. Editors configure intro copy (overline, richtext headline, subhead, up to 5 meta chips, start button text), a questions repeater (min 1, max 10, default 5) where each question has an ID, label, type (single or multi select with a max-selections number) and an options repeater (min 1, max 12), a peer_data repeater (max 10, default 4) of benchmark adoption percentages by fleet size (routing software, parent apps, dashcams, student tracking, predictive maintenance plus top ops and safety challenges), a products repeater (max 20, default 8) with category, color, description, impact stats and matching keys, a why_labels repeater (max 40) of reason phrases, scoring labels, and results/CTA copy with primary and secondary CTAs and restart text. All field data passes to JavaScript as a data-config JSON payload; the JS steps through questions with a progress bar, scores four dimensions (technology, operations, safety, data) against the selected peer group, colors the results, and recommends up to four products with generated why-phrases. Style fields set accent, secondary, text and muted colors.
Example: On a zonar.com pupil transportation landing page, a district transportation director answers five questions about fleet size, current technology and top challenges, then sees how they compare to similar districts and gets recommended Zonar products like MyView or Z Pass.
