Demo
A real thread, on a real deployment.
Everything below is the product rather than a picture of it. The comments are served by a Charcha Worker at comments.charcha.dev, reached by the same two lines of HTML the landing page shows.
This thread is real. Posting writes to a real moderation queue, and nothing appears here until it is approved.
fetching · comments.charcha.dev
Styling
Will it look like your site?
Charcha names no colour and no typeface of its own. In inherit, the default and what the thread above is running, every surface and every rule is mixed out of your page's own text colour, so the widget is dark exactly when your page is. tokens opens thirteen properties for the places where that is not enough, and bare sends no CSS at all.
what you write
<div data-charcha data-styles="tokens"></div>
<style>
[data-charcha] {
--charcha-radius: 0;
--charcha-line: #e4e4e7;
--charcha-control-line: #71717a;
--charcha-focus: #f38020;
}
</style>the same thread, in tokens mode
fetching · comments.charcha.dev
Square corners, this site's own hairline, and the focus ring in Worker Orange. Four of the thirteen properties, set on the element around the widget. The other nine, and the class names bare mode leaves you.
Install
Two lines, then one setting.
A fresh deployment trusts only its own origin, so the setting that has to follow the snippet is the origin allowlist. It is a row edited at /admin, not an environment variable.
Or read the two lines first. Getting started has the origin step, and Add it to your site wraps the same snippet in a partial for Astro, Hugo, Eleventy, Jekyll and Next.js.