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
Clear reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting. 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.
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. We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month.
Details
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. Real-time dashboards show what is on track and what needs attention.
Granular roles keep sensitive work private while everyone else stays informed. Every update lands in one place, so nothing gets lost in email threads. Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends.
Pricing
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. 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.
Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. 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.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Yaraly Works</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">Clear reports turn weekly numbers into decisions in minutes, not days. Plan projects, track progress and share updates without another status meeting. 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.</p>
<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. We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</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. Real-time dashboards show what is on track and what needs attention.</p>
<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. Clear prices, honest advice and no surprises along the way. We measure success by how many customers come back and tell their friends.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">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. 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.</p>
<p class="small">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. 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>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Start free, upgrade when you grow and cancel any time with one click. Automations take care of the repetitive steps, so people can focus on real work. Clear prices, honest advice and no surprises along the way.
Step two
We listen first, then build a plan around what you actually need. Real-time dashboards show what is on track and what needs attention. Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting.
Step three
We measure success by how many customers come back and tell their friends. Our team has done this many times, so you never have to guess. 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.
Step four
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. Granular roles keep sensitive work private while everyone else stays informed. Thousands of customers already trust us, and we work hard to keep it that way.
<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">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. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">We listen first, then build a plan around what you actually need. Real-time dashboards show what is on track and what needs attention. Teams report saving around five hours a week after the first month. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We measure success by how many customers come back and tell their friends. Our team has done this many times, so you never have to guess. 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 id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">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. Granular roles keep sensitive work private while everyone else stays informed. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Team analytics
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.
Secure file sharing
Our team has done this many times, so you never have to guess. Your data is encrypted, backed up daily and hosted in the region you choose. 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. 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. Set up in an afternoon, connect the tools you use and invite your team.
Questions
Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. We measure success by how many customers come back and tell their friends.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Team analytics</a><a class="nav-link" href="#spy-1132">Secure file sharing</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="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">Team analytics</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. Every detail is handled by people who care about getting it right. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Secure file sharing</h3>
<p class="small">Our team has done this many times, so you never have to guess. Your data is encrypted, backed up daily and hosted in the region you choose. 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-3">
<h3 class="h6">API integrations</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. We listen first, then build a plan around what you actually need. 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-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. We measure success by how many customers come back and tell their friends.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
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. Plan projects, track progress and share updates without another status meeting.
Install
Clear prices, honest advice and no surprises along the way. Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed.
Configure
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. Thousands of customers already trust us, and we work hard to keep it that way.
Usage
Every update lands in one place, so nothing gets lost in email threads. Your data is encrypted, backed up daily and hosted in the region you choose. Every detail is handled by people who care about getting it right. Every update lands in one place, so nothing gets lost in email threads.
Examples
Teams report saving around five hours a week after the first month. Our open API and ready-made integrations fit into the stack you already have. We measure success by how many customers come back and tell their friends.
<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">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. Plan projects, track progress and share updates without another status meeting.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Clear reports turn weekly numbers into decisions in minutes, not days. Granular roles keep sensitive work private while everyone else stays informed.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">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. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Every update lands in one place, so nothing gets lost in email threads. Your data is encrypted, backed up daily and hosted in the region you choose. Every detail is handled by people who care about getting it right. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Teams report saving around five hours a week after the first month. Our open API and ready-made integrations fit into the stack you already have. We measure success by how many customers come back and tell their friends.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Clear prices, honest advice and no surprises along the way. Real-time dashboards show what is on track and what needs attention. Automations take care of the repetitive steps, so people can focus on real work.
Midday
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. Set up in an afternoon, connect the tools you use and invite your team.
Afternoon
Onboarding guides and live chat help new colleagues get going on day one. 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.
Evening
Friendly people answer your questions quickly, by phone, chat or email. Clear reports turn weekly numbers into decisions in minutes, not days. Start free, upgrade when you grow and cancel any time with one click. Granular roles keep sensitive work private while everyone else stays informed.
<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">Clear prices, honest advice and no surprises along the way. Real-time dashboards show what is on track and what needs attention. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</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. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Onboarding guides and live chat help new colleagues get going on day one. Plan projects, track progress and share updates without another status meeting. Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear reports turn weekly numbers into decisions in minutes, not days. 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>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
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. Onboarding guides and live chat help new colleagues get going on day one.
Beta
Granular roles keep sensitive work private while everyone else stays informed. 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. Friendly people answer your questions quickly, by phone, chat or email.
Gamma
Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Set up in an afternoon, connect the tools you use and invite your team.
<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">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. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. 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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Set up in an afternoon, connect the tools you use and invite your team.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
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. Your data is encrypted, backed up daily and hosted in the region you choose.
Features
Every update lands in one place, so nothing gets lost in email threads. 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.
Reviews
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. Plan projects, track progress and share updates without another status meeting. Clear reports turn weekly numbers into decisions in minutes, not days.
FAQ
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. Clear prices, honest advice and no surprises along the way.
<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">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. Your data is encrypted, backed up daily and hosted in the region you choose.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Every update lands in one place, so nothing gets lost in email threads. 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-1153" class="pb-3">
<h3 class="h6">Reviews</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. Plan projects, track progress and share updates without another status meeting. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. We measure success by how many customers come back and tell their friends. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Start free, upgrade when you grow and cancel any time with one click. Teams report saving around five hours a week after the first month. Clear reports turn weekly numbers into decisions in minutes, not days. We listen first, then build a plan around what you actually need.
Background
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. Granular roles keep sensitive work private while everyone else stays informed. Clear prices, honest advice and no surprises along the way.
Method
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. Real-time dashboards show what is on track and what needs attention.
Results
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. Every detail is handled by people who care about getting it right.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Start free, upgrade when you grow and cancel any time with one click. Teams report saving around five hours a week after the first month. Clear reports turn weekly numbers into decisions in minutes, not days. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</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. 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-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Set up in an afternoon, connect the tools you use and invite your team. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">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. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Our team has done this many times, so you never have to guess. Plan projects, track progress and share updates without another status meeting. Onboarding guides and live chat help new colleagues get going on day one.
Set up your profile
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. 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.
Invite the team
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 free, upgrade when you grow and cancel any time with one click. Start in minutes and get help from a real person whenever you need it.
Go live
Real-time dashboards show what is on track and what needs attention. Plan projects, track progress and share updates without another status meeting. Teams report saving around five hours a week after the first month.
<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">Our team has done this many times, so you never have to guess. 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 id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">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. Your data is encrypted, backed up daily and hosted in the region you choose. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">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 free, upgrade when you grow and cancel any time with one click. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Real-time dashboards show what is on track and what needs attention. 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>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
How we cut our release cycle in half
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. Our team has done this many times, so you never have to guess. Clear reports turn weekly numbers into decisions in minutes, not days.
A practical guide to async work
Set up in an afternoon, connect the tools you use and invite your team. We keep things simple, so you can focus on what matters to you. 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.
The small habits that make a big difference
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. Our open API and ready-made integrations fit into the stack you already have.
Looking back at a busy season
Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.
<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">How we cut our release cycle in half</h3>
<p class="small mb-0">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. Our team has done this many times, so you never have to guess. Clear reports turn weekly numbers into decisions in minutes, not days.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">A practical guide to async work</h3>
<p class="small mb-0">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. Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">The small habits that make a big difference</h3>
<p class="small mb-0">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. Our open API and ready-made integrations fit into the stack you already have.</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">Looking back at a busy season</h3>
<p class="small mb-0">Granular roles keep sensitive work private while everyone else stays informed. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- The real cost of switching between tools?
- Automations take care of the repetitive steps, so people can focus on real work.
- How one support team cut first replies to 20 minutes?
- Plan projects, track progress and share updates without another status meeting.
- Our favourite tips for busy weeks?
- Your data is encrypted, backed up daily and hosted in the region you choose.
Shipping
- How to choose the right plan?
- We measure success by how many customers come back and tell their friends.
- What we learned shipping 200 releases?
- Our team has done this many times, so you never have to guess.
- A beginner's guide to getting started?
- We listen first, then build a plan around what you actually need.
Returns
- Five things we learned this year?
- Teams report saving around five hours a week after the first month.
- Planning a product launch in six weeks?
- Real-time dashboards show what is on track and what needs attention.
- Writing status updates people actually read?
- Friendly people answer your questions quickly, by phone, chat or email.
<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">The real cost of switching between tools?</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 one support team cut first replies to 20 minutes?</dt>
<dd class="small text-body-secondary">Plan projects, track progress and share updates without another status meeting.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Your data is encrypted, backed up daily and hosted in the region you choose.</dd>
</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">How to choose the right plan?</dt>
<dd class="small text-body-secondary">We measure success by how many customers come back and tell their friends.</dd>
<dt class="small">What we learned shipping 200 releases?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
</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">Teams report saving around five hours a week after the first month.</dd>
<dt class="small">Planning a product launch in six weeks?</dt>
<dd class="small text-body-secondary">Real-time dashboards show what is on track and what needs attention.</dd>
<dt class="small">Writing status updates people actually read?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
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. Onboarding guides and live chat help new colleagues get going on day one.
Battery
Set up in an afternoon, connect the tools you use and invite your team. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.
Connectivity
Granular roles keep sensitive work private while everyone else stays informed. Start free, upgrade when you grow and cancel any time with one click. Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads.
Security
Clear reports turn weekly numbers into decisions in minutes, not days. Our open API and ready-made integrations fit into the stack you already have. Start free, upgrade when you grow and cancel any time with one click. Plan projects, track progress and share updates without another status meeting.
<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">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. Onboarding guides and live chat help new colleagues get going on day one.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Granular roles keep sensitive work private while everyone else stays informed. Start free, upgrade when you grow and cancel any time with one click. Thousands of customers already trust us, and we work hard to keep it that way. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Clear reports turn weekly numbers into decisions in minutes, not days. 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. Plan projects, track progress and share updates without another status meeting.</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.05 / mo
- Open API
- 99.99% uptime
- 99.99% uptime
Team
$32.71 / mo
- Open API
- Dark mode
- Audit trail
Business
$75.01 / mo
- Dark mode
- 99.99% uptime
- 99.99% uptime
<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.05<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>99.99% uptime</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">$32.71<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open API</li>
<li>Dark mode</li>
<li>Audit trail</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">$75.01<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Dark mode</li>
<li>99.99% uptime</li>
<li>99.99% uptime</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Inside our product roadmap for next year
We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed. Clear reports turn weekly numbers into decisions in minutes, not days. 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. 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 2: Seven automations every team should set up
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. Automations take care of the repetitive steps, so people can focus on real work. Clear prices, honest advice and no surprises along the way.
Thousands of customers already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Real-time dashboards show what is on track and what needs attention.
Chapter 3: How remote teams keep projects on track
Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. 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.
Every detail is handled by people who care about getting it right. Our open API and ready-made integrations fit into the stack you already have. Teams report saving around five hours a week after the first month.
Chapter 4: What our customers asked us most
Automations take care of the repetitive steps, so people can focus on real work. Real-time dashboards show what is on track and what needs attention. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.
Your data is encrypted, backed up daily and hosted in the region you choose. Every detail is handled by people who care about getting it right. 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.
<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: Inside our product roadmap for next year</h3>
<p class="small">We listen first, then build a plan around what you actually need. Granular roles keep sensitive work private while everyone else stays informed. 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>
<p class="small">Teams report saving around five hours a week after the first month. 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-1185" class="pb-3">
<h3 class="h6">Chapter 2: Seven automations every team should set up</h3>
<p class="small">Set up in an afternoon, connect the tools you use and invite your team. Onboarding guides and live chat help new colleagues get going on day one. Automations take care of the repetitive steps, so people can focus on real work. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">Thousands of customers already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Real-time dashboards show what is on track and what needs attention.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: How remote teams keep projects on track</h3>
<p class="small">Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. 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">Every detail is handled by people who care about getting it right. Our open API and ready-made integrations fit into the stack you already have. Teams report saving around five hours a week after the first month.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: What our customers asked us most</h3>
<p class="small">Automations take care of the repetitive steps, so people can focus on real work. Real-time dashboards show what is on track and what needs attention. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">Your data is encrypted, backed up daily and hosted in the region you choose. Every detail is handled by people who care about getting it right. 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>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. Granular roles keep sensitive work private while everyone else stays informed. Our team has done this many times, so you never have to guess. Onboarding guides and live chat help new colleagues get going on day one.
Notifications
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. Plan projects, track progress and share updates without another status meeting.
Privacy
Clear reports turn weekly numbers into decisions in minutes, not days. We measure success by how many customers come back and tell their friends. 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-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="Arjun Ibrahim">
</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. Granular roles keep sensitive work private while everyone else stays informed. Our team has done this many times, so you never have to guess. Onboarding guides and live chat help new colleagues get going on day one.</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. 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-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">Clear reports turn weekly numbers into decisions in minutes, not days. We measure success by how many customers come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Research
- Zoe CarterData Analyst
- Priya HughesMarketing Lead
- Kenji HaddadArt Director
Legal
- Elena NguyenMarketing Lead
- Maya MensahOperations Manager
- Noah HarlowQA Engineer
Sales
- Finn LindqvistOperations Manager
- Sofia FischerCustomer Success
- Liam RossiSales Executive
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Research</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Sales</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">Research</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Zoe Carter"><div><div class="small fw-semibold">Zoe Carter</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-8.svg" class="rounded-circle" width="36" height="36" alt="Priya Hughes"><div><div class="small fw-semibold">Priya Hughes</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Kenji Haddad"><div><div class="small fw-semibold">Kenji Haddad</div><div class="small text-body-secondary">Art Director</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="Elena Nguyen"><div><div class="small fw-semibold">Elena Nguyen</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Maya Mensah"><div><div class="small fw-semibold">Maya Mensah</div><div class="small text-body-secondary">Operations Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Noah Harlow"><div><div class="small fw-semibold">Noah Harlow</div><div class="small text-body-secondary">QA Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Finn Lindqvist"><div><div class="small fw-semibold">Finn Lindqvist</div><div class="small text-body-secondary">Operations Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Sofia Fischer"><div><div class="small fw-semibold">Sofia Fischer</div><div class="small text-body-secondary">Customer Success</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Liam Rossi"><div><div class="small fw-semibold">Liam Rossi</div><div class="small text-body-secondary">Sales Executive</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Sales
- Sales pipeline add-on$19.00
- API boost$38.00
- Priority support$30.99
Marketing
- Business plan$52.00
- Priority support$27.00
- Marketing toolkit$26.00
Product
- Business plan$46.99
- Marketing toolkit$22.00
- Analytics add-on$12.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">Marketing</a><a class="nav-link" href="#spy-1204">Product</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Sales pipeline add-on</span><span class="fw-semibold">$19.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>API boost</span><span class="fw-semibold">$38.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Priority support</span><span class="fw-semibold">$30.99</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Business plan</span><span class="fw-semibold">$52.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Priority support</span><span class="fw-semibold">$27.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Marketing toolkit</span><span class="fw-semibold">$26.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Product</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Business plan</span><span class="fw-semibold">$46.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Marketing toolkit</span><span class="fw-semibold">$22.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Analytics add-on</span><span class="fw-semibold">$12.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
We keep things simple, so you can focus on what matters to you. 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. Start free, upgrade when you grow and cancel any time with one click.
This week
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. 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.
Later
Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Onboarding guides and live chat help new colleagues get going on day one.
<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">We keep things simple, so you can focus on what matters to you. 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. Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</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. 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.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Every detail is handled by people who care about getting it right. 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>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Your data is encrypted, backed up daily and hosted in the region you choose. Clear prices, honest advice and no surprises along the way. 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.
Orbit
Plan projects, track progress and share updates without another status meeting. Granular roles keep sensitive work private while everyone else stays informed. Every update lands in one place, so nothing gets lost in email threads.
Landing
Real-time dashboards show what is on track and what needs attention. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Automations take care of the repetitive steps, so people can focus on real work.
<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">Your data is encrypted, backed up daily and hosted in the region you choose. Clear prices, honest advice and no surprises along the way. 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.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</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. Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</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 listen first, then build a plan around what you actually need. Automations take care of the repetitive steps, so people can focus on real work.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Aug 18, 2026
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedWe keep things simple, so you can focus on what matters to you.
- FixedOur open API and ready-made integrations fit into the stack you already have.
v3.1 Dec 24, 2025
- NewOnboarding guides and live chat help new colleagues get going on day one.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedAutomations take care of the repetitive steps, so people can focus on real work.
v3.0 Aug 14, 2026
- NewPlan projects, track progress and share updates without another status meeting.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedClear prices, honest advice and no surprises along the way.
v2.9 Jun 3, 2026
- NewClear reports turn weekly numbers into decisions in minutes, not days.
- ImprovedReal-time dashboards show what is on track and what needs attention.
- FixedThousands of customers already trust us, and we work hard to keep it that way.
<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">Aug 18, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Our open API and ready-made integrations fit into the stack you already have.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Dec 24, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Onboarding guides and live chat help new colleagues get going on day one.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Automations take care of the repetitive steps, so people can focus on real work.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Aug 14, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Plan projects, track progress and share updates without another status meeting.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</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-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jun 3, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear reports turn weekly numbers into decisions in minutes, not days.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Thousands of customers already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
</div>
</div>
</div>