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-bs-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
Plan projects, track progress and share updates without another status meeting. 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.
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. 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.
Details
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. Start free, upgrade when you grow and cancel any time with one click.
Real-time dashboards show what is on track and what needs attention. We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month. Every update lands in one place, so nothing gets lost in email threads.
Pricing
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.
Clear reports turn weekly numbers into decisions in minutes, not days. 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. Real-time dashboards show what is on track and what needs attention.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Aeroora</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-bs-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="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. 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>
<p class="small">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. 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-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">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. Start free, upgrade when you grow and cancel any time with one click.</p>
<p class="small">Real-time dashboards show what is on track and what needs attention. We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. 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. Real-time dashboards show what is on track and what needs attention.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. Friendly people answer your questions quickly, by phone, chat or email.
Step two
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. We keep things simple, so you can focus on what matters to you.
Step three
Clear prices, honest advice and no surprises along the way. 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. Start free, upgrade when you grow and cancel any time with one click.
Step four
Clear reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting. Our open API and ready-made integrations fit into the stack you already have. Automations take care of the repetitive steps, so people can focus on real work.
<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="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting. Our open API and ready-made integrations fit into the stack you already have. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Secure file sharing
We listen first, then build a plan around what you actually need. Every update lands in one place, so nothing gets lost in email threads. Onboarding guides and live chat help new colleagues get going on day one. Start in minutes and get help from a real person whenever you need it.
Workflow automation
Friendly people answer your questions quickly, by phone, chat or email. Clear reports turn weekly numbers into decisions in minutes, not days. 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.
Team analytics
Our open API and ready-made integrations fit into the stack you already have. Clear prices, honest advice and no surprises along the way. Start free, upgrade when you grow and cancel any time with one click.
Questions
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. 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.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Secure file sharing</a><a class="nav-link" href="#spy-1132">Workflow automation</a><a class="nav-link" href="#spy-1133">Team analytics</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Secure file sharing</h3>
<p class="small">We listen first, then build a plan around what you actually need. Every update lands in one place, so nothing gets lost in email threads. Onboarding guides and live chat help new colleagues get going on day one. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Workflow automation</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear reports turn weekly numbers into decisions in minutes, not days. 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.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Team analytics</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Clear prices, honest advice and no surprises along the way. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">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. 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.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Start in minutes and get help from a real person whenever you need it. Automations take care of the repetitive steps, so people can focus on real work. We keep things simple, so you can focus on what matters to you. Teams report saving around five hours a week after the first month.
Install
Your data is encrypted, backed up daily and hosted in the region you choose. 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. Plan projects, track progress and share updates without another status meeting.
Configure
Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. Onboarding guides and live chat help new colleagues get going on day one.
Usage
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. Real-time dashboards show what is on track and what needs attention. Our team has done this many times, so you never have to guess.
Examples
Clear prices, honest advice and no surprises along the way. Thousands of customers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Automations take care of the repetitive steps, so people can focus on real work. We keep things simple, so you can focus on what matters to you. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. 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. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</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. Real-time dashboards show what is on track and what needs attention. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Thousands of customers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
We listen first, then build a plan around what you actually need. Start free, upgrade when you grow and cancel any time with one click. 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.
Midday
Start in minutes and get help from a real person whenever you need it. Granular roles keep sensitive work private while everyone else stays informed. Friendly people answer your questions quickly, by phone, chat or email.
Afternoon
Clear reports turn weekly numbers into decisions in minutes, not days. Every detail is handled by people who care about getting it right. Teams report saving around five hours a week after the first month.
Evening
We measure success by how many customers come back and tell their friends. 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.
<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="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">We listen first, then build a plan around what you actually need. Start free, upgrade when you grow and cancel any time with one click. 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.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Granular roles keep sensitive work private while everyone else stays informed. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. 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>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">We measure success by how many customers come back and tell their friends. 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.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Clear prices, honest advice and no surprises along the way. Set up in an afternoon, connect the tools you use and invite your team. Start free, upgrade when you grow and cancel any time with one click. Real-time dashboards show what is on track and what needs attention.
Beta
We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed. 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.
Gamma
Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting. Start in minutes and get help from a real person whenever you need it. Thousands of customers already trust us, and we work hard to keep it that way.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Set up in an afternoon, connect the tools you use and invite your team. Start free, upgrade when you grow and cancel any time with one click. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</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. 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-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting. Start in minutes and get help from a real person whenever you need it. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Every update lands in one place, so nothing gets lost in email threads. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Our open API and ready-made integrations fit into the stack you already have.
Features
We keep things simple, so you can focus on what matters to you. Your data is encrypted, backed up daily and hosted in the region you choose. Automations take care of the repetitive steps, so people can focus on real work.
Reviews
Clear reports turn weekly numbers into decisions in minutes, not days. Onboarding guides and live chat help new colleagues get going on day one. Our open API and ready-made integrations fit into the stack you already have.
FAQ
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. Onboarding guides and live chat help new colleagues get going on day one. Friendly people answer your questions quickly, by phone, chat or email.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<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="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">Every update lands in one place, so nothing gets lost in email threads. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Your data is encrypted, backed up daily and hosted in the region you choose. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Onboarding guides and live chat help new colleagues get going on day one. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">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. Onboarding guides and live chat help new colleagues get going on day one. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Thousands of customers already trust us, and we work hard to keep it that way. Set up in an afternoon, connect the tools you use and invite your team. 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.
Background
Plan projects, track progress and share updates without another status meeting. 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.
Method
Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.
Results
Every detail is handled by people who care about getting it right. Teams report saving around five hours a week after the first month. Start free, upgrade when you grow and cancel any time with one click. Clear reports turn weekly numbers into decisions in minutes, not days.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. Set up in an afternoon, connect the tools you use and invite your team. 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.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. 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-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Every detail is handled by people who care about getting it right. Teams report saving around five hours a week after the first month. Start free, upgrade when you grow and cancel any time with one click. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column 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
Our team has done this many times, so you never have to guess. 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.
Set up your profile
We keep things simple, so you can focus on what matters to you. Your data is encrypted, backed up daily and hosted in the region you choose. Real-time dashboards show what is on track and what needs attention.
Invite the team
Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Granular roles keep sensitive work private while everyone else stays informed.
Go live
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. Our open API and ready-made integrations fit into the stack you already have.
<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="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Our team has done this many times, so you never have to guess. 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>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Your data is encrypted, backed up daily and hosted in the region you choose. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">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. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Planning a product launch in six weeks
Plan projects, track progress and share updates without another status meeting. Clear reports turn weekly numbers into decisions in minutes, not days. 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.
The small habits that make a big difference
We measure success by how many customers come back and tell their friends. Every update lands in one place, so nothing gets lost in email threads. Start free, upgrade when you grow and cancel any time with one click. Automations take care of the repetitive steps, so people can focus on real work.
Seven automations every team should set up
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. Our open API and ready-made integrations fit into the stack you already have.
Looking back at a busy season
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. Automations take care of the repetitive steps, so people can focus on real work.
<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="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">Planning a product launch in six weeks</h3>
<p class="small mb-0">Plan projects, track progress and share updates without another status meeting. Clear reports turn weekly numbers into decisions in minutes, not days. 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.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">The small habits that make a big difference</h3>
<p class="small mb-0">We measure success by how many customers come back and tell their friends. Every update lands in one place, so nothing gets lost in email threads. Start free, upgrade when you grow and cancel any time with one click. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Seven automations every team should set up</h3>
<p class="small mb-0">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. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">Looking back at a busy season</h3>
<p class="small mb-0">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. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How remote teams keep projects on track?
- Thousands of customers already trust us, and we work hard to keep it that way.
- Our favourite tips for busy weeks?
- Granular roles keep sensitive work private while everyone else stays informed.
- The real cost of switching between tools?
- Clear reports turn weekly numbers into decisions in minutes, not days.
Shipping
- Five things we learned this year?
- Set up in an afternoon, connect the tools you use and invite your team.
- Inside our product roadmap for next year?
- Every detail is handled by people who care about getting it right.
- A beginner's guide to getting started?
- Teams report saving around five hours a week after the first month.
Returns
- Writing status updates people actually read?
- Start in minutes and get help from a real person whenever you need it.
- How we cut our release cycle in half?
- We listen first, then build a plan around what you actually need.
- How to choose the right plan?
- Onboarding guides and live chat help new colleagues get going on day one.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<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="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">How remote teams keep projects on track?</dt>
<dd class="small text-body-secondary">Thousands of customers already trust us, and we work hard to keep it that way.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Granular roles keep sensitive work private while everyone else stays informed.</dd>
<dt class="small">The real cost of switching between tools?</dt>
<dd class="small text-body-secondary">Clear reports turn weekly numbers into decisions in minutes, not days.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Set up in an afternoon, connect the tools you use and invite your team.</dd>
<dt class="small">Inside our product roadmap for next year?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Teams report saving around five hours a week after the first month.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Writing status updates people actually read?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
<dt class="small">How we cut our release cycle in half?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">How to choose the right plan?</dt>
<dd class="small text-body-secondary">Onboarding guides and live chat help new colleagues get going on day one.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. We measure success by how many customers come back and tell their friends.
Battery
Clear prices, honest advice and no surprises along the way. Every update lands in one place, so nothing gets lost in email threads. Plan projects, track progress and share updates without another status meeting. Start free, upgrade when you grow and cancel any time with one click.
Connectivity
Your data is encrypted, backed up daily and hosted in the region you choose. Automations take care of the repetitive steps, so people can focus on real work. Granular roles keep sensitive work private while everyone else stays informed.
Security
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. Your data is encrypted, backed up daily and hosted in the region you choose.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-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="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Every update lands in one place, so nothing gets lost in email threads. Plan projects, track progress and share updates without another status meeting. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Automations take care of the repetitive steps, so people can focus on real work. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</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. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$15.91 / mo
- Dark mode
- Audit trail
- Role-based access
Team
$43.70 / mo
- Role-based access
- 99.99% uptime
- Real-time collaboration
Business
$62.62 / mo
- 99.99% uptime
- Open API
- 99.99% uptime
<nav id="spy-nav-1179" class="nav nav-pills justify-content-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="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$15.91<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Dark mode</li>
<li>Audit trail</li>
<li>Role-based access</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$43.70<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Role-based access</li>
<li>99.99% uptime</li>
<li>Real-time collaboration</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$62.62<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>99.99% uptime</li>
<li>Open API</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: A practical guide to async work
Onboarding guides and live chat help new colleagues get going on day one. 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. Teams report saving around five hours a week after the first month.
Our open API and ready-made integrations fit into the stack you already have. Clear prices, honest advice and no surprises along the way. Clear reports turn weekly numbers into decisions in minutes, not days.
Chapter 2: What we learned shipping 200 releases
Real-time dashboards show what is on track and what needs attention. 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. We keep things simple, so you can focus on what matters to you.
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. Every update lands in one place, so nothing gets lost in email threads. Friendly people answer your questions quickly, by phone, chat or email.
Chapter 3: What our customers asked us most
Start free, upgrade when you grow and cancel any time with one click. Plan projects, track progress and share updates without another status meeting. We measure success by how many customers come back and tell their friends.
Teams report saving around five hours a week after the first month. Start free, upgrade when you grow and cancel any time with one click. Clear prices, honest advice and no surprises along the way.
Chapter 4: How one support team cut first replies to 20 minutes
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. Start in minutes and get help from a real person whenever you need it.
Clear reports turn weekly numbers into decisions in minutes, not days. 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. Onboarding guides and live chat help new colleagues get going on day one.
<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="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: A practical guide to async work</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. 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. Teams report saving around five hours a week after the first month.</p>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Clear prices, honest advice and no surprises along the way. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: What we learned shipping 200 releases</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. 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. We keep things simple, so you can focus on what matters to you.</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. Every update lands in one place, so nothing gets lost in email threads. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: What our customers asked us most</h3>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Plan projects, track progress and share updates without another status meeting. We measure success by how many customers come back and tell their friends.</p>
<p class="small">Teams report saving around five hours a week after the first month. Start free, upgrade when you grow and cancel any time with one click. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: How one support team cut first replies to 20 minutes</h3>
<p class="small">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. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. 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. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Granular roles keep sensitive work private while everyone else stays informed. Every detail is handled by people who care about getting it right. 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.
Notifications
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. Every update lands in one place, so nothing gets lost in email threads. Our open API and ready-made integrations fit into the stack you already have.
Privacy
Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Your data is encrypted, backed up daily and hosted in the region you choose.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<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="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-3">
<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 Morgan">
</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="Montreal">
</div>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. Every detail is handled by people who care about getting it right. 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 id="spy-1190" class="pb-3">
<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">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. Every update lands in one place, so nothing gets lost in email threads. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1191" class="pb-3">
<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">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Engineering
- Owen SatoHR Partner
- Jonah QuinnProduct Designer
- Chloe CarterContent Writer
Sales
- Felix SatoHR Partner
- Theo OrtegaQA Engineer
- Nadia IbrahimHR Partner
Legal
- Freya AshfordProject Manager
- Lea BrennanData Analyst
- Amara OkaforData Analyst
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Engineering</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Owen Sato"><div><div class="small fw-semibold">Owen Sato</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Jonah Quinn"><div><div class="small fw-semibold">Jonah Quinn</div><div class="small text-body-secondary">Product Designer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Chloe Carter"><div><div class="small fw-semibold">Chloe Carter</div><div class="small text-body-secondary">Content Writer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Felix Sato"><div><div class="small fw-semibold">Felix Sato</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Theo Ortega"><div><div class="small fw-semibold">Theo Ortega</div><div class="small text-body-secondary">QA Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Nadia Ibrahim"><div><div class="small fw-semibold">Nadia Ibrahim</div><div class="small text-body-secondary">HR Partner</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Freya Ashford"><div><div class="small fw-semibold">Freya Ashford</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Lea Brennan"><div><div class="small fw-semibold">Lea Brennan</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Amara Okafor"><div><div class="small fw-semibold">Amara Okafor</div><div class="small text-body-secondary">Data Analyst</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Support
- Enterprise suite$213.00
- Team plan$18.00
- Business plan$45.00
Marketing
- Starter planFree
- API boost$39.99
- Enterprise suite$195.00
Sales
- Priority support$30.00
- Starter planFree
- Sales pipeline add-on$19.00
<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">Marketing</a><a class="nav-link" href="#spy-1204">Sales</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Support</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Enterprise suite</span><span class="fw-semibold">$213.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Team plan</span><span class="fw-semibold">$18.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Business plan</span><span class="fw-semibold">$45.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Starter plan</span><span class="fw-semibold">Free</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>API boost</span><span class="fw-semibold">$39.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Enterprise suite</span><span class="fw-semibold">$195.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Priority support</span><span class="fw-semibold">$30.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Starter plan</span><span class="fw-semibold">Free</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Sales pipeline add-on</span><span class="fw-semibold">$19.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
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. We measure success by how many customers come back and tell their friends.
This week
Start in minutes and get help from a real person whenever you need it. Start free, upgrade when you grow and cancel any time with one click. Plan projects, track progress and share updates without another status meeting.
Later
Set up in an afternoon, connect the tools you use and invite your team. Clear reports turn weekly numbers into decisions in minutes, not days. Real-time dashboards show what is on track and what needs attention. Granular roles keep sensitive work private while everyone else stays informed.
<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="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">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. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Start free, upgrade when you grow and cancel any time with one click. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Clear reports turn weekly numbers into decisions in minutes, not days. Real-time dashboards show what is on track and what needs attention. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Every update lands in one place, so nothing gets lost in email threads. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
Orbit
We listen first, then build a plan around what you actually need. Our open API and ready-made integrations fit into the stack you already have. Friendly people answer your questions quickly, by phone, chat or email. Thousands of customers already trust us, and we work hard to keep it that way.
Landing
Teams report saving around five hours a week after the first month. Every detail is handled by people who care about getting it right. Our open API and ready-made integrations fit into the stack you already have. Plan projects, track progress and share updates without another status meeting.
<div data-bs-theme="dark" class="bg-dark text-body rounded p-3">
<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="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Every update lands in one place, so nothing gets lost in email threads. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">We listen first, then build a plan around what you actually need. Our open API and ready-made integrations fit into the stack you already have. Friendly people answer your questions quickly, by phone, chat or email. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Teams report saving around five hours a week after the first month. Every detail is handled by people who care about getting it right. Our open API and ready-made integrations fit into the stack you already have. Plan projects, track progress and share updates without another status meeting.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Dec 6, 2025
- NewOur team has done this many times, so you never have to guess.
- ImprovedClear reports turn weekly numbers into decisions in minutes, not days.
- FixedEvery update lands in one place, so nothing gets lost in email threads.
v3.1 Dec 20, 2025
- NewClear prices, honest advice and no surprises along the way.
- ImprovedAutomations take care of the repetitive steps, so people can focus on real work.
- FixedWe measure success by how many customers come back and tell their friends.
v3.0 Mar 2, 2026
- NewTeams report saving around five hours a week after the first month.
- ImprovedReal-time dashboards show what is on track and what needs attention.
- FixedOnboarding guides and live chat help new colleagues get going on day one.
v2.9 Apr 24, 2026
- NewWe keep things simple, so you can focus on what matters to you.
- ImprovedWe listen first, then build a plan around what you actually need.
- FixedEvery detail is handled by people who care about getting it right.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column 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="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Dec 6, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear reports turn weekly numbers into decisions in minutes, not days.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every update lands in one place, so nothing gets lost in email threads.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Dec 20, 2025</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>Automations take care of the repetitive steps, so people can focus on real work.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many customers come back and tell their friends.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 2, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Teams report saving around five hours a week after the first month.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Real-time dashboards show what is on track and what needs attention.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Onboarding guides and live chat help new colleagues get going on day one.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Apr 24, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We listen first, then build a plan around what you actually need.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every detail is handled by people who care about getting it right.</li>
</ul>
</div>
</div>
</div>
</div>