How we rebuilt cStar's support page using our own Headless SDK — and what we learned.
For months, cStar's support page at cstar.help/support used the same pre-built widgets we give every customer on day one. A search bar powered by our Library embed. A floating chat bubble in the corner. It worked. It was fine.
But "fine" isn't really our thing.
We built a Headless SDK that lets developers create completely custom support experiences — search, chat, ticket management, customer portals — all through clean APIs and a JavaScript SDK. And yet our own support page looked like... every other support page.
That felt wrong. Like a chef eating frozen dinners.
So we rebuilt it.
What We Built
A Docs-Style 3-Column Layout
Instead of a marketing page with a hero section and cards, we built a proper knowledge base app. Three panels matching our dashboard's golden ratio (1:1.618:1):
Left: Public Library sidebar with search and category navigation
Center: Article content with auto-generated table of contents
Right: Context panel — TOC when reading, SDK showcase on the welcome page
The whole thing feels like part of the product, not a separate marketing page.
Live Stats from Our Own API
The welcome page shows real data pulled from the Library API at load time:
61 articles across 10 topics
Real-time view counts
Popular articles ranked by actual reads
These aren't hardcoded. They're server-side rendered from the same API endpoints available to every cStar customer. When we add an article, the count updates. When an article gets popular, the ranking changes.
The code:
const [categories, articles] = await Promise.all([
fetch('https://cstar.help/api/library/YOUR_TEAM/categories').then(r => r.json()),
fetch('https://cstar.help/api/library/YOUR_TEAM/articles?limit=100').then(r => r.json())
]);
That's it. Two API calls. No SDK required — just REST. The stats calculate from the response.
A Fully Custom Chat Widget
This is where it gets interesting. Instead of dropping in our pre-built chat widget (the default bubble you see on other sites), we built a completely custom one using the CStarChat SDK:
3D arcade launcher matching our design system (thick borders, box shadows, the whole thing)
Auth flow with signup/login, powered by our widget API endpoints
Conversation management — list, create, send messages
Smart deflection — as you type your question, we search the knowledge base and suggest articles before you submit a ticket
The entire widget is a single Svelte component. No iframe. Same DOM. Same styles. Powered by window.CStarChat methods.
// Start a conversation with context from the article they were reading
CStarChat.startConversation({
subject: 'Help with webhooks',
message: 'I was reading the webhook setup guide and need help.'
});
Customer Recognition
Here's the part that made us grin. When a cStar customer visits our support page, the page recognizes them.
The CStarChat SDK stores sessions in localStorage. On page load, we check for a stored session and personalize the welcome:
Welcome back, Josh!
No login required. No redirect. If you've used our chat widget before, we know who you are and can show your open conversations in the sidebar.
This is the kind of thing that's impossible with a generic help center. It requires the SDK and the support page to share context — which they do, because they're both cStar.
Contextual Escalation
Every article has a "Was this helpful?" prompt at the bottom. If someone clicks "No," we immediately surface a "Talk to our team" button that opens the chat widget pre-filled with the article they were reading.
The agent sees: "I was reading 'Setting Up Webhooks' and need help."
No context lost. No "what were you looking for?" back-and-forth. The customer typed nothing extra. The page did the work.
SEO That Actually Works
Here's something most support platforms get wrong: they render everything client-side, which means Google sees an empty page.
Our Library API works server-side. Every article URL on our support page is server-rendered with full content, proper <title> tags, Open Graph metadata, and canonical URLs. When Google crawls /support/api-developer/javascript-sdk, it sees the complete article — not a loading spinner.
// Server-side: fetch the article before the page renders
const res = await fetch('https://cstar.help/api/library/YOUR_TEAM/articles/javascript-sdk');
const { data: article } = await res.json();
// Now the HTML includes the full article content, title, meta tags
This works with any SSR framework — SvelteKit, Next.js, Nuxt, Remix. The Library API is just REST. Call it from your server, render the HTML, ship it to the browser. Your support articles show up in Google results with proper titles and descriptions.
What This Means for You
Everything we used to build this page is available to every cStar customer:
Library REST API — Search articles, browse categories, get article content
CStarChat JavaScript SDK — Auth, conversations, messages, real-time events
Widget API Endpoints — Signup, login, identity verification
Webhook Events — Get notified when anything happens
Server-Side Compatible — Works with any SSR framework for full SEO
You can build:
A custom support portal that matches your brand perfectly
An in-app help center with smart article suggestions
A customer self-service dashboard with conversation history
A completely custom chat experience — no iframes, no constraints
An SEO-optimized knowledge base with server-rendered articles
The Meta Part
The article "Building a Custom Support Portal" on our support page describes exactly how we built the support page that displays it.
We write guides about our SDK. We build our support page with our SDK. The page that teaches you how to use the tools is itself built with those tools.
That's not just dogfooding. That's the meal review, the restaurant review, and the cooking show all in one.
Built with Bold Kindness by the cStar team. If you're building support software and not using it for your own support... maybe start there.