Swatches

This is the standard color palette. Light variations are used for hover states. Dark variations are used for active or focused states.


Cyan
#00AAD7
LightCyan
#1AC4F1
DarkCyan
#0091BE
Green
#98C33C
LightGreen
#A9D944
DarkGreen
#7FAA22
Red
#E85033
LightRed
#FF6A4D
DarkRed
#CF371A
Purple
#7B58A5
LightPurple
#9572BF
DarkPurple
#623F8C
Blue
#005F9F
LightBlue
#1A79B9
DarkBlue
#004686
Yellow
#F1B828
LightYellow
#FFD242
DarkYellow
#D89F0F
Slate
#444444
LightSlate
#5E5E5E
DarkSlate
#2B2B2B
Grey
#DBE3E8
LightGrey
#F4F4F4
DarkGrey
#C2CACF

Typography


Headings

H1 Heading


H2 Heading


H3 Heading


H4 Heading


H5 Heading

Body Text

Wi-Fi has changed how we get things done. In a typical day, we all use several different Wi-Fi devices for work and play. It’s become a part of our everyday lives, sometimes without us even realizing it. But when something goes wrong it’s a mystery to fix — and your users and clients are counting on you to fix the problem.


Testimonials

"Wi-Spy DBx was the only option that gave us everything we needed for supporting critical enterprise-level Wi-Fi environments at an affordable price for our whole team."

—

Devin Akin

Divergent Dynamics

"In 16 years of building and analyzing wireless networks, Wi-Spy is the best ‘bang-for-the-buck’ I’ve seen."

—

Matthew Wheeler

The Network Operations Company

"Wi-Spy is easily one of my all time favorite tools and I strongly recommend it to anyone who is responsible for managing a Wi-Fi network of any size."

—

Larry Greenblatt

CISSP, CISM, CEH, ECSA


			<div class="row" style="max-width: 1400px; margin: 0 auto;">
				<blockquote class="col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 equal-height">
					<p>"..."</p>
					<img class="img-circle profile" src="..." alt="&#8212;">
					<p class="name">...</p>
					<p class="title">...</p>
				</blockquote>
				<blockquote class="col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 equal-height">
					<p>"..."</p>
					<img class="img-circle" src="..." alt="&#8212;">
					<p class="name">...</p>
					<p class="title">...</p>
				</blockquote>
				<blockquote class="col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 equal-height">
					<p>"..."</p>
					<img class="img-circle profile" src="..." alt="&#8212;">
					<p class="name">...</p>
					<p class="title">...</p>
				</blockquote>
			</div>

"Wi-Spy DBx was the only option that gave us everything we needed for supporting critical enterprise-level Wi-Fi environments at an affordable price for our whole team."

— Devin Akin, Divergent Dynamics

"In 16 years of building and analyzing wireless networks, Wi-Spy is the best ‘bang-for-the-buck’ I’ve seen."

— Matthew Wheeler, The Network Operations Company

"Wi-Spy is easily one of my all time favorite tools and I strongly recommend it to anyone who is responsible for managing a Wi-Fi network of any size."

— Larry Greenblatt, CISSP, CISM, CEH, ECSA 

			<div class="row" style="max-width: 1400px; margin: 0 auto;">
				<blockquote class="col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 equal-height">
					<p>"..."</p>
					<span class="name">&mdash; ..., </span>
					<span class="title">...</span>
				</blockquote>
				<blockquote class="col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 equal-height">
					<p>"..."</p>
					<span class="name">&mdash; ..., </span>
					<span class="title">...</span>
				</blockquote>
				<blockquote class="col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 equal-height">
					<p>"..."</p>
					<span class="name">&mdash; ..., </span>
					<span class="title">...</span>
				</blockquote>
			</div>
Alerts
Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action. 

			<div class="alert alert-success">
				<strong>... </strong>...
			</div>

			<div class="alert alert-info">
				<strong>... </strong>...
			</div>

			<div class="alert alert-warning">
				<strong>... </strong>...
			</div>

			<div class="alert alert-danger">
				<strong>... </strong>...
			</div>

Controls


Links
Click Me! 

			<a href="#">...</a>
Default Buttons
Major
 
Minor
 
Inverse

			<div class="button-group">
				<div class="btn btn-major blue">...</div>
				<div class="btn btn-minor">...</div>
				<div class="btn inverse">...</div>
			</div>
Button Variations
Major
 
Major
 
Major

			<div class="button-group">
				<div class="btn btn-major green">...</div>
				<div class="btn btn-major purple">...</div>
				<div class="btn btn-major slate">...</div>
			</div>
Radios

					<form>
						<div class="form-check">
							<label>
								<input type="radio" name="radio" checked><span class="label-text">...</span>
							</label>
						</div>
						<div class="form-check">
							<label>
								<input type="radio" name="radio"><span class="label-text">...</span>
							</label>
						</div>
						<div class="form-check">
							<label>
								<input type="radio" name="radio"><span class="label-text">...</span>
							</label>
						</div>
					</form>


					<form>
						<label class="form-check">
							<input type="radio" name="radio" checked><span class="label-text">...</span>
						</label>
						<label class="form-check">
							<input type="radio" name="radio"><span class="label-text">...</span>
						</label>
						<label class="form-check">
							<input type="radio" name="radio"><span class="label-text">...</span>
						</label>
					</form>
Checkboxes

					<form>
						<div class="form-check">
							<label>
								<input type="checkbox" name="check" checked> <span class="label-text">...</span>
							</label>
						</div>
						<div class="form-check">
							<label>
								<input type="checkbox" name="check"> <span class="label-text">...</span>
							</label>
						</div>
						<div class="form-check">
							<label>
								<input type="checkbox" name="check"> <span class="label-text">...</span>
							</label>
						</div>
					</form>


					<form>
						<label class="form-check">
							<input type="checkbox" name="check" checked> <span class="label-text">...</span>
						</label>
						<label class="form-check">
							<input type="checkbox" name="check"> <span class="label-text">...</span>
						</label>
						<label class="form-check">
							<input type="checkbox" name="check"> <span class="label-text">...</span>
						</label>
					</form>
Add/Subtract

			<div class="q-container">
				<div class="q-control">
					<a href="#" class="minus"></a>
				</div>
				<form>
					<input type="quantity" class="q-form" id="Quantity" aria-describedby="Quantity" value="0">
				</form>
				<div class="q-control">
					<a href="#" class="plus"></a>
				</div>
			</div>
Tabs

			<ul class="nav nav-pills">
				<li class="nav-item active">
					<a class="nav-link" data-toggle="pill" href="#">...</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="pill" href="#">...</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="pill" href="#">...</a>
				</li>
			</ul>
Tooltips
Hover over me 

			<a href="#" data-toggle="tooltip" data-placement="top" title="...">...</a>

Forms


Basic Forms

				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							<input type="FirstName" class="form-control" id="" placeholder="First Name">
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<input type="LastName" class="form-control" id="" placeholder="Last Name">
						</div>
					</div>
				</div>


				<div class="form-group">
					<input type="email" class="form-control" id="" placeholder="Email">
				</div>
Selector

				<div class="form-group">
					<h5>...</h5>
					<select class="selectpicker" title="...">
						<option data-hidden="true"></option>
						<option>...</option>
						<option>...</option>
						<option>...</option>
					</select>
				</div>
Textarea

				<div class="form-group">
					<h5>...</h5>
					<textarea class="form-control" rows="3" placeholder="..."></textarea>
				</div>

Masthead


Deliver Reliable Wi-Fi
with Chanalyzer + Wi-Spy

Wi-Fi is no longer a luxury. Your users depend on Wi-Fi for business, education, healthcare, and of course entertainment. But delivering fast, reliable Wi-Fi in complex network environments can be difficult. That’s why we built Chanalyzer + Wi-Spy.

Learn More Buy Now 

			<div class="jumbotron blue">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 col-md-6 col-md-push-6">
							<img class="img-responsive" src="...">
						</div>
						<div class="col-sm-12 col-md-6 col-md-pull-6">
							<h1>...</h1>
							<p>...</p>
							<div class="button-group">
								<a href="#masthead" type="button" class="btn inverse" style="border-color: white; color: white;">Learn More</a>
								<a href="#masthead" type="button" class="btn inverse" style="border-color: white; color: white;">Buy Now</a>
							</div>
						</div>
					</div>
				</div>
			</div>

Banners


Small Banner
Your Wi-Fi should be awesome. Get it now. 

				<div class="row sm-strip darkblue">
					<div class="col-sm-12 text-center">
						<span>... <a href="#">...</a></span>
					</div>
				</div>
Medium Banner

Your Wi-Fi should be awesome!

Wi‑Spy is a custom USB spectrum analyzer designed specifically for troubleshooting Wi-Fi issues. Unlike most Wi-Fi tools, Wi‑Spy gathers information about ALL RF signals in the 2.4 and 5 GHz bands.

Get It Now 

				<div class="row md-strip cyan text-center">
					<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
						<h2>...</h2>
						<p>...</p>
						<a href="#" class="btn inverse">...</a>
					</div>
				</div>
Medium Banner w/ Image

Locate Sources of Interference

Once you're able to see interference using Chanalyzer + Wi-Spy, the next step is to eliminate it. Unlike the omnidirectional Wi-Fi antenna in your laptop or wireless adapter, our Device Finder 2.4 GHz Directional Antenna is highly focused to pinpoint non-Wi-Fi sources of interference. This allows you to actively seek out and remove loud transmitters from your Wi-Fi environment.

. 

				<div class="container-fluid md-strip cyan">
					<div class="container">
						<div class="row feature vertical-align">
							<div class="col-sm-5">
								<img class="img-responsive img-rounded" src="..." style="margin:0 auto; box-shadow: 0 2px 6px rgba(0,0,0,0.3);">
							</div>
							<div class="col-sm-6">
								<h2>...</h2>
								<p>...</p>.
							</div>
						</div>
					</div>
				</div>
Large Banner w/ Video

Your Wi-Fi should be awesome!

Wi‑Spy is a custom USB spectrum analyzer designed specifically for troubleshooting Wi-Fi issues. Unlike most Wi-Fi tools, Wi‑Spy gathers information about ALL RF signals in the 2.4 and 5 GHz bands.

Get It Now 

				<div class="row md-strip cyan text-center">
					<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
						<h2>...</h2>
						<div class="embed-responsive embed-responsive-16by9 vidframe">
							<iframe src="..." allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="400" height="225"></iframe>
							<script src="..."></script>
						</div>
						<p>...</p>
						<a href="#" class="btn inverse">...</a>
					</div>
				</div>

Features


Feature w/ Image Left

Locate Sources of Interference

Once you're able to see interference using Chanalyzer + Wi-Spy, the next step is to eliminate it. Unlike the omnidirectional Wi-Fi antenna in your laptop or wireless adapter, our Device Finder 2.4 GHz Directional Antenna is highly focused to pinpoint non-Wi-Fi sources of interference. This allows you to actively seek out and remove loud transmitters from your Wi-Fi environment.


			<div class="container">
				<div class="row feature vertical-align">
					<div class="col-sm-5">
						<img class="img-responsive img-rounded" src="..." style="margin:0 auto; box-shadow: 0 2px 6px rgba(0,0,0,0.3);">
					</div>
					<div class="col-sm-7">
						<h2>...</h2>
						<p>...</p>
					</div>
				</div>
			</div>
Feature w/ Image Right

Powerful Dual-Band Spectrum Analysis

Wi-Spy is a powerful dual-band spectrum analyzer that measures Wi-Fi and non-Wi-Fi activity in both the 2.4 GHz and 5 GHz bands. This data is then passed to Chanalyzer, which maps out the interference along with your Wi-Fi networks and their respective channels so you can see and manage interference and saturation in real time.


			<div class="container">
				<div class="row feature vertical-align">
					<div class="col-sm-5 col-md-push-7">
						<img class="img-responsive" src="..." style="margin:0 auto; max-width: 95%;">
					</div>
					<div class="col-sm-7 col-md-pull-5">
						<h2>...</h2>
						<p>...</p>
					</div>
				</div>
			</div>

Tables


Chanalyzer

Note: All new Chanalyzer licenses come with one year of MetaCare Assurance

Item SKU Price Quantity
Chanalyzer with Report Builder SFW-CHAN-R $499
Device Finder Antenna for Wi-Spy DEVFINDER-24 $150
Report Builder Accessory for Chanalyzer ACC-CHAN-RPT $150 

			<div class="container table-container">
				<table class="table table-striped">
					<div class="table-copy">
						<p class="table-header">Chanalyzer</p>
						<p>Note: All new Chanalyzer licenses come with one year of <a href="http://www.metageek.com/land/metacare/chanalyzer/" class="link">MetaCare Assurance</a>
						</p>
					</div>
					<thead>
						<tr>
							<th>Item</th>
							<th class="hide-sm">SKU</th>
							<th>Price</th>
							<th>Quantity</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><a href="#" class="link">Chanalyzer with Report Builder</a></td>
							<td class="hide-sm">SFW-CHAN-R</td>
							<td>$499</td>
							<td>
								<div class="q-container">
									<div class="q-control">
										<a href="#" class="q-btn minus"></a>
									</div>
									<form>
										<input type="quantity" class="q-form" id="Quantity" aria-describedby="Quantity" value="0">
									</form>
									<div class="q-control">
										<a href="#" class="q-btn plus"></a>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td><a href="#" class="link">...</a></td>
							<td class="hide-sm">...</td>
							<td>...</td>
							<td>
								<div class="q-container">
									<div class="q-control">
										<a href="#" class="q-btn minus"></a>
									</div>
									<form>
										<input type="quantity" class="q-form" id="Quantity" aria-describedby="Quantity" value="0">
									</form>
									<div class="q-control">
										<a href="#" class="q-btn plus"></a>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td><a href="#" class="link">...</a></td>
							<td class="hide-sm">...</td>
							<td>...</td>
							<td>
								<div class="q-container">
									<div class="q-control">
										<a href="#" class="q-btn minus"></a>
									</div>
									<form>
										<input type="quantity" class="q-form" id="Quantity" aria-describedby="Quantity" value="0">
									</form>
									<div class="q-control">
										<a href="#" class="q-btn plus"></a>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

Cards


Pricing Cards

Chanalyzer Basic

Ideal for basic Wi-Fi networks

Includes:

SKUs: 2450x3v, SFW-CHAN


$849

+ international taxes & customs

Chanalyzer Essential

Ideal for complex Wi-Fi networks

Includes:

  • Wi‑Spy DBx
  • Chanalyzer with Report Builder
  • Device Finder Antenna
  • 1 year of MetaCare for software

SKUs: 2450x3v, SFW-CHAN-R, DEVFINDER-24


$1,149

+ international taxes & customs

MetaGeek Complete

The total solution for great Wi-Fi

Includes:

SKUs: 2450x3v, SFW-CHAN-R, DEVFINDER-24,
SFW-EYEPA-001, AirPcap Nx-001


$2,348

+ international taxes & customs 


			<div class="container-fluid lightgrey" style="padding: 80px 0 50px">
				<div class="container">
					<div class="row">

						<div class="col-md-4">
							<div class="card centered">
								<div class="title equal-height2 blue">
									<h3 class="white">Chanalyzer Basic</h3>
									<p class="white">Ideal for basic Wi-Fi networks</p>
								</div>
								<div class="body">
									<p class="text-center">Includes:</p>
									<ul class="checklist">
										<li>Wi&#8209;Spy DBx</li>
										<li>Chanalyzer Software</li>
										<li>
											<a href="https://support.metageek.com/hc/en-us/articles/203601674-What-is-MetaCare-" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Software updates and support. Click to learn more">1 year
												of MetaCare</a> for software
										</li>
									</ul>
									<p class="sku">SKUs: 2450x3v, SFW-CHAN</p>
								</div>
								<div id="editprice" class="text-center">
									<form enctype="multipart/form-data" method="post" action="https://store.metageek.com/add_cart.asp" name="catalog list">

										<!-- Chanalyzer Basic -->
										<input name="item_id" value="202" type="hidden" />
										<input name="cb61-202" value="61" type="hidden" />
										<input name="cb62-202" value="62" type="hidden" />
										<input name="qty-0" value="1" type="hidden" />
										<input name="event_value" value="849" type="hidden" class="gavalue">
										<button type="submit" class="btn btn-major blue" alt="Buy Now">Buy Now</button>
										<br>
										<p class="price-text" itemprop="price">$849</p>
										<meta itemprop="priceCurrency" content="USD" />

										<span class="international2">+ <a href="https://support.metageek.com/hc/en-us/articles/217134107-International-Ordering-Information" target="_blank">international taxes & customs</a></span>
									</form>
								</div>
							</div>
						</div>

						<div class="col-md-4">
							<div class="card centered">
								<div class="title equal-height2 blue">
									<h3 class="white">Chanalyzer Essential</h3>
									<p class="white">Ideal for complex Wi-Fi networks</p>
								</div>
								<div class="body">
									<p class="text-center">Includes:</p>
									<ul class="checklist">
										<li>Wi&#8209;Spy DBx</li>
										<li>Chanalyzer with Report Builder</li>
										<li>Device Finder Antenna</li>
										<li><a href="https://support.metageek.com/hc/en-us/articles/203601674-What-is-MetaCare-" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Software updates and support. Click to learn more">1 year of MetaCare</a> for software</li>
									</ul>
									<p class="sku">SKUs: 2450x3v, SFW-CHAN-R, DEVFINDER-24</p>
								</div>
								<div id="editprice" class="text-center">
									<form enctype="multipart/form-data" method="post" action="https://store.metageek.com/add_cart.asp" name="catalog list">

										<!-- Chanalyzer Essential -->
										<input name="item_id" value="203" type="hidden" />
										<input name="cb66-203" value="66" type="hidden" />
										<input name="cb67-203" value="67" type="hidden" />
										<input name="cb68-203" value="68" type="hidden" />
										<input name="qty-0" value="1" type="hidden" />
										<input name="event_value" value="1149" type="hidden" class="gavalue">
										<button type="submit" class="btn btn-major blue" alt="Buy Now">Buy Now</button>
										<br>
										<p class="price-text" itemprop="price">$1,149</p>
										<meta itemprop="priceCurrency" content="USD" />
										<span class="international2">+ <a href="https://support.metageek.com/hc/en-us/articles/217134107-International-Ordering-Information" target="_blank">international taxes & customs</a></span>
									</form>
								</div>
							</div>
						</div>

						<div class="col-md-4">
							<div class="card centered">
								<div class="title equal-height2 blue">
									<h3 class="white">MetaGeek Complete</h3>
									<p class="white">The total solution for great Wi-Fi</p>
								</div>
								<div class="body">
									<p class="text-center">Includes:</p>
									<ul class="checklist">
										<li>Wi&#8209;Spy DBx</li>
										<li>Chanalyzer with Report Builder</li>
										<li>Device Finder Antenna</li>
										<li><a href="/products/eye-pa/">Eye P.A. Software</a></li>
										<li>AirPcap Nx</li>
										<li><a href="https://support.metageek.com/hc/en-us/articles/203601674-What-is-MetaCare-" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Software updates and support. Click to learn more">1 year of MetaCare</a> for software</li>
									</ul>
									<p class="sku">SKUs: 2450x3v, SFW-CHAN-R, DEVFINDER-24,<br>SFW-EYEPA-001, AirPcap&nbsp;Nx-001</p>
								</div>
								<div id="editprice" class="text-center">
									<form enctype="multipart/form-data" method="post" action="https://store.metageek.com/add_cart.asp" name="catalog list">

										<!-- MetaGeek Complete -->
										<input name="item_id" value="205" type="hidden" />
										<input name="cb69-205" value="69" type="hidden" />
										<input name="cb70-205" value="70" type="hidden" />
										<input name="cb71-205" value="71" type="hidden" />
										<input name="cb72-205" value="72" type="hidden" />
										<input name="cb73-205" value="73" type="hidden" />
										<input name="qty-0" value="1" type="hidden" />
										<input name="event_value" value="2348" type="hidden" class="gavalue">
										<button type="submit" class="btn btn-major blue" alt="Buy Now">Buy Now</button>
										<br>
										<p class="price-text" itemprop="price">$2,348</p>
										<meta itemprop="priceCurrency" content="USD" />

										<span class="international2">+ <a href="https://support.metageek.com/hc/en-us/articles/217134107-International-Ordering-Information" target="_blank">international taxes & customs</a></span>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
Thumbnail Cards
Visual Spectrum Analysis

Learn how Wi-Spy + Chanalyzer helps you identify interference and configuration issues to improve your Wi-Fi throughput and performance.

Watch Video
Visual Spectrum Analysis

Learn how Wi-Spy + Chanalyzer helps you identify interference and configuration issues to improve your Wi-Fi throughput and performance.

Watch Video
Visual Spectrum Analysis

Learn how Wi-Spy + Chanalyzer helps you identify interference and configuration issues to improve your Wi-Fi throughput and performance.

Watch Video 

			<div class="container">
				<div class="row">

					<div class="col-sm-6 col-md-4">
						<div class="card thumb centered">
							<div class="title" style="background-image: url(...); background-size: 120%;"></div>
							<div class="body">
								<strong>...</strong>
								<p>...</p>
								<a href="#cards" type="button" class="btn btn-major blue" alt="...">...</a>
							</div>
						</div>
					</div>

					<div class="col-sm-6 col-md-4">
						<div class="card thumb centered">
							<div class="title" style="background-image: url(...); background-size: 120%;"></div>
							<div class="body">
								<strong>...</strong>
								<p>...</p>
								<a href="#cards" type="button" class="btn btn-major blue" alt="...">...</a>
							</div>
						</div>
					</div>

					<div class="col-sm-6 col-md-4">
						<div class="card thumb centered">
							<div class="title" style="background-image: url(...); background-size: 120%;"></div>
							<div class="body">
								<strong>...</strong>
								<p>...</p>
								<a href="#cards" type="button" class="btn btn-major blue" alt="...">...</a>
							</div>
						</div>
					</div>

				</div>
			</div>

Modals



			<button class="btn btn-major blue" data-toggle="modal" data-target=".bd-example-modal-lg">...</button>
			<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="embed-responsive embed-responsive-16by9 vidframe">
							<iframe src="..." allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen></iframe>
							<script src="..."></script>
						</div>
					</div>
				</div>
			</div>