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