Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
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 prices, honest advice and no surprises along the way.
We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Clear reports turn weekly numbers into decisions in minutes, not days.
Details
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. Granular roles keep sensitive work private while everyone else stays informed. 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. Every update lands in one place, so nothing gets lost in email threads. Start free, upgrade when you grow and cancel any time with one click. Automations take care of the repetitive steps, so people can focus on real work.
Pricing
Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. 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. 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. Friendly people answer your questions quickly, by phone, chat or email.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Brio</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">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 prices, honest advice and no surprises along the way.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</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. Granular roles keep sensitive work private while everyone else stays informed. Every detail is handled by people who care about getting it right.</p>
<p class="small">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. 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-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month.</p>
<p class="small">We measure success by how many customers come back and tell their friends. 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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Clear reports turn weekly numbers into decisions in minutes, not days. Every detail is handled by people who care about getting it right. Every update lands in one place, so nothing gets lost in email threads.
Step two
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. 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.
Step three
Clear prices, honest advice and no surprises along the way. Set up in an afternoon, connect the tools you use and invite your team. Real-time dashboards show what is on track and what needs attention. Your data is encrypted, backed up daily and hosted in the region you choose.
Step four
Onboarding guides and live chat help new colleagues get going on day one. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Every detail is handled by people who care about getting it right. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</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. 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.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Set up in an afternoon, connect the tools you use and invite your team. Real-time dashboards show what is on track and what needs attention. 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">Onboarding guides and live chat help new colleagues get going on day one. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
API integrations
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. Granular roles keep sensitive work private while everyone else stays informed.
Single sign-on
We keep things simple, so you can focus on what matters to you. Teams report saving around five hours a week after the first month. Real-time dashboards show what is on track and what needs attention.
Team analytics
Our open API and ready-made integrations fit into the stack you already have. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.
Questions
Set up in an afternoon, connect the tools you use and invite your team. Teams report saving around five hours a week after the first month. Friendly people answer your questions quickly, by phone, chat or email.
<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">Team analytics</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">API integrations</h3>
<p class="small">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. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Single sign-on</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Teams report saving around five hours a week after the first month. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Team analytics</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Teams report saving around five hours a week after the first month. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
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. Every update lands in one place, so nothing gets lost in email threads. We measure success by how many customers come back and tell their friends.
Install
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. Our team has done this many times, so you never have to guess.
Configure
Automations take care of the repetitive steps, so people can focus on real work. 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. We listen first, then build a plan around what you actually need.
Usage
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. Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month.
Examples
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. Real-time dashboards show what is on track and what needs attention. 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-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-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</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. Every update lands in one place, so nothing gets lost in email threads. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. 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. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</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. 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-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">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. Real-time dashboards show what is on track and what needs attention. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
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. We keep things simple, so you can focus on what matters to you. Our open API and ready-made integrations fit into the stack you already have.
Midday
Automations take care of the repetitive steps, so people can focus on real work. 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.
Afternoon
We listen first, then build a plan around what you actually need. Clear reports turn weekly numbers into decisions in minutes, not days. Friendly people answer your questions quickly, by phone, chat or email.
Evening
Your data is encrypted, backed up daily and hosted in the region you choose. Onboarding guides and live chat help new colleagues get going on day one. Start free, upgrade when you grow and cancel any time with one click. We measure success by how many customers come back and tell their friends.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">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. We keep things simple, so you can focus on what matters to you. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. 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.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Onboarding guides and live chat help new colleagues get going on day one. Start free, upgrade when you grow and cancel any time with one click. We measure success by how many customers come back and tell their friends.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Plan projects, track progress and share updates without another status meeting. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.
Beta
Friendly people answer your questions quickly, by phone, chat or email. 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.
Gamma
Granular roles keep sensitive work private while everyone else stays informed. Set up in an afternoon, connect the tools you use and invite your team. Plan projects, track progress and share updates without another status meeting. 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-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. Set up in an afternoon, connect the tools you use and invite your team. Plan projects, track progress and share updates without another status meeting. 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
Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Onboarding guides and live chat help new colleagues get going on day one. Start free, upgrade when you grow and cancel any time with one click.
Features
We listen first, then build a plan around what you actually need. 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. Teams report saving around five hours a week after the first month.
Reviews
Every update lands in one place, so nothing gets lost in email threads. 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.
FAQ
Clear prices, honest advice and no surprises along the way. 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.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Onboarding guides and live chat help new colleagues get going on day one. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</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. Your data is encrypted, backed up daily and hosted in the region you choose. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Every update lands in one place, so nothing gets lost in email threads. 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-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Start in minutes and get help from a real person whenever you need it. 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. Set up in an afternoon, connect the tools you use and invite your team.
Background
Every detail is handled by people who care about getting it right. Your data is encrypted, backed up daily and hosted in the region you choose. We measure success by how many customers come back and tell their friends. Onboarding guides and live chat help new colleagues get going on day one.
Method
Clear prices, honest advice and no surprises along the way. 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. We keep things simple, so you can focus on what matters to you.
Results
Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. 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.
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-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. 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. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Every detail is handled by people who care about getting it right. Your data is encrypted, backed up daily and hosted in the region you choose. We measure success by how many customers come back and tell their friends. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. 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>
<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
Start free, upgrade when you grow and cancel any time with one click. Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month.
Set up your profile
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. Plan projects, track progress and share updates without another status meeting.
Invite the team
Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. We measure success by how many customers come back and tell their friends. Start in minutes and get help from a real person whenever you need it.
Go live
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. 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.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Clear reports turn weekly numbers into decisions in minutes, not days. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. We measure success by how many customers come back and tell their friends. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. 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. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Planning a product launch in six weeks
Onboarding guides and live chat help new colleagues get going on day one. Teams report saving around five hours a week after the first month. We keep things simple, so you can focus on what matters to you.
How to choose the right plan
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Our open API and ready-made integrations fit into the stack you already have. Automations take care of the repetitive steps, so people can focus on real work.
Inside our product roadmap for next year
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. Real-time dashboards show what is on track and what needs attention.
Seven automations every team should set up
Clear reports turn weekly numbers into decisions in minutes, not days. Clear prices, honest advice and no surprises along the way. Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">Planning a product launch in six weeks</h3>
<p class="small mb-0">Onboarding guides and live chat help new colleagues get going on day one. Teams report saving around five hours a week after the first month. We keep things simple, so you can focus on what matters to you.</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">How to choose the right plan</h3>
<p class="small mb-0">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Our open API and ready-made integrations fit into the stack you already have. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div 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">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. Real-time dashboards show what is on track and what needs attention.</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">Seven automations every team should set up</h3>
<p class="small mb-0">Clear reports turn weekly numbers into decisions in minutes, not days. Clear prices, honest advice and no surprises along the way. Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Writing status updates people actually read?
- Friendly people answer your questions quickly, by phone, chat or email.
- How remote teams keep projects on track?
- Our team has done this many times, so you never have to guess.
- How one support team cut first replies to 20 minutes?
- Teams report saving around five hours a week after the first month.
Shipping
- The real cost of switching between tools?
- We measure success by how many customers come back and tell their friends.
- A beginner's guide to getting started?
- We listen first, then build a plan around what you actually need.
- What our customers asked us most?
- Automations take care of the repetitive steps, so people can focus on real work.
Returns
- Our favourite tips for busy weeks?
- Onboarding guides and live chat help new colleagues get going on day one.
- What we learned shipping 200 releases?
- Every detail is handled by people who care about getting it right.
- How we cut our release cycle in half?
- Real-time dashboards show what is on track and what needs attention.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills 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-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Writing status updates people actually read?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<dt class="small">How remote teams keep projects on track?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">How one support team cut first replies to 20 minutes?</dt>
<dd class="small text-body-secondary">Teams report saving around five hours a week after the first month.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">The real cost of switching between tools?</dt>
<dd class="small text-body-secondary">We measure success by how many customers come back and tell their friends.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">What our customers asked us most?</dt>
<dd class="small text-body-secondary">Automations take care of the repetitive steps, so people can focus on real work.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Onboarding guides and live chat help new colleagues get going on day one.</dd>
<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">How we cut our release cycle in half?</dt>
<dd class="small text-body-secondary">Real-time dashboards show what is on track and what needs attention.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Set up in an afternoon, connect the tools you use and invite your team. Plan projects, track progress and share updates without another status meeting. Granular roles keep sensitive work private while everyone else stays informed.
Battery
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. Thousands of customers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.
Connectivity
We keep things simple, so you can focus on what matters to you. Start free, upgrade when you grow and cancel any time with one click. Our team has done this many times, so you never have to guess.
Security
Plan projects, track progress and share updates without another status meeting. Every detail is handled by people who care about getting it right. Thousands of customers already trust us, and we work hard to keep it that way.
<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" 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-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Plan projects, track progress and share updates without another status meeting. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Our open API and ready-made integrations fit into the stack you already have. Thousands of customers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Start free, upgrade when you grow and cancel any time with one click. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Plan projects, track progress and share updates without another status meeting. Every detail is handled by people who care about getting it right. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$11.28 / mo
- Dark mode
- Open API
- Audit trail
Team
$29.37 / mo
- Real-time collaboration
- Role-based access
- Dark mode
Business
$53.68 / mo
- Real-time collaboration
- Dark mode
- 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-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-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">$11.28<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Dark mode</li>
<li>Open API</li>
<li>Audit trail</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">$29.37<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Real-time collaboration</li>
<li>Role-based access</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">$53.68<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>Dark mode</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Looking back at a busy season
Real-time dashboards show what is on track and what needs attention. We measure success by how many customers come back and tell their friends. 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. 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.
Chapter 2: A practical guide to async work
Automations take care of the repetitive steps, so people can focus on real work. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
We keep things simple, so you can focus on what matters to you. 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.
Chapter 3: Five things we learned this year
We listen first, then build a plan around what you actually need. 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. Set up in an afternoon, connect the tools you use and invite your team.
Clear prices, honest advice and no surprises along the 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.
Chapter 4: The small habits that make a big difference
Granular roles keep sensitive work private while everyone else stays informed. 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.
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. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Looking back at a busy season</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. We measure success by how many customers come back and tell their friends. Start free, upgrade when you grow and cancel any time with one click.</p>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. 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 id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: A practical guide to async work</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. 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.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Five things we learned this year</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. Your data is encrypted, backed up daily and hosted in the region you choose. Set up in an afternoon, connect the tools you use and invite your team.</p>
<p class="small">Clear prices, honest advice and no surprises along the 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.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: The small habits that make a big difference</h3>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. 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.</p>
<p class="small">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. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
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. 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.
Notifications
Set up in an afternoon, connect the tools you use and invite your team. We measure success by how many customers come back and tell their friends. Real-time dashboards show what is on track and what needs attention.
Privacy
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. Onboarding guides and live chat help new colleagues get going on day one. Clear reports turn weekly numbers into decisions in minutes, not days.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-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="Kai Patel">
</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="Melbourne">
</div>
<p class="small">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. 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 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">Set up in an afternoon, connect the tools you use and invite your team. We measure success by how many customers come back and tell their friends. Real-time dashboards show what is on track and what needs attention.</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">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. Onboarding guides and live chat help new colleagues get going on day one. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Legal
- Priya TanakaSupport Specialist
- Ella LarsenContent Writer
- Liam HaddadProject Manager
Design
- Ruby KimOperations Manager
- Hana AlvarezMarketing Lead
- Chloe AshfordSales Executive
Finance
- Aria CarterArt Director
- Omar KowalskiBackend Engineer
- Jonah MoreauProduct Designer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Design</a><a class="nav-link" href="#spy-1200">Finance</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Priya Tanaka"><div><div class="small fw-semibold">Priya Tanaka</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-12.svg" class="rounded-circle" width="36" height="36" alt="Ella Larsen"><div><div class="small fw-semibold">Ella Larsen</div><div class="small text-body-secondary">Content Writer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Liam Haddad"><div><div class="small fw-semibold">Liam Haddad</div><div class="small text-body-secondary">Project Manager</div></div></li>
</ul>
</div>
<div id="spy-1199" 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-10.svg" class="rounded-circle" width="36" height="36" alt="Ruby Kim"><div><div class="small fw-semibold">Ruby Kim</div><div class="small text-body-secondary">Operations Manager</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="Hana Alvarez"><div><div class="small fw-semibold">Hana Alvarez</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-3.svg" class="rounded-circle" width="36" height="36" alt="Chloe Ashford"><div><div class="small fw-semibold">Chloe Ashford</div><div class="small text-body-secondary">Sales Executive</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Aria Carter"><div><div class="small fw-semibold">Aria Carter</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-6.svg" class="rounded-circle" width="36" height="36" alt="Omar Kowalski"><div><div class="small fw-semibold">Omar Kowalski</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-7.svg" class="rounded-circle" width="36" height="36" alt="Jonah Moreau"><div><div class="small fw-semibold">Jonah Moreau</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Marketing
- Sales pipeline add-on$17.00
- Automation pack$16.00
- Business plan$46.00
Support
- Onboarding workshop$421.00
- Priority support$30.00
- Business plan$49.00
Engineering
- Enterprise suite$215.00
- Analytics add-on$13.00
- Team plan$19.00
<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">Support</a><a class="nav-link" href="#spy-1204">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Sales pipeline add-on</span><span class="fw-semibold">$17.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Automation pack</span><span class="fw-semibold">$16.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Business plan</span><span class="fw-semibold">$46.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Support</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Onboarding workshop</span><span class="fw-semibold">$421.00</span></li>
<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>Business plan</span><span class="fw-semibold">$49.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Enterprise suite</span><span class="fw-semibold">$215.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>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Team plan</span><span class="fw-semibold">$19.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Our open API and ready-made integrations fit into the stack you already have. We measure success by how many customers come back and tell their friends. 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.
This week
Clear reports turn weekly numbers into decisions in minutes, not days. Thousands of customers already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email.
Later
Every detail is handled by people who care about getting it right. Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. Every update lands in one place, so nothing gets lost in email threads.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. We measure success by how many customers come back and tell their friends. 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.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Thousands of customers already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Every detail is handled by people who care about getting it right. Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Teams report saving around five hours a week after the first month. Start free, upgrade when you grow and cancel any time with one click. Start in minutes and get help from a real person whenever you need it.
Orbit
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. Plan projects, track progress and share updates without another status meeting.
Landing
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. Clear prices, honest advice and no surprises along the way.
<div data-ui-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-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Teams report saving around five hours a week after the first month. Start free, upgrade when you grow and cancel any time with one click. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Automations take care of the repetitive steps, so people can focus on real work. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">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. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Feb 4, 2026
- NewOnboarding guides and live chat help new colleagues get going on day one.
- ImprovedStart free, upgrade when you grow and cancel any time with one click.
- FixedTeams report saving around five hours a week after the first month.
v3.1 Sep 23, 2025
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedReal-time dashboards show what is on track and what needs attention.
- FixedFriendly people answer your questions quickly, by phone, chat or email.
v3.0 Oct 8, 2025
- NewWe listen first, then build a plan around what you actually need.
- ImprovedOur open API and ready-made integrations fit into the stack you already have.
- FixedPlan projects, track progress and share updates without another status meeting.
v2.9 Mar 8, 2026
- NewOnboarding guides and live chat help new colleagues get going on day one.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedAutomations take care of the repetitive steps, so people can focus on real work.
<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-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Feb 4, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Onboarding guides and live chat help new colleagues get going on day one.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start free, upgrade when you grow and cancel any time with one click.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Teams report saving around five hours a week after the first month.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 23, 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>Real-time dashboards show what is on track and what needs attention.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Oct 8, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</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>Plan projects, track progress and share updates without another status meeting.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Mar 8, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Onboarding guides and live chat help new colleagues get going on day one.</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>Automations take care of the repetitive steps, so people can focus on real work.</li>
</ul>
</div>
</div>
</div>
</div>