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
Our open API and ready-made integrations fit into the stack you already have. 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. 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. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.
Details
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. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.
Start free, upgrade when you grow and cancel any time with one click. Thousands of customers already trust us, and we work hard to keep it that way. Granular roles keep sensitive work private while everyone else stays informed. We measure success by how many customers come back and tell their friends.
Pricing
We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Onboarding guides and live chat help new colleagues get going on day one.
Clear reports turn weekly numbers into decisions in minutes, not days. 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.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Yaraen Craft</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">Our open API and ready-made integrations fit into the stack you already have. 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. Plan projects, track progress and share updates without another status meeting.</p>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</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. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.</p>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Thousands of customers already trust us, and we work hard to keep it that way. Granular roles keep sensitive work private while everyone else stays informed. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Onboarding guides and live chat help new colleagues get going on day one.</p>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. 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.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Set up in an afternoon, connect the tools you use and invite your team. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.
Step two
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. Every detail is handled by people who care about getting it right. Plan projects, track progress and share updates without another status meeting.
Step three
Granular roles keep sensitive work private while everyone else stays informed. 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. Clear prices, honest advice and no surprises along the way.
Step four
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. Friendly people answer your questions quickly, by phone, chat or email.
<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">Set up in an afternoon, connect the tools you use and invite your team. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">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. Every detail is handled by people who care about getting it right. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</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. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
API integrations
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.
Single sign-on
We measure success by how many customers come back and tell their friends. 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. Our open API and ready-made integrations fit into the stack you already have.
Smart reporting
Real-time dashboards show what is on track and what needs attention. Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month.
Questions
Automations take care of the repetitive steps, so people can focus on real work. Plan projects, track progress and share updates without another status meeting. We measure success by how many customers come back and tell their friends.
<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">API integrations</a><a class="nav-link" href="#spy-1132">Single sign-on</a><a class="nav-link" href="#spy-1133">Smart reporting</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">API integrations</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.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Single sign-on</h3>
<p class="small">We measure success by how many customers come back and tell their friends. Clear reports turn weekly numbers into decisions in minutes, not days. Your data is encrypted, backed up daily and hosted in the region you choose. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Smart reporting</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Plan projects, track progress and share updates without another status meeting. We measure success by how many customers come back and tell their friends.</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. Start free, upgrade when you grow and cancel any time with one click. Every update lands in one place, so nothing gets lost in email threads.
Install
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. Your data is encrypted, backed up daily and hosted in the region you choose. We keep things simple, so you can focus on what matters to you.
Configure
Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
Usage
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 team has done this many times, so you never have to guess. Granular roles keep sensitive work private while everyone else stays informed.
Examples
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. 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. Start free, upgrade when you grow and cancel any time with one click. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<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. Your data is encrypted, backed up daily and hosted in the region you choose. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<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 team has done this many times, so you never have to guess. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</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. 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
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. Plan projects, track progress and share updates without another status meeting. Our team has done this many times, so you never have to guess.
Midday
We listen first, then build a plan around what you actually need. Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed. Start free, upgrade when you grow and cancel any time with one click.
Afternoon
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Automations take care of the repetitive steps, so people can focus on real work. Thousands of customers already trust us, and we work hard to keep it that way.
Evening
Real-time dashboards show what is on track and what needs attention. Start in minutes and get help from a real person whenever you need it. Every update lands in one place, so nothing gets lost in email threads.
<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">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. Plan projects, track progress and share updates without another status meeting. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">We listen first, then build a plan around what you actually need. Clear reports turn weekly numbers into decisions in minutes, not days. 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-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Automations take care of the repetitive steps, so people can focus on real work. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. Start in minutes and get help from a real person whenever you need it. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
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. Your data is encrypted, backed up daily and hosted in the region you choose. Our open API and ready-made integrations fit into the stack you already have.
Beta
Onboarding guides and live chat help new colleagues get going on day one. Friendly people answer your questions quickly, by phone, chat or email. 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.
Gamma
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. We keep things simple, so you can focus on what matters to you. Real-time dashboards show what is on track and what needs attention.
<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">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. Your data is encrypted, backed up daily and hosted in the region you choose. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. Friendly people answer your questions quickly, by phone, chat or email. 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.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</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. We keep things simple, so you can focus on what matters to you. Real-time dashboards show what is on track and what needs attention.</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. 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.
Features
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. Our open API and ready-made integrations fit into the stack you already have.
Reviews
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. Clear reports turn weekly numbers into decisions in minutes, not days. Set up in an afternoon, connect the tools you use and invite your team.
FAQ
We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting. We keep things simple, so you can focus on what matters to you.
<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. Thousands of customers already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</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. 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">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. Clear reports turn weekly numbers into decisions in minutes, not days. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
We listen first, then build a plan around what you actually need. Automations take care of the repetitive steps, so people can focus on real work. 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.
Background
Our team has done this many times, so you never have to guess. Start free, upgrade when you grow and cancel any time with one click. Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days.
Method
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.
Results
Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email.
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">We listen first, then build a plan around what you actually need. Automations take care of the repetitive steps, so people can focus on real work. 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-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Our team has done this many times, so you never have to guess. Start free, upgrade when you grow and cancel any time with one click. Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">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 id="spy-1159" class="pb-3">
<h3 class="h6">Results</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. Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</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 open API and ready-made integrations fit into the stack you already have. Granular roles keep sensitive work private while everyone else stays informed. Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads.
Set up your profile
Plan projects, track progress and share updates without another status meeting. 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.
Invite the team
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. Real-time dashboards show what is on track and what needs attention.
Go live
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. 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.
<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 open API and ready-made integrations fit into the stack you already have. Granular roles keep sensitive work private while everyone else stays informed. Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. 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.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. Your data is encrypted, backed up daily and hosted in the region you choose. 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>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Our favourite tips for busy weeks
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 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.
Inside our product roadmap for next year
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. 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. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.
Planning a product launch in six weeks
Your data is encrypted, backed up daily and hosted in the region you choose. 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.
<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">Our favourite tips for busy weeks</h3>
<p class="small mb-0">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 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.</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">Inside our product roadmap for next year</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Granular roles keep sensitive work private while everyone else stays informed.</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">The real cost of switching between tools</h3>
<p class="small mb-0">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 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">Planning a product launch in six weeks</h3>
<p class="small mb-0">Your data is encrypted, backed up daily and hosted in the region you choose. 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>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- The small habits that make a big difference?
- Our open API and ready-made integrations fit into the stack you already have.
- How to choose the right plan?
- Our team has done this many times, so you never have to guess.
- What we learned shipping 200 releases?
- Real-time dashboards show what is on track and what needs attention.
Shipping
- How we cut our release cycle in half?
- Start in minutes and get help from a real person whenever you need it.
- A practical guide to async work?
- Every detail is handled by people who care about getting it right.
- Seven automations every team should set up?
- We keep things simple, so you can focus on what matters to you.
Returns
- What our customers asked us most?
- We listen first, then build a plan around what you actually need.
- How remote teams keep projects on track?
- Set up in an afternoon, connect the tools you use and invite your team.
- Looking back at a busy season?
- Teams report saving around five hours a week after the first month.
<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">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">Our open API and ready-made integrations fit into the stack you already have.</dd>
<dt class="small">How to choose the right plan?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">What we learned shipping 200 releases?</dt>
<dd class="small text-body-secondary">Real-time dashboards show what is on track and what needs attention.</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">How we cut our release cycle in half?</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">A practical guide to async work?</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">We keep things simple, so you can focus on what matters to you.</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">What our customers asked us most?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">How remote teams keep projects on track?</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">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Teams report saving around five hours a week after the first month.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends. Start free, upgrade when you grow and cancel any time with one click. Onboarding guides and live chat help new colleagues get going on day one.
Battery
Clear reports turn weekly numbers into decisions in minutes, not days. Automations take care of the repetitive steps, so people can focus on real work. Every update lands in one place, so nothing gets lost in email threads. Friendly people answer your questions quickly, by phone, chat or email.
Connectivity
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. Granular roles keep sensitive work private while everyone else stays informed.
Security
Clear reports turn weekly numbers into decisions in minutes, not days. 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.
<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">Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends. Start free, upgrade when you grow and cancel any time with one click. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Automations take care of the repetitive steps, so people can focus on real work. 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-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. Your data is encrypted, backed up daily and hosted in the region you choose. 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">Clear reports turn weekly numbers into decisions in minutes, not days. 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>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$19.55 / mo
- Role-based access
- Real-time collaboration
- Open API
Team
$35.85 / mo
- Audit trail
- Role-based access
- Real-time collaboration
Business
$58.14 / mo
- Role-based access
- 99.99% uptime
- Dark mode
<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">$19.55<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Role-based access</li>
<li>Real-time collaboration</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">$35.85<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Audit trail</li>
<li>Role-based access</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">$58.14<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>Dark mode</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Five things we learned this year
Onboarding guides and live chat help new colleagues get going on day one. 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.
Teams report saving around five hours a week after the first month. Automations take care of the repetitive steps, so people can focus on real work. Clear prices, honest advice and no surprises along the way. Plan projects, track progress and share updates without another status meeting.
Chapter 2: Writing status updates people actually read
Set up in an afternoon, connect the tools you use and invite your team. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Thousands of customers already trust us, and we work hard to keep it that way.
Friendly people answer your questions quickly, by phone, chat or email. Real-time dashboards show what is on track and what needs attention. Start free, upgrade when you grow and cancel any time with one click.
Chapter 3: How one support team cut first replies to 20 minutes
Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have. We listen first, then build a plan around what you actually need. 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. Onboarding guides and live chat help new colleagues get going on day one. Our team has done this many times, so you never have to guess.
Chapter 4: A beginner's guide to getting started
Teams report saving around five hours a week after the first month. Granular roles keep sensitive work private while everyone else stays informed. Clear reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting.
Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Your data is encrypted, backed up daily and hosted in the region you choose. Start free, upgrade when you grow and cancel any time with one click.
<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: Five things we learned this year</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. 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>
<p class="small">Teams report saving around five hours a week after the first month. Automations take care of the repetitive steps, so people can focus on real work. Clear prices, honest advice and no surprises along the way. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Writing status updates people actually read</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Thousands of customers already trust us, and we work hard to keep it that way.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Real-time dashboards show what is on track and what needs attention. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: How one support team cut first replies to 20 minutes</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small">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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: A beginner's guide to getting started</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 reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting.</p>
<p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Your data is encrypted, backed up daily and hosted in the region you choose. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
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. 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.
Notifications
Real-time dashboards show what is on track and what needs attention. Start in minutes and get help from a real person whenever you need it. Every update lands in one place, so nothing gets lost in email threads.
Privacy
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. Onboarding guides and live chat help new colleagues get going on day one.
<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="Omar Silva">
</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="Dublin">
</div>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Automations take care of the repetitive steps, so people can focus on real work. 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-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">Real-time dashboards show what is on track and what needs attention. Start in minutes and get help from a real person whenever you need it. Every update lands in one place, so nothing gets lost in email threads.</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">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. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Marketing
- Ava HaddadBackend Engineer
- Nora TanakaMarketing Lead
- Amara NovakMarketing Lead
Research
- Maya AshfordSupport Specialist
- Owen HughesArt Director
- Luna FischerProduct Designer
Operations
- Sofia MensahData Analyst
- Ivy AlvarezFinance Lead
- Omar SilvaSupport Specialist
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Marketing</a><a class="nav-link" href="#spy-1199">Research</a><a class="nav-link" href="#spy-1200">Operations</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">Marketing</h3>
<ul class="list-unstyled">
<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="Ava Haddad"><div><div class="small fw-semibold">Ava Haddad</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-2.svg" class="rounded-circle" width="36" height="36" alt="Nora Tanaka"><div><div class="small fw-semibold">Nora Tanaka</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Amara Novak"><div><div class="small fw-semibold">Amara Novak</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Research</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="Maya Ashford"><div><div class="small fw-semibold">Maya Ashford</div><div class="small text-body-secondary">Support Specialist</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="Owen Hughes"><div><div class="small fw-semibold">Owen Hughes</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-9.svg" class="rounded-circle" width="36" height="36" alt="Luna Fischer"><div><div class="small fw-semibold">Luna Fischer</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Operations</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="Sofia Mensah"><div><div class="small fw-semibold">Sofia Mensah</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-1.svg" class="rounded-circle" width="36" height="36" alt="Ivy Alvarez"><div><div class="small fw-semibold">Ivy Alvarez</div><div class="small text-body-secondary">Finance Lead</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="Omar Silva"><div><div class="small fw-semibold">Omar Silva</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Marketing
- Business plan$50.00
- Sales pipeline add-on$18.00
- Onboarding workshop$358.99
Sales
- Onboarding workshop$377.99
- Starter planFree
- API boost$38.00
Product
- Starter planFree
- API boost$41.00
- Enterprise suite$188.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Marketing</a><a class="nav-link" href="#spy-1203">Sales</a><a class="nav-link" href="#spy-1204">Product</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">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Business plan</span><span class="fw-semibold">$50.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Sales pipeline add-on</span><span class="fw-semibold">$18.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Onboarding workshop</span><span class="fw-semibold">$358.99</span></li>
</ul>
</div>
<div id="spy-1203" 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>Onboarding workshop</span><span class="fw-semibold">$377.99</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>API boost</span><span class="fw-semibold">$38.00</span></li>
</ul>
</div>
<div id="spy-1204" 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>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">$41.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Enterprise suite</span><span class="fw-semibold">$188.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Start free, upgrade when you grow and cancel any time with one click. Every detail is handled by people who care about getting it right. Plan projects, track progress and share updates without another status meeting.
This week
Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Real-time dashboards show what is on track and what needs attention.
Later
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 measure success by how many customers come back and tell their friends.
<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 free, upgrade when you grow and cancel any time with one click. Every detail is handled by people who care about getting it right. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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 measure success by how many customers come back and tell their friends.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Granular roles keep sensitive work private while everyone else stays informed. Clear reports turn weekly numbers into decisions in minutes, not days. Automations take care of the repetitive steps, so people can focus on real work. Teams report saving around five hours a week after the first month.
Orbit
Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have. Your data is encrypted, backed up daily and hosted in the region you choose.
Landing
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. Granular roles keep sensitive work private while everyone else stays informed. 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">Granular roles keep sensitive work private while everyone else stays informed. Clear reports turn weekly numbers into decisions in minutes, not days. Automations take care of the repetitive steps, so people can focus on real work. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">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. Granular roles keep sensitive work private while everyone else stays informed. 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 Aug 26, 2026
- NewClear reports turn weekly numbers into decisions in minutes, not days.
- ImprovedOnboarding guides and live chat help new colleagues get going on day one.
- FixedOur open API and ready-made integrations fit into the stack you already have.
v3.1 Dec 17, 2025
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedWe keep things simple, so you can focus on what matters to you.
v3.0 Sep 24, 2026
- NewThousands of customers already trust us, and we work hard to keep it that way.
- ImprovedWe measure success by how many customers come back and tell their friends.
- FixedAutomations take care of the repetitive steps, so people can focus on real work.
v2.9 Jun 14, 2026
- NewReal-time dashboards show what is on track and what needs attention.
- ImprovedClear prices, honest advice and no surprises along the way.
- FixedWe listen first, then build a plan around what you actually need.
<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">Aug 26, 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>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>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">Dec 17, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 24, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of customers already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We measure success by how many customers come back and tell their friends.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Automations take care of the repetitive steps, so people can focus on real work.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jun 14, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Real-time dashboards show what is on track and what needs attention.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear prices, honest advice and no surprises along the way.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
</ul>
</div>
</div>
</div>
</div>