We Ate Our Own Dog Food (And It Was Delicious)

For a while, cStar's support page ran on the same prebuilt widgets every team gets on day one. A library search box. A chat bubble in the corner. It worked. It was fine.

"Fine" is a word for frozen dinners and airport Wi-Fi. We build support software with boss battles and XP. A chef eating frozen dinners. A Time Lord stuck in a phone booth that's just a phone booth.

So we rebuilt cstar.help/support with our own developer tools.

A Docs-Style Layout

No hero section, no marketing cards. A proper help center in three columns:

  • Left: topics and navigation
  • Center: the guide you're reading
  • Right: an "On this page" outline, plus an Ask about this guide button

The home view greets you with a search box, topic cards with guide counts, and a few good starting points ranked by real reads.

Same Data Everyone Gets

Nothing on the page is hardcoded. It reads published articles through the same public-library functions that power our Library API, the one every cStar team can call:

const [categories, articles] = await Promise.all([
  fetch('https://www.cstar.help/api/library/YOUR_TEAM/categories').then((r) => r.json()),
  fetch('https://www.cstar.help/api/library/YOUR_TEAM/articles?limit=100').then((r) => r.json())
]);

Two requests. No SDK required. When we publish an article, the page updates. When an article gets popular, the rankings change.

A Chat Widget We Wanted to Use

Instead of the default bubble, we built a custom chat panel on top of the cStar widget SDK (window.CStarChat):

  • Self-service first. Search and read articles inside the panel. No account needed.
  • Sign in only to chat. Signup and login show up when you actually want a human.
  • Smart deflection. Start typing a new question and matching articles appear before you send. Like the game hinting at the treasure chest before the boss fight.
  • Our look. Thick borders, arcade buttons, the whole design system. No iframe.

The Page Recognizes You

This part made me grin.

Signed in to cStar, or chatted with us before? The page says "Good to see you" with your name. If you have open conversations, a Pick up where you left off list takes you straight back to them.

Context Travels With You

Click Ask about this guide and the chat opens with a first message already written:

I was reading "Setting Up Webhooks" and need help.

The link to the guide comes along too. The agent knows exactly where you were, and you typed nothing extra. Searched and found nothing? The chat can carry your search terms the same way. New Game+ for your inventory.

At the bottom of every guide we ask, "Did this guide get you unstuck?" Answer "Not quite" and we ask what was missing, so the next version is better.

Built for Search Engines

Every guide is rendered on the server with its full content, a proper title, Open Graph tags and a canonical URL. Google sees the article, not a loading spinner.

The Library API is plain REST, so you can do the same from SvelteKit, Next.js, Nuxt or anything that renders on a server.

What This Means for You

Everything we used is available to every cStar team, on the same $15/seat:

  • Library REST API: categories, articles and search
  • Chat SDK: customer sign-in, conversations, messages and live updates
  • JS, React and Svelte SDKs: if you'd rather not wire fetch calls yourself
  • Webhooks: 35 events for when things happen

Build a branded help center, an in-app help panel or a chat that feels native to your product. Or something we haven't imagined. That's the point of shipping tools instead of templates. Start at /developers.

The Meta Part

We write guides about our tools. We build the page that shows those guides with those same tools. It's turtles all the way down, and recursion with a purpose.

We wouldn't ship tools we wouldn't use ourselves. Being our own pickiest customer keeps us honest.


Built with Bold Kindness by the cStar team. If you build support software and don't use it for your own support, maybe start there.