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
Teams report saving around five hours a week after the first month. Thousands of customers already trust us, and we work hard to keep it that way. 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.
Plan projects, track progress and share updates without another status meeting. 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.
Details
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. 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.
Clear prices, honest advice and no surprises along the way. 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. Our team has done this many times, so you never have to guess.
Pricing
We measure success by how many customers come back and tell their friends. 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. 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. Start free, upgrade when you grow and cancel any time with one click. We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Juno Hub</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">Teams report saving around five hours a week after the first month. Thousands of customers already trust us, and we work hard to keep it that way. 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>
<p class="small">Plan projects, track progress and share updates without another status meeting. Real-time dashboards show what is on track and what needs attention. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">We listen first, then build a plan around what you actually need. Every update lands in one place, so nothing gets lost in email threads. 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>
<p class="small">Clear prices, honest advice and no surprises along the way. 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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">We measure success by how many customers come back and tell their friends. 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. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Start free, upgrade when you grow and cancel any time with one click. We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. We measure success by how many customers come back and tell their friends.
Step two
Start free, upgrade when you grow and cancel any time with one click. Every update lands in one place, so nothing gets lost in email threads. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.
Step three
Real-time dashboards show what is on track and what needs attention. 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
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. 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="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">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. We measure success by how many customers come back and tell their friends.</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. Every update lands in one place, so nothing gets lost in email threads. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. Every detail is handled by people who care about getting it right. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</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. 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.
Smart reporting
Your data is encrypted, backed up daily and hosted in the region you choose. We keep things simple, so you can focus on what matters to you. Our open API and ready-made integrations fit into the stack you already have.
Secure file sharing
Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Automations take care of the repetitive steps, so people can focus on real work. Clear reports turn weekly numbers into decisions in minutes, not days.
Workflow automation
We measure success by how many customers come back and tell their friends. Our open API and ready-made integrations fit into the stack you already have. Clear prices, honest advice and no surprises along the way.
Questions
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.
<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">Smart reporting</a><a class="nav-link" href="#spy-1132">Secure file sharing</a><a class="nav-link" href="#spy-1133">Workflow automation</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">Smart reporting</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. We keep things simple, so you can focus on what matters to you. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Secure file sharing</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Automations take care of the repetitive steps, so people can focus on real work. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Workflow automation</h3>
<p class="small">We measure success by how many customers come back and tell their friends. 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>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</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.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
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. Friendly people answer your questions quickly, by phone, chat or email.
Install
Teams report saving around five hours a week after the first month. 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.
Configure
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. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.
Usage
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. Automations take care of the repetitive steps, so people can focus on real work.
Examples
We keep things simple, so you can focus on what matters to you. Thousands of customers already trust us, and we work hard to keep it that way. 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.
<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">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Teams report saving around five hours a week after the first month. 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.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</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. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">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. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Thousands of customers already trust us, and we work hard to keep it that way. 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>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.
Midday
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. 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.
Afternoon
We measure success by how many customers come back and tell their friends. Plan projects, track progress and share updates without another status meeting. Our open API and ready-made integrations fit into the stack you already have.
Evening
Onboarding guides and live chat help new colleagues get going on day one. Real-time dashboards show what is on track and what needs attention. Friendly people answer your questions quickly, by phone, chat or email.
<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">Every detail is handled by people who care about getting it right. Clear reports turn weekly numbers into decisions in minutes, not days. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-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. 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. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">We measure success by how many customers come back and tell their friends. Plan projects, track progress and share updates without another status meeting. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. Real-time dashboards show what is on track and what needs attention. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Clear prices, honest advice and no surprises along the way. 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. Set up in an afternoon, connect the tools you use and invite your team.
Beta
Automations take care of the repetitive steps, so people can focus on real work. Every detail is handled by people who care about getting it right. Plan projects, track progress and share updates without another status meeting.
Gamma
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. Clear prices, honest advice and no surprises along the way.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-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">Clear prices, honest advice and no surprises along the way. 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. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Every detail is handled by people who care about getting it right. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
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. Teams report saving around five hours a week after the first month.
Features
Thousands of customers already trust us, and we work hard to keep it that way. We measure success by how many customers come back and tell their friends. 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.
Reviews
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. Granular roles keep sensitive work private while everyone else stays informed. Start free, upgrade when you grow and cancel any time with one click.
FAQ
Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email. 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-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">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. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. We measure success by how many customers come back and tell their friends. 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-1153" class="pb-3">
<h3 class="h6">Reviews</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. Granular roles keep sensitive work private while everyone else stays informed. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Friendly people answer your questions quickly, by phone, chat or email. 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>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Plan projects, track progress and share updates without another status meeting. Granular roles keep sensitive work private while everyone else stays informed. Your data is encrypted, backed up daily and hosted in the region you choose.
Background
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. Start in minutes and get help from a real person whenever you need it.
Method
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. 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.
Results
We listen first, then build a plan around what you actually need. 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. Teams report saving around five hours a week after the first month.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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">Plan projects, track progress and share updates without another status meeting. Granular roles keep sensitive work private while everyone else stays informed. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Thousands of customers already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</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. 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.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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. Teams report saving around five hours a week after the first month.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Clear reports turn weekly numbers into decisions in minutes, not days. Friendly people answer your questions quickly, by phone, chat or email. Automations take care of the repetitive steps, so people can focus on real work. We keep things simple, so you can focus on what matters to you.
Set up your profile
Our open API and ready-made integrations fit into the stack you already have. 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. We keep things simple, so you can focus on what matters to you.
Invite the team
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. Automations take care of the repetitive steps, so people can focus on real work.
Go live
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. Teams report saving around five hours a week after the first month. Real-time dashboards show what is on track and what needs attention.
<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">Clear reports turn weekly numbers into decisions in minutes, not days. Friendly people answer your questions quickly, by phone, chat or email. Automations take care of the repetitive steps, so people can focus on real work. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Our open API and ready-made integrations fit into the stack you already have. 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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">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. 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>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Seven automations every team should set up
Clear reports turn weekly numbers into decisions in minutes, not days. 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.
A beginner's guide to getting started
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. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.
Inside our product roadmap for next year
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. Granular roles keep sensitive work private while everyone else stays informed. Clear prices, honest advice and no surprises along the way.
Writing status updates people actually read
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. Onboarding guides and live chat help new colleagues get going on day one.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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">Seven automations every team should set up</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. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">A beginner's guide to getting started</h3>
<p class="small mb-0">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. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.</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">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. Granular roles keep sensitive work private while everyone else stays informed. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-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">Writing status updates people actually read</h3>
<p class="small mb-0">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. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Looking back at a busy season?
- Start in minutes and get help from a real person whenever you need it.
- What our customers asked us most?
- Plan projects, track progress and share updates without another status meeting.
- How one support team cut first replies to 20 minutes?
- Thousands of customers already trust us, and we work hard to keep it that way.
Shipping
- The real cost of switching between tools?
- Every update lands in one place, so nothing gets lost in email threads.
- What we learned shipping 200 releases?
- Clear reports turn weekly numbers into decisions in minutes, not days.
- A practical guide to async work?
- Clear prices, honest advice and no surprises along the way.
Returns
- Five things we learned this year?
- We listen first, then build a plan around what you actually need.
- Planning a product launch in six weeks?
- Automations take care of the repetitive steps, so people can focus on real work.
- How to choose the right plan?
- Our team has done this many times, so you never have to guess.
<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">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
<dt class="small">What our customers asked us most?</dt>
<dd class="small text-body-secondary">Plan projects, track progress and share updates without another status meeting.</dd>
<dt class="small">How one support team cut first replies to 20 minutes?</dt>
<dd class="small text-body-secondary">Thousands of customers already trust us, and we work hard to keep it that way.</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">Every update lands in one place, so nothing gets lost in email threads.</dd>
<dt class="small">What we learned shipping 200 releases?</dt>
<dd class="small text-body-secondary">Clear reports turn weekly numbers into decisions in minutes, not days.</dd>
<dt class="small">A practical guide to async work?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</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">Five things we learned this year?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">Planning a product launch in six weeks?</dt>
<dd class="small text-body-secondary">Automations take care of the repetitive steps, so people can focus on real work.</dd>
<dt class="small">How to choose the right plan?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Real-time dashboards show what is on track and what needs attention. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many customers come back and tell their friends.
Battery
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. Granular roles keep sensitive work private while everyone else stays informed.
Connectivity
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. Your data is encrypted, backed up daily and hosted in the region you choose. Start free, upgrade when you grow and cancel any time with one click.
Security
Teams report saving around five hours a week after the first month. Automations take care of the repetitive steps, so people can focus on real work. Clear reports turn weekly numbers into decisions in minutes, not days. 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-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">Real-time dashboards show what is on track and what needs attention. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">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. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<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. Your data is encrypted, backed up daily and hosted in the region you choose. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Teams report saving around five hours a week after the first month. Automations take care of the repetitive steps, so people can focus on real work. Clear reports turn weekly numbers into decisions in minutes, not days. Friendly people answer your questions quickly, by phone, chat or email.</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.77 / mo
- Open API
- Real-time collaboration
- Dark mode
Team
$30.52 / mo
- Open API
- 99.99% uptime
- Dark mode
Business
$65.06 / mo
- Real-time collaboration
- Role-based access
- 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">$14.77<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open API</li>
<li>Real-time collaboration</li>
<li>Dark mode</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">$30.52<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open API</li>
<li>99.99% uptime</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">$65.06<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>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: The small habits that make a big difference
Your data is encrypted, backed up daily and hosted in the region you choose. Clear prices, honest advice and no surprises along the way. Plan projects, track progress and share updates without another status meeting. Our open API and ready-made integrations fit into the stack you already have.
Thousands of customers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. 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.
Chapter 2: How remote teams keep projects on track
Every detail is handled by people who care about getting it right. 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. Teams report saving around five hours a week after the first month.
Onboarding guides and live chat help new colleagues get going on day one. Start free, upgrade when you grow and cancel any time with one click. Granular roles keep sensitive work private while everyone else stays informed.
Chapter 3: How we cut our release cycle in half
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. Start in minutes and get help from a real person whenever you need it. 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. 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.
Chapter 4: Our favourite tips for busy weeks
Clear reports turn weekly numbers into decisions in minutes, not days. Every update lands in one place, so nothing gets lost in email threads. 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.
Teams report saving around five hours a week after the first month. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
<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: The small habits that make a big difference</h3>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Clear prices, honest advice and no surprises along the way. Plan projects, track progress and share updates without another status meeting. Our open API and ready-made integrations fit into the stack you already have.</p>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. 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-1185" class="pb-3">
<h3 class="h6">Chapter 2: How remote teams keep projects on track</h3>
<p class="small">Every detail is handled by people who care about getting it right. 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. Teams report saving around five hours a week after the first month.</p>
<p class="small">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. 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: How we cut our release cycle in half</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. Start in minutes and get help from a real person whenever you need it. We measure success by how many customers come back and tell their friends.</p>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. Every detail is handled by people who care about getting it right. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Our favourite tips for busy weeks</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. 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.</p>
<p class="small">Teams report saving around five hours a week after the first month. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Start free, upgrade when you grow and cancel any time with one click. Your data is encrypted, backed up daily and hosted in the region you choose. Friendly people answer your questions quickly, by phone, chat or email.
Notifications
Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have. Plan projects, track progress and share updates without another status meeting. Real-time dashboards show what is on track and what needs attention.
Privacy
We keep things simple, so you can focus on what matters to you. Automations take care of the repetitive steps, so people can focus on real work. Our open API and ready-made integrations fit into the stack you already have.
<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="Mia Kowalski">
</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="Prague">
</div>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</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">Start in minutes and get help from a real person whenever you need it. Our open API and ready-made integrations fit into the stack you already have. Plan projects, track progress and share updates without another status meeting. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-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">We keep things simple, so you can focus on what matters to you. Automations take care of the repetitive steps, so people can focus on real work. Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Human Resources
- Noah WhitakerFinance Lead
- Lea NguyenSales Executive
- Mason AshfordHR Partner
Legal
- Amara BrennanSales Executive
- Diego MensahData Analyst
- Finn FischerContent Writer
Operations
- Elena LindqvistSales Executive
- Sofia NovakProduct Designer
- Theo PatelProduct Designer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Human Resources</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Operations</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-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">Human Resources</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Noah Whitaker"><div><div class="small fw-semibold">Noah Whitaker</div><div class="small text-body-secondary">Finance Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Lea Nguyen"><div><div class="small fw-semibold">Lea Nguyen</div><div class="small text-body-secondary">Sales Executive</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="Mason Ashford"><div><div class="small fw-semibold">Mason Ashford</div><div class="small text-body-secondary">HR Partner</div></div></li>
</ul>
</div>
<div id="spy-1199" 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-12.svg" class="rounded-circle" width="36" height="36" alt="Amara Brennan"><div><div class="small fw-semibold">Amara Brennan</div><div class="small text-body-secondary">Sales Executive</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Diego Mensah"><div><div class="small fw-semibold">Diego Mensah</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Finn Fischer"><div><div class="small fw-semibold">Finn Fischer</div><div class="small text-body-secondary">Content Writer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Operations</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Elena Lindqvist"><div><div class="small fw-semibold">Elena Lindqvist</div><div class="small text-body-secondary">Sales Executive</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="Sofia Novak"><div><div class="small fw-semibold">Sofia Novak</div><div class="small text-body-secondary">Product Designer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Theo Patel"><div><div class="small fw-semibold">Theo Patel</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Engineering
- Marketing toolkit$26.00
- API boost$37.00
- Onboarding workshop$386.00
Product
- Onboarding workshop$386.00
- Analytics add-on$13.00
- Starter planFree
Support
- API boost$39.00
- Automation pack$15.00
- Onboarding workshop$389.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Engineering</a><a class="nav-link" href="#spy-1203">Product</a><a class="nav-link" href="#spy-1204">Support</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">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Marketing toolkit</span><span class="fw-semibold">$26.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>API boost</span><span class="fw-semibold">$37.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Onboarding workshop</span><span class="fw-semibold">$386.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Product</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Onboarding workshop</span><span class="fw-semibold">$386.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>Starter plan</span><span class="fw-semibold">Free</span></li>
</ul>
</div>
<div id="spy-1204" 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>API boost</span><span class="fw-semibold">$39.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Automation pack</span><span class="fw-semibold">$15.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Onboarding workshop</span><span class="fw-semibold">$389.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Friendly people answer your questions quickly, by phone, chat or email. Onboarding guides and live chat help new colleagues get going on day one. Thousands of customers already trust us, and we work hard to keep it that way.
This week
Start in minutes and get help from a real person whenever you need it. 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. We keep things simple, so you can focus on what matters to you.
Later
Clear reports turn weekly numbers into decisions in minutes, not days. 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. Real-time dashboards show what is on track and what needs attention.
<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">Friendly people answer your questions quickly, by phone, chat or email. Onboarding guides and live chat help new colleagues get going on day one. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. 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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. 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. Real-time dashboards show what is on track and what needs attention.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Every update lands in one place, so nothing gets lost in email threads. Clear prices, honest advice and no surprises along the way. Your data is encrypted, backed up daily and hosted in the region you choose.
Orbit
Automations take care of the repetitive steps, so people can focus on real work. Plan projects, track progress and share updates without another status meeting. We listen first, then build a plan around what you actually need.
Landing
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. 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.
<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">Every update lands in one place, so nothing gets lost in email threads. Clear prices, honest advice and no surprises along the way. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Plan projects, track progress and share updates without another status meeting. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</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. 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>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Sep 1, 2026
- NewReal-time dashboards show what is on track and what needs attention.
- ImprovedOur open API and ready-made integrations fit into the stack you already have.
- FixedClear prices, honest advice and no surprises along the way.
v3.1 Apr 15, 2026
- NewThousands of customers already trust us, and we work hard to keep it that way.
- ImprovedWe keep things simple, so you can focus on what matters to you.
- FixedPlan projects, track progress and share updates without another status meeting.
v3.0 Dec 10, 2025
- NewGranular roles keep sensitive work private while everyone else stays informed.
- ImprovedEvery update lands in one place, so nothing gets lost in email threads.
- FixedWe measure success by how many customers come back and tell their friends.
v2.9 Oct 7, 2025
- NewYour data is encrypted, backed up daily and hosted in the region you choose.
- ImprovedClear reports turn weekly numbers into decisions in minutes, not days.
- FixedStart in minutes and get help from a real person whenever you need it.
<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">Sep 1, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Real-time dashboards show what is on track and what needs attention.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Clear prices, honest advice and no surprises along the way.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Apr 15, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of customers already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</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-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Dec 10, 2025</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>Every update lands in one place, so nothing gets lost in email threads.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many customers come back and tell their friends.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Oct 7, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Your data is encrypted, backed up daily and hosted in the region you choose.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear reports turn weekly numbers into decisions in minutes, not days.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Start in minutes and get help from a real person whenever you need it.</li>
</ul>
</div>
</div>
</div>
</div>