Scrollspy
Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
Your data is encrypted, backed up daily and hosted in the region you choose. Our team has done this many times, so you never have to guess. Every update lands in one place, so nothing gets lost in email threads.
Real-time dashboards show what is on track and what needs attention. Start free, upgrade when you grow and cancel any time with one click. Teams report saving around five hours a week after the first month.
Details
Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed. We keep things simple, so you can focus on what matters to you.
Thousands of customers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.
Pricing
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends.
Set up in an afternoon, connect the tools you use and invite your team. Plan projects, track progress and share updates without another status meeting. Onboarding guides and live chat help new colleagues get going on day one. Automations take care of the repetitive steps, so people can focus on real work.
<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
<a class="navbar-brand" href="#">Halo Works</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-4">
<h3 class="h6">Intro</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Our team has done this many times, so you never have to guess. Every update lands in one place, so nothing gets lost in email threads.</p>
<p class="small">Real-time dashboards show what is on track and what needs attention. Start free, upgrade when you grow and cancel any time with one click. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1123" class="pb-4">
<h3 class="h6">Details</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed. We keep things simple, so you can focus on what matters to you.</p>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1124" class="pb-4">
<h3 class="h6">Pricing</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends.</p>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Plan projects, track progress and share updates without another status meeting. Onboarding guides and live chat help new colleagues get going on day one. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Our open API and ready-made integrations fit into the stack you already have. Every detail is handled by people who care about getting it right. Your data is encrypted, backed up daily and hosted in the region you choose.
Step two
We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed. We keep things simple, so you can focus on what matters to you.
Step three
Our open API and ready-made integrations fit into the stack you already have. Every update lands in one place, so nothing gets lost in email threads. Thousands of customers already trust us, and we work hard to keep it that way. Automations take care of the repetitive steps, so people can focus on real work.
Step four
Set up in an afternoon, connect the tools you use and invite your team. Real-time dashboards show what is on track and what needs attention. Clear prices, honest advice and no surprises along the way.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-4">
<h3 class="h6">Step one</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Every detail is handled by people who care about getting it right. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
<div id="spy-1127" class="pb-4">
<h3 class="h6">Step two</h3>
<p class="small">We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1128" class="pb-4">
<h3 class="h6">Step three</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Every update lands in one place, so nothing gets lost in email threads. Thousands of customers already trust us, and we work hard to keep it that way. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div id="spy-1129" class="pb-4">
<h3 class="h6">Step four</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Real-time dashboards show what is on track and what needs attention. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Single sign-on
Onboarding guides and live chat help new colleagues get going on day one. Plan projects, track progress and share updates without another status meeting. Teams report saving around five hours a week after the first month.
Secure file sharing
Clear reports turn weekly numbers into decisions in minutes, not days. Friendly people answer your questions quickly, by phone, chat or email. Your data is encrypted, backed up daily and hosted in the region you choose.
Workflow automation
We measure success by how many customers come back and tell their friends. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.
Questions
Start free, upgrade when you grow and cancel any time with one click. We keep things simple, so you can focus on what matters to you. Start free, upgrade when you grow and cancel any time with one click.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1131">Single sign-on</a><a class="nav-link" href="#spy-1132">Secure file sharing</a><a class="nav-link" href="#spy-1133">Workflow automation</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-4">
<h3 class="h6">Single sign-on</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. Plan projects, track progress and share updates without another status meeting. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1132" class="pb-4">
<h3 class="h6">Secure file sharing</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Friendly people answer your questions quickly, by phone, chat or email. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
<div id="spy-1133" class="pb-4">
<h3 class="h6">Workflow automation</h3>
<p class="small">We measure success by how many customers come back and tell their friends. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1134" class="pb-4">
<h3 class="h6">Questions</h3>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. We keep things simple, so you can focus on what matters to you. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Thousands of customers already trust us, and we work hard to keep it that way. Your data is encrypted, backed up daily and hosted in the region you choose. Every update lands in one place, so nothing gets lost in email threads.
Install
Our open API and ready-made integrations fit into the stack you already have. We measure success by how many customers come back and tell their friends. Real-time dashboards show what is on track and what needs attention. Automations take care of the repetitive steps, so people can focus on real work.
Configure
Set up in an afternoon, connect the tools you use and invite your team. Every detail is handled by people who care about getting it right. Onboarding guides and live chat help new colleagues get going on day one. Plan projects, track progress and share updates without another status meeting.
Usage
Teams report saving around five hours a week after the first month. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Granular roles keep sensitive work private while everyone else stays informed.
Examples
We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-full flex-col items-stretch">
<nav class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-4">
<h3 class="h6">Getting started</h3>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. Your data is encrypted, backed up daily and hosted in the region you choose. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1137" class="pb-4">
<h3 class="h6">Install</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. We measure success by how many customers come back and tell their friends. Real-time dashboards show what is on track and what needs attention. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div id="spy-1138" class="pb-4">
<h3 class="h6">Configure</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Every detail is handled by people who care about getting it right. Onboarding guides and live chat help new colleagues get going on day one. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1139" class="pb-4">
<h3 class="h6">Usage</h3>
<p class="small">Teams report saving around five hours a week after the first month. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1140" class="pb-4">
<h3 class="h6">Examples</h3>
<p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Clear reports turn weekly numbers into decisions in minutes, not days. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.
Midday
Real-time dashboards show what is on track and what needs attention. We measure success by how many customers come back and tell their friends. We keep things simple, so you can focus on what matters to you.
Afternoon
Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads. Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have.
Evening
Start free, upgrade when you grow and cancel any time with one click. Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-4">
<h3 class="h6">Morning</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1143" class="pb-4">
<h3 class="h6">Midday</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. We measure success by how many customers come back and tell their friends. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1144" class="pb-4">
<h3 class="h6">Afternoon</h3>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads. Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1145" class="pb-4">
<h3 class="h6">Evening</h3>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Onboarding guides and live chat help new colleagues get going on day one. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.
Beta
Set up in an afternoon, connect the tools you use and invite your team. Automations take care of the repetitive steps, so people can focus on real work. Plan projects, track progress and share updates without another status meeting.
Gamma
Granular roles keep sensitive work private while everyone else stays informed. Your data is encrypted, backed up daily and hosted in the region you choose. Friendly people answer your questions quickly, by phone, chat or email.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="flex flex-col gap-2 small">
<a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="relative border rounded-md p-4" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-4">
<h3 class="h6">Alpha</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1148" class="pb-4">
<h3 class="h6">Beta</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Automations take care of the repetitive steps, so people can focus on real work. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1149" class="pb-4">
<h3 class="h6">Gamma</h3>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. Your data is encrypted, backed up daily and hosted in the region you choose. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Automations take care of the repetitive steps, so people can focus on real work. Real-time dashboards show what is on track and what needs attention. Thousands of customers already trust us, and we work hard to keep it that way.
Features
Plan projects, track progress and share updates without another status meeting. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days.
Reviews
Our open API and ready-made integrations fit into the stack you already have. Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. We measure success by how many customers come back and tell their friends.
FAQ
Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Start free, upgrade when you grow and cancel any time with one click. Every update lands in one place, so nothing gets lost in email threads.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="relative border rounded-md p-4 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-4">
<h3 class="h6">Overview</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Real-time dashboards show what is on track and what needs attention. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1152" class="pb-4">
<h3 class="h6">Features</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1153" class="pb-4">
<h3 class="h6">Reviews</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1154" class="pb-4">
<h3 class="h6">FAQ</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Start free, upgrade when you grow and cancel any time with one click. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Onboarding guides and live chat help new colleagues get going on day one. Set up in an afternoon, connect the tools you use and invite your team. Your data is encrypted, backed up daily and hosted in the region you choose. Our team has done this many times, so you never have to guess.
Background
Teams report saving around five hours a week after the first month. We keep things simple, so you can focus on what matters to you. Thousands of customers already trust us, and we work hard to keep it that way.
Method
We keep things simple, so you can focus on what matters to you. Onboarding guides and live chat help new colleagues get going on day one. Teams report saving around five hours a week after the first month. Clear reports turn weekly numbers into decisions in minutes, not days.
Results
Plan projects, track progress and share updates without another status meeting. Your data is encrypted, backed up daily and hosted in the region you choose. Clear prices, honest advice and no surprises along the way. Real-time dashboards show what is on track and what needs attention.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-4">
<h3 class="h6">Summary</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. Set up in an afternoon, connect the tools you use and invite your team. Your data is encrypted, backed up daily and hosted in the region you choose. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1157" class="pb-4">
<h3 class="h6">Background</h3>
<p class="small">Teams report saving around five hours a week after the first month. We keep things simple, so you can focus on what matters to you. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1158" class="pb-4">
<h3 class="h6">Method</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Onboarding guides and live chat help new colleagues get going on day one. Teams report saving around five hours a week after the first month. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1159" class="pb-4">
<h3 class="h6">Results</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. Your data is encrypted, backed up daily and hosted in the region you choose. Clear prices, honest advice and no surprises along the way. Real-time dashboards show what is on track and what needs attention.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first md:order-last">
<p class="small font-semibold uppercase text-muted mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-col small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Automations take care of the repetitive steps, so people can focus on real work. Our open API and ready-made integrations fit into the stack you already have. We listen first, then build a plan around what you actually need.
Set up your profile
Start in minutes and get help from a real person whenever you need it. Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email.
Invite the team
Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. We measure success by how many customers come back and tell their friends.
Go live
Start free, upgrade when you grow and cancel any time with one click. Granular roles keep sensitive work private while everyone else stays informed. Every update lands in one place, so nothing gets lost in email threads. We keep things simple, so you can focus on what matters to you.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-4">
<h3 class="h6">Create an account</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Our open API and ready-made integrations fit into the stack you already have. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1162" class="pb-4">
<h3 class="h6">Set up your profile</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1163" class="pb-4">
<h3 class="h6">Invite the team</h3>
<p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1164" class="pb-4">
<h3 class="h6">Go live</h3>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Granular roles keep sensitive work private while everyone else stays informed. Every update lands in one place, so nothing gets lost in email threads. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
The small habits that make a big difference
Plan projects, track progress and share updates without another status meeting. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed.
Looking back at a busy season
Friendly people answer your questions quickly, by phone, chat or email. Teams report saving around five hours a week after the first month. Thousands of customers already trust us, and we work hard to keep it that way.
Inside our product roadmap for next year
Our open API and ready-made integrations fit into the stack you already have. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. We measure success by how many customers come back and tell their friends.
The real cost of switching between tools
Real-time dashboards show what is on track and what needs attention. Clear reports turn weekly numbers into decisions in minutes, not days. Automations take care of the repetitive steps, so people can focus on real work. Your data is encrypted, backed up daily and hosted in the region you choose.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">The small habits that make a big difference</h3>
<p class="small mb-0">Plan projects, track progress and share updates without another status meeting. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">Looking back at a busy season</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Teams report saving around five hours a week after the first month. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Inside our product roadmap for next year</h3>
<p class="small mb-0">Our open API and ready-made integrations fit into the stack you already have. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">The real cost of switching between tools</h3>
<p class="small mb-0">Real-time dashboards show what is on track and what needs attention. Clear reports turn weekly numbers into decisions in minutes, not days. Automations take care of the repetitive steps, so people can focus on real work. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Seven automations every team should set up?
- Clear prices, honest advice and no surprises along the way.
- Planning a product launch in six weeks?
- Start free, upgrade when you grow and cancel any time with one click.
- Our favourite tips for busy weeks?
- Set up in an afternoon, connect the tools you use and invite your team.
Shipping
- How to choose the right plan?
- Onboarding guides and live chat help new colleagues get going on day one.
- How we cut our release cycle in half?
- Every update lands in one place, so nothing gets lost in email threads.
- Five things we learned this year?
- Plan projects, track progress and share updates without another status meeting.
Returns
- How one support team cut first replies to 20 minutes?
- We measure success by how many customers come back and tell their friends.
- A beginner's guide to getting started?
- Automations take care of the repetitive steps, so people can focus on real work.
- Writing status updates people actually read?
- Real-time dashboards show what is on track and what needs attention.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Seven automations every team should set up?</dt>
<dd class="small text-muted">Clear prices, honest advice and no surprises along the way.</dd>
<dt class="small">Planning a product launch in six weeks?</dt>
<dd class="small text-muted">Start free, upgrade when you grow and cancel any time with one click.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-muted">Set up in an afternoon, connect the tools you use and invite your team.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">How to choose the right plan?</dt>
<dd class="small text-muted">Onboarding guides and live chat help new colleagues get going on day one.</dd>
<dt class="small">How we cut our release cycle in half?</dt>
<dd class="small text-muted">Every update lands in one place, so nothing gets lost in email threads.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-muted">Plan projects, track progress and share updates without another status meeting.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">How one support team cut first replies to 20 minutes?</dt>
<dd class="small text-muted">We measure success by how many customers come back and tell their friends.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-muted">Automations take care of the repetitive steps, so people can focus on real work.</dd>
<dt class="small">Writing status updates people actually read?</dt>
<dd class="small text-muted">Real-time dashboards show what is on track and what needs attention.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Start free, upgrade when you grow and cancel any time with one click. Our team has done this many times, so you never have to guess. Thousands of customers already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.
Battery
Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads.
Connectivity
We keep things simple, so you can focus on what matters to you. Our open API and ready-made integrations fit into the stack you already have. Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email.
Security
We listen first, then build a plan around what you actually need. Your data is encrypted, backed up daily and hosted in the region you choose. Granular roles keep sensitive work private while everyone else stays informed.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-col">
<a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-4">
<h3 class="h6">Performance</h3>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Our team has done this many times, so you never have to guess. Thousands of customers already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1176" class="pb-4">
<h3 class="h6">Battery</h3>
<p class="small">Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1177" class="pb-4">
<h3 class="h6">Connectivity</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Our open API and ready-made integrations fit into the stack you already have. Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1178" class="pb-4">
<h3 class="h6">Security</h3>
<p class="small">We listen first, then build a plan around what you actually need. Your data is encrypted, backed up daily and hosted in the region you choose. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$10.77 / mo
- Real-time collaboration
- Dark mode
- Role-based access
Team
$36.09 / mo
- 99.99% uptime
- Dark mode
- Dark mode
Business
$68.60 / mo
- Audit trail
- Dark mode
- 99.99% uptime
<nav id="spy-nav-1179" class="nav nav-pills justify-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="relative border rounded-md p-4 bg-surface-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="text-xl font-bold mb-1">$10.77<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Real-time collaboration</li>
<li>Dark mode</li>
<li>Role-based access</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="text-xl font-bold mb-1">$36.09<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>99.99% uptime</li>
<li>Dark mode</li>
<li>Dark mode</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="text-xl font-bold mb-1">$68.60<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Audit trail</li>
<li>Dark mode</li>
<li>99.99% uptime</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: What our customers asked us most
Start in minutes and get help from a real person whenever you need it. Onboarding guides and live chat help new colleagues get going on day one. Teams report saving around five hours a week after the first month. Set up in an afternoon, connect the tools you use and invite your team.
Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.
Chapter 2: How remote teams keep projects on track
Our open API and ready-made integrations fit into the stack you already have. Start free, upgrade when you grow and cancel any time with one click. Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting.
We measure success by how many customers come back and tell their friends. Clear reports turn weekly numbers into decisions in minutes, not days. Real-time dashboards show what is on track and what needs attention. Clear prices, honest advice and no surprises along the way.
Chapter 3: What we learned shipping 200 releases
We keep things simple, so you can focus on what matters to you. Automations take care of the repetitive steps, so people can focus on real work. Every update lands in one place, so nothing gets lost in email threads. Thousands of customers already trust us, and we work hard to keep it that way.
Onboarding guides and live chat help new colleagues get going on day one. We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed.
Chapter 4: A practical guide to async work
Your data is encrypted, backed up daily and hosted in the region you choose. Our open API and ready-made integrations fit into the stack you already have. Every detail is handled by people who care about getting it right. Teams report saving around five hours a week after the first month.
Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads. Plan projects, track progress and share updates without another status meeting.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-4">
<h3 class="h6">Chapter 1: What our customers asked us most</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Onboarding guides and live chat help new colleagues get going on day one. Teams report saving around five hours a week after the first month. Set up in an afternoon, connect the tools you use and invite your team.</p>
<p class="small">Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1185" class="pb-4">
<h3 class="h6">Chapter 2: How remote teams keep projects on track</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Start free, upgrade when you grow and cancel any time with one click. Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting.</p>
<p class="small">We measure success by how many customers come back and tell their friends. Clear reports turn weekly numbers into decisions in minutes, not days. Real-time dashboards show what is on track and what needs attention. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1186" class="pb-4">
<h3 class="h6">Chapter 3: What we learned shipping 200 releases</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Automations take care of the repetitive steps, so people can focus on real work. Every update lands in one place, so nothing gets lost in email threads. Thousands of customers already trust us, and we work hard to keep it that way.</p>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1187" class="pb-4">
<h3 class="h6">Chapter 4: A practical guide to async work</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Our open API and ready-made integrations fit into the stack you already have. Every detail is handled by people who care about getting it right. Teams report saving around five hours a week after the first month.</p>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads. Plan projects, track progress and share updates without another status meeting.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Thousands of customers already trust us, and we work hard to keep it that way.
Notifications
Automations take care of the repetitive steps, so people can focus on real work. Real-time dashboards show what is on track and what needs attention. We keep things simple, so you can focus on what matters to you.
Privacy
Your data is encrypted, backed up daily and hosted in the region you choose. Set up in an afternoon, connect the tools you use and invite your team. Clear prices, honest advice and no surprises along the way.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-4">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Ivy Ibrahim">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Denver">
</div>
<p class="small">Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1190" class="pb-4">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Real-time dashboards show what is on track and what needs attention. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1191" class="pb-4">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Set up in an afternoon, connect the tools you use and invite your team. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Marketing
- Maya KimBackend Engineer
- Hana KowalskiCustomer Success
- Kai BrennanQA Engineer
Finance
- Lea CarterProduct Designer
- Nora SatoArt Director
- Ivy NguyenBackend Engineer
Legal
- Felix HughesContent Writer
- Nadia NovakQA Engineer
- Omar IbrahimProject Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Marketing</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="relative border rounded-md p-4" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-4">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Maya Kim"><div><div class="small font-semibold">Maya Kim</div><div class="small text-muted">Backend Engineer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-full" width="36" height="36" alt="Hana Kowalski"><div><div class="small font-semibold">Hana Kowalski</div><div class="small text-muted">Customer Success</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-full" width="36" height="36" alt="Kai Brennan"><div><div class="small font-semibold">Kai Brennan</div><div class="small text-muted">QA Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-4">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-full" width="36" height="36" alt="Lea Carter"><div><div class="small font-semibold">Lea Carter</div><div class="small text-muted">Product Designer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Nora Sato"><div><div class="small font-semibold">Nora Sato</div><div class="small text-muted">Art Director</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Ivy Nguyen"><div><div class="small font-semibold">Ivy Nguyen</div><div class="small text-muted">Backend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-4">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="36" height="36" alt="Felix Hughes"><div><div class="small font-semibold">Felix Hughes</div><div class="small text-muted">Content Writer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-full" width="36" height="36" alt="Nadia Novak"><div><div class="small font-semibold">Nadia Novak</div><div class="small text-muted">QA Engineer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Omar Ibrahim"><div><div class="small font-semibold">Omar Ibrahim</div><div class="small text-muted">Project Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Support
- API boost$43.00
- Automation pack$16.00
- Analytics add-on$12.00
Engineering
- Marketing toolkit$21.99
- Team plan$19.00
- Storage pack$10.00
Sales
- Storage pack$8.00
- Onboarding workshop$409.99
- Marketing toolkit$21.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Support</a><a class="nav-link" href="#spy-1203">Engineering</a><a class="nav-link" href="#spy-1204">Sales</a>
</nav>
<div class="relative border rounded-md p-4" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-4">
<h3 class="h6">Support</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>API boost</span><span class="font-semibold">$43.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Automation pack</span><span class="font-semibold">$16.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Analytics add-on</span><span class="font-semibold">$12.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-4">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Marketing toolkit</span><span class="font-semibold">$21.99</span></li>
<li class="flex justify-between border-b py-2 small"><span>Team plan</span><span class="font-semibold">$19.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Storage pack</span><span class="font-semibold">$10.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-4">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Storage pack</span><span class="font-semibold">$8.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Onboarding workshop</span><span class="font-semibold">$409.99</span></li>
<li class="flex justify-between border-b py-2 small"><span>Marketing toolkit</span><span class="font-semibold">$21.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
We measure success by how many customers come back and tell their friends. Start free, upgrade when you grow and cancel any time with one click. Granular roles keep sensitive work private while everyone else stays informed.
This week
Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Onboarding guides and live chat help new colleagues get going on day one.
Later
Automations take care of the repetitive steps, so people can focus on real work. Your data is encrypted, backed up daily and hosted in the region you choose. Friendly people answer your questions quickly, by phone, chat or email. Our open API and ready-made integrations fit into the stack you already have.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="relative border rounded-md p-4 border-0 rounded-none" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-4">
<h3 class="h6">Today</h3>
<p class="small">We measure success by how many customers come back and tell their friends. Start free, upgrade when you grow and cancel any time with one click. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1207" class="pb-4">
<h3 class="h6">This week</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1208" class="pb-4">
<h3 class="h6">Later</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Your data is encrypted, backed up daily and hosted in the region you choose. Friendly people answer your questions quickly, by phone, chat or email. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Real-time dashboards show what is on track and what needs attention. We keep things simple, so you can focus on what matters to you. Start free, upgrade when you grow and cancel any time with one click.
Orbit
Set up in an afternoon, connect the tools you use and invite your team. Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed.
Landing
Onboarding guides and live chat help new colleagues get going on day one. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.
<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="relative border rounded-md p-4 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-4">
<h3 class="h6">Launch</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. We keep things simple, so you can focus on what matters to you. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1211" class="pb-4">
<h3 class="h6">Orbit</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1212" class="pb-4">
<h3 class="h6">Landing</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Aug 11, 2026
- NewClear prices, honest advice and no surprises along the way.
- ImprovedStart in minutes and get help from a real person whenever you need it.
- FixedTeams report saving around five hours a week after the first month.
v3.1 Dec 18, 2025
- NewWe measure success by how many customers come back and tell their friends.
- ImprovedEvery update lands in one place, so nothing gets lost in email threads.
- FixedPlan projects, track progress and share updates without another status meeting.
v3.0 Nov 15, 2025
- NewThousands of customers already trust us, and we work hard to keep it that way.
- ImprovedPlan projects, track progress and share updates without another status meeting.
- FixedOur team has done this many times, so you never have to guess.
v2.9 Jul 15, 2026
- NewEvery update lands in one place, so nothing gets lost in email threads.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedYour data is encrypted, backed up daily and hosted in the region you choose.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-col small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="relative border rounded-md p-4" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-4">
<h3 class="h6">v3.2 <small class="text-muted font-normal">Aug 11, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Teams report saving around five hours a week after the first month.</li>
</ul>
</div>
<div id="spy-1215" class="pb-4">
<h3 class="h6">v3.1 <small class="text-muted font-normal">Dec 18, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many customers come back and tell their friends.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every update lands in one place, so nothing gets lost in email threads.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Plan projects, track progress and share updates without another status meeting.</li>
</ul>
</div>
<div id="spy-1216" class="pb-4">
<h3 class="h6">v3.0 <small class="text-muted font-normal">Nov 15, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of customers already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Plan projects, track progress and share updates without another status meeting.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
</ul>
</div>
<div id="spy-1217" class="pb-4">
<h3 class="h6">v2.9 <small class="text-muted font-normal">Jul 15, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every update lands in one place, so nothing gets lost in email threads.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Your data is encrypted, backed up daily and hosted in the region you choose.</li>
</ul>
</div>
</div>
</div>
</div>