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-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
Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Every update lands in one place, so nothing gets lost in email threads.
Clear prices, honest advice and no surprises along the way. Teams report saving around five hours a week after the first month. Onboarding guides and live chat help new colleagues get going on day one.
Details
Every detail is handled by people who care about getting it right. 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. Plan projects, track progress and share updates without another status meeting.
Thousands of customers already trust us, and we work hard to keep it that way. 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. Our team has done this many times, so you never have to guess.
Pricing
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. Real-time dashboards show what is on track and what needs attention. Our open API and ready-made integrations fit into the stack you already have.
Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed. Automations take care of the repetitive steps, so people can focus on real work. Set up in an afternoon, connect the tools you use and invite your team.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Vela</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">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Every update lands in one place, so nothing gets lost in email threads.</p>
<p class="small">Clear prices, honest advice and no surprises along the way. Teams report saving around five hours a week after the first month. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</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. Your data is encrypted, backed up daily and hosted in the region you choose. Plan projects, track progress and share updates without another status meeting.</p>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. 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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</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. Real-time dashboards show what is on track and what needs attention. Our open API and ready-made integrations fit into the stack you already have.</p>
<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. Automations take care of the repetitive steps, so people can focus on real work. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. Our open API and ready-made integrations fit into the stack you already have.
Step two
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. 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.
Step three
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. 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.
Step four
Teams report saving around five hours a week after the first month. Granular roles keep sensitive work private while everyone else stays informed. 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="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">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. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</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. 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-1128" class="pb-3">
<h3 class="h6">Step three</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. 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 id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Teams report saving around five hours a week after the first month. Granular roles keep sensitive work private while everyone else stays informed. 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.
Workflow automation
Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.
API integrations
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. Set up in an afternoon, connect the tools you use and invite your team.
Single sign-on
Friendly people answer your questions quickly, by phone, chat or email. Granular roles keep sensitive work private while everyone else stays informed. Clear prices, honest advice and no surprises along the way.
Questions
Plan projects, track progress and share updates without another status meeting. 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. Every detail is handled by people who care about getting it right.
<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">Workflow automation</a><a class="nav-link" href="#spy-1132">API integrations</a><a class="nav-link" href="#spy-1133">Single sign-on</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">Workflow automation</h3>
<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. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">API integrations</h3>
<p class="small">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. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Single sign-on</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Granular roles keep sensitive work private while everyone else stays informed. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. 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. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
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. Clear reports turn weekly numbers into decisions in minutes, not days.
Install
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. Every update lands in one place, so nothing gets lost in email threads.
Configure
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. Onboarding guides and live chat help new colleagues get going on day one. Real-time dashboards show what is on track and what needs attention.
Usage
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. 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.
Examples
Clear reports turn weekly numbers into decisions in minutes, not days. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Every update lands in one place, so nothing gets lost in email threads.
<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">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. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</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. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</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. Onboarding guides and live chat help new colleagues get going on day one. Real-time dashboards show what is on track and what needs attention.</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. Set up in an afternoon, connect the tools you use and invite your team. 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.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</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. Friendly people answer your questions quickly, by phone, chat or email. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
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. Set up in an afternoon, connect the tools you use and invite your team.
Midday
We keep things simple, so you can focus on what matters to you. Plan projects, track progress and share updates without another status meeting. We measure success by how many customers come back and tell their friends.
Afternoon
Our open API and ready-made integrations fit into the stack you already have. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.
Evening
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. Teams report saving around five hours a week after the first month. We listen first, then build a plan around what you actually need.
<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">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. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">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. Teams report saving around five hours a week after the first month. We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Our team has done this many times, so you never have to guess. 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. Every detail is handled by people who care about getting it right.
Beta
Clear reports turn weekly numbers into decisions in minutes, not days. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.
Gamma
Automations take care of the repetitive steps, so people can focus on real work. 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. Plan projects, track progress and share updates without another status meeting.
<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">Our team has done this many times, so you never have to guess. 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. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. 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. Plan projects, track progress and share updates without another status meeting.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Set up in an afternoon, connect the tools you use and invite your team. Thousands of customers already trust us, and we work hard to keep it that way. We measure success by how many customers come back and tell their friends.
Features
Clear prices, honest advice and no surprises along the way. Start free, upgrade when you grow and cancel any time with one click. Our open API and ready-made integrations fit into the stack you already have.
Reviews
Teams report saving around five hours a week after the first month. Granular roles keep sensitive work private while everyone else stays informed. Start in minutes and get help from a real person whenever you need it.
FAQ
We keep things simple, so you can focus on what matters to you. Every update lands in one place, so nothing gets lost in email threads. Your data is encrypted, backed up daily and hosted in the region you choose.
<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">Set up in an afternoon, connect the tools you use and invite your team. Thousands of customers already trust us, and we work hard to keep it that way. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Start free, upgrade when you grow and cancel any time with one click. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Teams report saving around five hours a week after the first month. Granular roles keep sensitive work private while everyone else stays informed. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Every update lands in one place, so nothing gets lost in email threads. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
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. We measure success by how many customers come back and tell their friends.
Background
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. Granular roles keep sensitive work private while everyone else stays informed.
Method
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. Real-time dashboards show what is on track and what needs attention.
Results
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. Teams report saving around five hours a week after the first month.
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">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. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</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. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">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. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">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. Teams report saving around five hours a week after the first month.</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
Clear reports turn weekly numbers into decisions in minutes, not days. Your data is encrypted, backed up daily and hosted in the region you choose. We listen first, then build a plan around what you actually need.
Set up your profile
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. Friendly people answer your questions quickly, by phone, chat or email.
Invite the team
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. 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.
Go live
Friendly people answer your questions quickly, by phone, chat or email. Clear reports turn weekly numbers into decisions in minutes, not days. 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">Clear reports turn weekly numbers into decisions in minutes, not days. Your data is encrypted, backed up daily and hosted in the region you choose. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. 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 id="spy-1164" class="pb-3">
<h3 class="h6">Go live</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. 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.
How one support team cut first replies to 20 minutes
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. 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.
A practical guide to async work
Automations take care of the repetitive steps, so people can focus on real work. We listen first, then build a plan around what you actually need. Set up in an afternoon, connect the tools you use and invite your team. Thousands of customers already trust us, and we work hard to keep it that way.
Inside our product roadmap for next year
Start free, upgrade when you grow and cancel any time with one click. Clear prices, honest advice and no surprises along the way. Granular roles keep sensitive work private while everyone else stays informed. We keep things simple, so you can focus on what matters to you.
What our customers asked us most
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. Onboarding guides and live chat help new colleagues get going on day one.
<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">How one support team cut first replies to 20 minutes</h3>
<p class="small mb-0">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. 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.</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">A practical guide to async work</h3>
<p class="small mb-0">Automations take care of the repetitive steps, so people can focus on real work. We listen first, then build a plan around what you actually need. Set up in an afternoon, connect the tools you use and invite your team. Thousands of customers already trust us, and we work hard to keep it that way.</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">Inside our product roadmap for next year</h3>
<p class="small mb-0">Start free, upgrade when you grow and cancel any time with one click. Clear prices, honest advice and no surprises along the way. 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-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">What our customers asked us most</h3>
<p class="small mb-0">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. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How remote teams keep projects on track?
- Plan projects, track progress and share updates without another status meeting.
- Looking back at a busy season?
- We measure success by how many customers come back and tell their friends.
- How we cut our release cycle in half?
- Every update lands in one place, so nothing gets lost in email threads.
Shipping
- What we learned shipping 200 releases?
- Every detail is handled by people who care about getting it right.
- Seven automations every team should set up?
- Thousands of customers already trust us, and we work hard to keep it that way.
- A beginner's guide to getting started?
- Clear reports turn weekly numbers into decisions in minutes, not days.
Returns
- The small habits that make a big difference?
- Our team has done this many times, so you never have to guess.
- Our favourite tips for busy weeks?
- Your data is encrypted, backed up daily and hosted in the region you choose.
- Five things we learned this year?
- We measure success by how many customers come back and tell their friends.
<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">Plan projects, track progress and share updates without another status meeting.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">We measure success by how many customers come back and tell their friends.</dd>
<dt class="small">How we cut our release cycle in half?</dt>
<dd class="small text-body-secondary">Every update lands in one place, so nothing gets lost in email threads.</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">What we learned shipping 200 releases?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
<dt class="small">Seven automations every team should set up?</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">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Clear reports turn weekly numbers into decisions in minutes, not days.</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">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Your data is encrypted, backed up daily and hosted in the region you choose.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">We measure success by how many customers come back and tell their friends.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
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. 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.
Battery
We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.
Connectivity
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. Clear prices, honest advice and no surprises along the way.
Security
Onboarding guides and live chat help new colleagues get going on day one. Plan projects, track progress and share updates without another status meeting. Every update lands in one place, so nothing gets lost in email threads. 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-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">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. 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-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">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. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</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. Every update lands in one place, so nothing gets lost in email threads. 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
$18.31 / mo
- Audit trail
- Dark mode
- Open API
Team
$34.41 / mo
- Real-time collaboration
- Audit trail
- Dark mode
Business
$50.29 / mo
- Real-time collaboration
- Dark mode
- Real-time collaboration
<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">$18.31<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Audit trail</li>
<li>Dark mode</li>
<li>Open API</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">$34.41<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Real-time collaboration</li>
<li>Audit trail</li>
<li>Dark mode</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">$50.29<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Real-time collaboration</li>
<li>Dark mode</li>
<li>Real-time collaboration</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: How to choose the right plan
Real-time dashboards show what is on track and what needs attention. 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.
Set up in an afternoon, connect the tools you use and invite your team. 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.
Chapter 2: Writing status updates people actually read
Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends.
Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month. Granular roles keep sensitive work private while everyone else stays informed. Our team has done this many times, so you never have to guess.
Chapter 3: Planning a product launch in six weeks
We keep things simple, so you can focus on what matters to you. 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. 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. Start free, upgrade when you grow and cancel any time with one click.
Chapter 4: The real cost of switching between tools
We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Granular roles keep sensitive work private while everyone else stays informed.
Real-time dashboards show what is on track and what needs attention. Every update lands in one place, so nothing gets lost in email threads. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.
<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: How to choose the right plan</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. 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.</p>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. 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-1185" class="pb-3">
<h3 class="h6">Chapter 2: Writing status updates people actually read</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. We measure success by how many customers come back and tell their friends.</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. Granular roles keep sensitive work private while everyone else stays informed. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Planning a product launch in six weeks</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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. Plan projects, track progress and share updates without another status meeting.</p>
<p class="small">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. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: The real cost of switching between tools</h3>
<p class="small">We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Granular roles keep sensitive work private while everyone else stays informed.</p>
<p class="small">Real-time dashboards show what is on track and what needs attention. Every update lands in one place, so nothing gets lost in email threads. 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>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Start free, upgrade when you grow and cancel any time with one click. Friendly people answer your questions quickly, by phone, chat or email. Set up in an afternoon, connect the tools you use and invite your team. Our open API and ready-made integrations fit into the stack you already have.
Notifications
We keep things simple, so you can focus on what matters to you. Clear reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting.
Privacy
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. 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">
<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="Priya Quinn">
</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="Auckland">
</div>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Friendly people answer your questions quickly, by phone, chat or email. Set up in an afternoon, connect the tools you use and invite your team. Our open API and ready-made integrations fit into the stack you already have.</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">We keep things simple, so you can focus on what matters to you. Clear reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting.</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">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. 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>16Team directory
Department links track a scrolling list of people.
Sales
- Hana AlvarezBackend Engineer
- Tariq AshfordArt Director
- Ravi LarsenSupport Specialist
Customer Support
- Ella NguyenProduct Designer
- Jonah FischerFrontend Engineer
- Mia KimSupport Specialist
Design
- Maya MorganCustomer Success
- Mason MensahProject Manager
- Chloe VargaProject Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Customer Support</a><a class="nav-link" href="#spy-1200">Design</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">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Hana Alvarez"><div><div class="small fw-semibold">Hana Alvarez</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Tariq Ashford"><div><div class="small fw-semibold">Tariq Ashford</div><div class="small text-body-secondary">Art Director</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Ravi Larsen"><div><div class="small fw-semibold">Ravi Larsen</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Customer Support</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Ella Nguyen"><div><div class="small fw-semibold">Ella Nguyen</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-3.svg" class="rounded-circle" width="36" height="36" alt="Jonah Fischer"><div><div class="small fw-semibold">Jonah Fischer</div><div class="small text-body-secondary">Frontend Engineer</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="Mia Kim"><div><div class="small fw-semibold">Mia Kim</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Design</h3>
<ul class="list-unstyled">
<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="Maya Morgan"><div><div class="small fw-semibold">Maya Morgan</div><div class="small text-body-secondary">Customer Success</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Mason Mensah"><div><div class="small fw-semibold">Mason Mensah</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-1.svg" class="rounded-circle" width="36" height="36" alt="Chloe Varga"><div><div class="small fw-semibold">Chloe Varga</div><div class="small text-body-secondary">Project Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Sales
- API boost$39.00
- Storage pack$9.00
- Automation pack$15.00
Product
- Priority support$30.00
- Team plan$17.00
- Analytics add-on$13.00
Marketing
- Marketing toolkit$21.99
- Priority support$29.00
- Analytics add-on$11.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Sales</a><a class="nav-link" href="#spy-1203">Product</a><a class="nav-link" href="#spy-1204">Marketing</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">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>API boost</span><span class="fw-semibold">$39.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Storage pack</span><span class="fw-semibold">$9.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Automation pack</span><span class="fw-semibold">$15.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Product</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>Team plan</span><span class="fw-semibold">$17.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Analytics add-on</span><span class="fw-semibold">$13.00</span></li>
</ul>
</div>
<div id="spy-1204" 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>Marketing toolkit</span><span class="fw-semibold">$21.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Priority support</span><span class="fw-semibold">$29.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Analytics add-on</span><span class="fw-semibold">$11.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
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. We measure success by how many customers come back and tell their friends.
This week
Automations take care of the repetitive steps, so people can focus on real work. Set up in an afternoon, connect the tools you use and invite your team. We keep things simple, so you can focus on what matters to you.
Later
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. Onboarding guides and live chat help new colleagues get going on day one. Every update lands in one place, so nothing gets lost in email threads.
<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">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. 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">Automations take care of the repetitive steps, so people can focus on real work. Set up in an afternoon, connect the tools you use and invite your team. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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. Onboarding guides and live chat help new colleagues get going on day one. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Every detail is handled by people who care about getting it right. 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. Your data is encrypted, backed up daily and hosted in the region you choose.
Orbit
We measure success by how many customers come back and tell their friends. Clear prices, honest advice and no surprises along the way. Plan projects, track progress and share updates without another status meeting. Real-time dashboards show what is on track and what needs attention.
Landing
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. Granular roles keep sensitive work private while everyone else stays informed. Automations take care of the repetitive steps, so people can focus on real work.
<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 detail is handled by people who care about getting it right. 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. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">We measure success by how many customers come back and tell their friends. Clear prices, honest advice and no surprises along the way. Plan projects, track progress and share updates without another status meeting. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">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. Granular roles keep sensitive work private while everyone else stays informed. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Apr 7, 2026
- NewClear reports turn weekly numbers into decisions in minutes, not days.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedOur open API and ready-made integrations fit into the stack you already have.
v3.1 Jul 3, 2026
- NewFriendly people answer your questions quickly, by phone, chat or email.
- ImprovedOur open API and ready-made integrations fit into the stack you already have.
- FixedThousands of customers already trust us, and we work hard to keep it that way.
v3.0 Jun 25, 2026
- NewYour data is encrypted, backed up daily and hosted in the region you choose.
- ImprovedGranular roles keep sensitive work private while everyone else stays informed.
- FixedTeams report saving around five hours a week after the first month.
v2.9 May 27, 2026
- NewEvery detail is handled by people who care about getting it right.
- ImprovedOnboarding guides and live chat help new colleagues get going on day one.
- FixedWe keep things simple, so you can focus on what matters to you.
<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">Apr 7, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear reports turn weekly numbers into decisions in minutes, not days.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our open API and ready-made integrations fit into the stack you already have.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jul 3, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our open API and ready-made integrations fit into the stack you already have.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of customers already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jun 25, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Your data is encrypted, backed up daily and hosted in the region you choose.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Granular roles keep sensitive work private while everyone else stays informed.</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-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">May 27, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Onboarding guides and live chat help new colleagues get going on day one.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
</ul>
</div>
</div>
</div>
</div>