MX Request widget · v2.0

A 3-step maintenance request form for any website.

The VHMX quick-request bar as a drop-in widget. One script tag and one HTML tag, a tail number lookup from the FAA registry, and three short steps. Each lead goes as JSON to the URL you choose.

Add it to a site

  1. Load the script once, anywhere on the page

    <script src="https://YOUR-CDN/mx-request.js" defer></script>

  2. Place the form where you want it

    <mx-request
  endpoint="https://YOUR-API/leads"
  brand="Jet MX"
  phone="844-695-3869"
  station="jet-mx"
></mx-request>

  3. Optional: match your brand

    <style>
  mx-request { --mxr-button: #2f6697; --mxr-button-hover: #24527c; --mxr-focus: #c8a96a; }
</style>

WordPress, Squarespace or Wix: paste both tags into a Custom HTML or Code block. The form uses Shadow DOM, so the theme's CSS cannot change its look and the form cannot change the theme. It loads Sora and Inter from Google Fonts unless you add fonts="inherit".

Live examples

These run in demo mode with no endpoint, so nothing is sent. The layout follows the width of the space the form sits in, not the screen.

Default: identical to the VHMX hero bar

<mx-request phone="917-732-7337"></mx-request>

Your colors and services

<style>
  mx-request { --mxr-button: #2f6697; --mxr-focus: #c8a96a; }
</style>
<mx-request brand="Jet MX" alerts="off"
  services='["Scheduled inspection","Repair or AOG",
            "Pre-purchase or export","Something else"]'>
</mx-request>

Narrow column, larger text

<mx-request size="large"></mx-request>

Options

Set these as attributes on the tag. Only endpoint is needed to go live.

AttributeWhat it doesDefault
endpointURL that receives each lead as a JSON POST. Leave it off for demo mode.none (demo)
suggest-endpointTail number lookup URL. Called as ?q=N12, or put {q} in the URL. Expects {"suggestions":[{"tail_number","make","model","year"}]}.none (lookup off)
brandCompany name used in the thank-you message.none
phoneShown for AOG requests, on errors and on the thank-you screen.none
stationRepair station ID sent with the lead, to route it to the right shop.none
sourceLabel for the site the lead came from.the page's domain
servicesJSON list for the “Your request” menu. Each item is a plain string or {"value","label","urgent"}. urgent: true shows a call-now line and sets the timeline to ASAP.Planned or Scheduled Event, Parts Procurement, AOG Event
cta-labelText on the step 1 button.Request a Quote
submit-labelText on the final button.Send Request
success-messageText on the thank-you screen.A specialist will review it…
sizelarge scales all text and fields up about 20%.VHMX size
variantcard (white card with shadow) or plain (no card, sits on your own background).card
accent / accent-inkShortcut for the button color and its text color.#11184e / white
fontsinherit skips loading Sora and Inter. Set --mxr-font and --mxr-display-font to use your own.loads Sora + Inter
alertsSet to off to hide the “email me before maintenance comes due” checkbox on step 3.shown, checked
powered-byThe navy “Powered by Virtual Hangar” logo under the button, linked to virtualhangar.com. off hides it; light makes it white for dark backgrounds.shown, navy
fineprint / privacy-urlOptional small text and privacy policy link next to that checkbox.none
prefill-from-urlSet to off to ignore URL parameters. Otherwise ?service=, timing, tail, model, aircraft, location and need fill the form.on

CSS variables

mx-request {
  /* defaults = VHMX */
  --mxr-button: #11184e;
  --mxr-button-hover: #1b2360;
  --mxr-button-ink: #fff;
  --mxr-focus: #a3c43a;      /* underline on focus */
  --mxr-ink: #0e1230;
  --mxr-label: #3a3f55;
  --mxr-muted: #6a7088;
  --mxr-line: #e7e9f2;
  --mxr-bg: #fff;
  --mxr-radius: 24px;
  --mxr-font: "Inter", sans-serif;
  --mxr-display-font: "Sora", sans-serif;
}

From JavaScript

const form = document.querySelector('mx-request');

// Fill fields, e.g. from a "Get a King Air quote" button
form.prefill({ aircraft: 'King Air 350', service: 'AOG support' });

// Track conversions
document.addEventListener('mx-request:success', (e) => {
  gtag('event', 'generate_lead', { service: e.detail.payload.service });
});
// Also: mx-request:start, :step, :submit, :error

What your endpoint receives

One JSON POST per lead. Any 2xx reply shows the thank-you screen; anything else shows a retry message with your phone number. Because the form runs on other domains, the endpoint must send CORS headers.

{
  "service": "Scheduled inspection",
  "timing": "Within a month",
  "tail_number": "N350KA",
  "aircraft_type": "Beech King Air 350",
  "location": "KGYR",
  "description": "Phase 3 coming due in March.",
  "name": "Pat Smith",
  "email": "pat@example.com",
  "mobile": "602-555-0100",
  "company": "Desert Air LLC",
  "mx_alerts": true,
  "registry_match": { "tail_number": "N350KA", "make": "BEECH", "model": "B300", "year": 2012 },
  "station": "jet-mx",
  "source": "myjetmx.com",
  "page_url": "https://myjetmx.com/",
  "page_title": "Jet MX | ...",
  "landing_page": "https://myjetmx.com/?utm_source=google",
  "referrer": "https://www.google.com/",
  "utm": { "utm_source": "google", "utm_medium": "cpc" },
  "elapsed_ms": 41250,
  "widget_version": "2.0.0"
}

Spam protection: a hidden honeypot field silently drops most bots, and elapsed_ms lets your server reject requests filled in under a few seconds.