FAQ
FAQ with copy-link anchors
Each answer has its own shareable URL
Each answer has its own shareable URL
Build an FAQ list with Tailwind CSS where every question can be linked to directly. Use a max-w-3xl column with a heading and a muted subline. Each item is a details element styled as a bordered rounded-xl card with the summary as a flex row holding the question in medium weight, a small link glyph button that appears on hover, and a plus that rotates to a cross when open. The answer is relaxed grey prose with an occasional inline link. Give every item an id derived from its question. Then add JavaScript that copies the absolute URL with the anchor to the clipboard when the link button is clicked, showing a small floating "Link copied" chip near the button for a moment, opens and scrolls to the matching item when the page loads with a hash, and closes other open items so only one answer is expanded at a time.<section class="mx-auto max-w-3xl px-6 py-16">
<h2 class="text-3xl font-semibold tracking-tight text-neutral-900">Questions people actually ask</h2>
<p class="mt-3 text-neutral-500">Every answer has its own link — useful when you are pasting one into a ticket.</p>
<div id="faqList" class="mt-10 space-y-3">
<details id="faq-billing-cycle" class="faq-item group rounded-xl border border-neutral-200 bg-white px-5 open:border-neutral-300">
<summary class="flex cursor-pointer list-none items-center gap-3 py-4">
<span class="flex-1 text-sm font-medium text-neutral-900">When exactly does the billing cycle start?</span>
<button class="faq-link rounded-md p-1 text-neutral-300 opacity-0 transition group-hover:opacity-100 hover:text-neutral-700" aria-label="Copy link">🔗</button>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<div class="pb-5 text-sm leading-relaxed text-neutral-500">
On the day you first add a payment method, not the day you signed up. If you upgrade mid-cycle we charge the prorated difference immediately and reset the renewal date to match.
</div>
</details>
<details id="faq-data-export" class="faq-item group rounded-xl border border-neutral-200 bg-white px-5 open:border-neutral-300">
<summary class="flex cursor-pointer list-none items-center gap-3 py-4">
<span class="flex-1 text-sm font-medium text-neutral-900">Can I export everything if we leave?</span>
<button class="faq-link rounded-md p-1 text-neutral-300 opacity-0 transition group-hover:opacity-100 hover:text-neutral-700" aria-label="Copy link">🔗</button>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<div class="pb-5 text-sm leading-relaxed text-neutral-500">
Yes, in CSV and Parquet, including on the free plan. Exports run from the dashboard or the <a href="#" class="underline underline-offset-2 hover:text-neutral-900">API</a>, and there is no throttle on the way out.
</div>
</details>
<details id="faq-sso-cost" class="faq-item group rounded-xl border border-neutral-200 bg-white px-5 open:border-neutral-300">
<summary class="flex cursor-pointer list-none items-center gap-3 py-4">
<span class="flex-1 text-sm font-medium text-neutral-900">Is single sign-on an expensive add-on?</span>
<button class="faq-link rounded-md p-1 text-neutral-300 opacity-0 transition group-hover:opacity-100 hover:text-neutral-700" aria-label="Copy link">🔗</button>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<div class="pb-5 text-sm leading-relaxed text-neutral-500">
SAML and SCIM are included from the Team plan upward at no extra charge. We think charging separately for the secure option is a bad idea.
</div>
</details>
<details id="faq-support-hours" class="faq-item group rounded-xl border border-neutral-200 bg-white px-5 open:border-neutral-300">
<summary class="flex cursor-pointer list-none items-center gap-3 py-4">
<span class="flex-1 text-sm font-medium text-neutral-900">Who answers support, and when?</span>
<button class="faq-link rounded-md p-1 text-neutral-300 opacity-0 transition group-hover:opacity-100 hover:text-neutral-700" aria-label="Copy link">🔗</button>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<div class="pb-5 text-sm leading-relaxed text-neutral-500">
Engineers on the product team, on rotation, 07:00–20:00 UTC on weekdays. Median first reply last quarter was 41 minutes. Sev-1 incidents are covered around the clock.
</div>
</details>
<details id="faq-data-region" class="faq-item group rounded-xl border border-neutral-200 bg-white px-5 open:border-neutral-300">
<summary class="flex cursor-pointer list-none items-center gap-3 py-4">
<span class="flex-1 text-sm font-medium text-neutral-900">Where is our data physically stored?</span>
<button class="faq-link rounded-md p-1 text-neutral-300 opacity-0 transition group-hover:opacity-100 hover:text-neutral-700" aria-label="Copy link">🔗</button>
<span class="text-neutral-400 transition-transform group-open:rotate-45"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 5v14M5 12h14"/></svg></span>
</summary>
<div class="pb-5 text-sm leading-relaxed text-neutral-500">
In the region you choose when the workspace is created — Frankfurt, Oregon or Sydney. Data does not leave that region, including backups and logs.
</div>
</details>
</div>
<div id="faqToast" class="pointer-events-none fixed bottom-6 left-1/2 -translate-x-1/2 rounded-full bg-neutral-900 px-4 py-2 text-xs font-medium text-white opacity-0 transition-opacity duration-200">Link copied</div>
</section>var items = Array.prototype.slice.call(document.querySelectorAll(".faq-item"));
var toast = document.getElementById("faqToast");
var toastTimer;
function flash() {
clearTimeout(toastTimer);
toast.classList.remove("opacity-0");
toastTimer = setTimeout(function () {
toast.classList.add("opacity-0");
}, 1600);
}
items.forEach(function (item) {
var button = item.querySelector(".faq-link");
button.addEventListener("click", function (e) {
// The button lives inside the summary; without this the item would toggle.
e.preventDefault();
e.stopPropagation();
var url = location.origin + location.pathname + "#" + item.id;
navigator.clipboard.writeText(url).then(flash, flash);
history.replaceState(null, "", "#" + item.id);
});
item.addEventListener("toggle", function () {
if (!item.open) return;
items.forEach(function (other) {
if (other !== item) other.open = false;
});
});
});
if (location.hash) {
var target = document.getElementById(location.hash.slice(1));
if (target && target.classList.contains("faq-item")) {
target.open = true;
target.scrollIntoView({ behavior: "smooth", block: "center" });
}
}