Widget parameter gallery

Eighteen production-ready EchoThread looks.

A curated every-second sample from the widget parameter matrix: theme, host background, accent, language, and login button treatment. Use it to pick the configuration that feels native to your site before pasting the snippet.

Build from your URL

Filter examples

18 of 18 configurations shown

lightEnglishicons loginGoogle + GitHub

Editorial Redline

Best for magazines, essays, and publication pages that need a familiar light surface with a confident editorial accent.

Theme

light

Accent

#d72d34

<div
  id="echothread"
  data-shortname="travel-project"
  data-api-key="YOUR_API_KEY"
  data-identifier="guides/city-notebook"
  data-page-url="https://example.com/guides/city-notebook"
  data-lang="en"
  data-theme="light"
  data-accent-color="#d72d34"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + GitHub
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

darkEnglishicons loginGitHub + X

Night Console

A dark developer-docs treatment with cyan emphasis for technical blogs, changelogs, and code-heavy posts.

Theme

dark

Accent

#38bdf8

<div
  id="echothread"
  data-shortname="geek-bravado"
  data-api-key="YOUR_API_KEY"
  data-identifier="notes/kernel-debugging"
  data-page-url="https://example.com/notes/kernel-debugging"
  data-lang="en"
  data-theme="dark"
  data-accent-color="#38bdf8"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: GitHub + X
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

light한국어icons loginGoogle + Facebookguest comments

Hanok Journal

A calm green palette for Korean community posts, education pages, and local publications that want low visual noise.

Theme

#f2f8ef

Accent

#2f7d5b

<div
  id="echothread"
  data-shortname="kanalwm"
  data-api-key="YOUR_API_KEY"
  data-identifier="local/story-42"
  data-page-url="https://example.com/local/story-42"
  data-lang="ko"
  data-theme="#f2f8ef"
  data-accent-color="#2f7d5b"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + Facebook
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

darkEnglishicons loginGitHub + X + Facebook

Market Espresso

Designed for finance and trading commentary where the comments should feel serious without looking like a dashboard.

Theme

#17130f

Accent

#f59e0b

<div
  id="echothread"
  data-shortname="my-news-page"
  data-api-key="YOUR_API_KEY"
  data-identifier="analysis/session-breakout"
  data-page-url="https://example.com/analysis/session-breakout"
  data-lang="en"
  data-theme="#17130f"
  data-accent-color="#f59e0b"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: GitHub + X + Facebook
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

lightitalianoicons loginGoogle + Facebookguest comments

Ciclogiornale

A fresh Italian-language option for travel, cycling, food, and outdoor stories with a soft page-matched background.

Theme

#effaf7

Accent

#0f766e

<div
  id="echothread"
  data-shortname="ciclogravelista"
  data-api-key="YOUR_API_KEY"
  data-identifier="percorsi/gravel-alba"
  data-page-url="https://example.com/percorsi/gravel-alba"
  data-lang="it"
  data-theme="#effaf7"
  data-accent-color="#0f766e"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + Facebook
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

light简体中文icons loginGoogle + GitHubguest comments

数码观察

A Simplified Chinese option for technology, review, and gadget sites. The widget switches to a native CJK font stack and looser line height at this language.

Theme

#fff7f6

Accent

#c2410c

<div
  id="echothread"
  data-shortname="shumaguancha"
  data-api-key="YOUR_API_KEY"
  data-identifier="pingce/2026-yuenan"
  data-page-url="https://example.com/pingce/2026-yuenan"
  data-lang="zh"
  data-theme="#fff7f6"
  data-accent-color="#c2410c"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + GitHub
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

lightΕλληνικάicons loginGoogle + Facebookguest comments

Ημερολόγιο Αιγαίου

A Modern Greek option for travel writing, local publications, and community sites, with a quiet Aegean-inspired palette.

Theme

#f1faf9

Accent

#0f766e

<div
  id="echothread"
  data-shortname="aigaio-imerologio"
  data-api-key="YOUR_API_KEY"
  data-identifier="taxidia/naxos"
  data-page-url="https://example.com/taxidia/naxos"
  data-lang="el"
  data-theme="#f1faf9"
  data-accent-color="#0f766e"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + Facebook
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

darkEnglishicons loginX + Facebook

Gallery Ink

A quiet dark-mode frame for portfolios, art journals, and image-led essays where the accent should support the work.

Theme

#130f12

Accent

#fb7185

<div
  id="echothread"
  data-shortname="william-enckhausen"
  data-api-key="YOUR_API_KEY"
  data-identifier="work/field-study"
  data-page-url="https://example.com/work/field-study"
  data-lang="en"
  data-theme="#130f12"
  data-accent-color="#fb7185"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: X + Facebook
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

lightEnglishicons loginGoogle + GitHub + Facebookguest comments

School Blueprint

A clean education setup for course content, lesson pages, and workshop recaps where clarity beats decoration.

Theme

#eef6ff

Accent

#2563eb

<div
  id="echothread"
  data-shortname="eteeap-ph"
  data-api-key="YOUR_API_KEY"
  data-identifier="lesson/module-1"
  data-page-url="https://example.com/lesson/module-1"
  data-lang="en"
  data-theme="#eef6ff"
  data-accent-color="#2563eb"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + GitHub + Facebook
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

dark한국어icons loginX + Facebook

Manhwa Midnight

A high-contrast Korean dark mode for entertainment threads where icon sign-in keeps narrow columns tidy.

Theme

#171326

Accent

#a78bfa

<div
  id="echothread"
  data-shortname="free-manhwa"
  data-api-key="YOUR_API_KEY"
  data-identifier="chapter/118"
  data-page-url="https://example.com/chapter/118"
  data-lang="ko"
  data-theme="#171326"
  data-accent-color="#a78bfa"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: X + Facebook
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

lightitalianoicons loginGoogle + GitHub

Minimal Portfolio

A neutral option for personal sites and portfolios that need the widget to recede while still feeling intentional.

Theme

light

Accent

#475569

<div
  id="echothread"
  data-shortname="sriram-iyer"
  data-api-key="YOUR_API_KEY"
  data-identifier="notes/portfolio-feedback"
  data-page-url="https://example.com/notes/portfolio-feedback"
  data-lang="it"
  data-theme="light"
  data-accent-color="#475569"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + GitHub
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

darkitalianoicons loginGoogle + Xguest comments

Travel Sunset

A warm dark mode for travel recaps and photo-heavy pages, tuned so the comment box feels like part of the story.

Theme

#241112

Accent

#c2410c

<div
  id="echothread"
  data-shortname="travel-project"
  data-api-key="YOUR_API_KEY"
  data-identifier="routes/iceland-ring-road"
  data-page-url="https://example.com/routes/iceland-ring-road"
  data-lang="it"
  data-theme="#241112"
  data-accent-color="#c2410c"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + X
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

lightEnglishfull login buttonsGoogle + Facebooktheme source

Newsroom Page Source

A full-width article context where the widget reads the host page background from a CSS variable and keeps full Google/Facebook labels for clarity.

Host page backgroundLongform article using --color-bg

Theme

source --color-bg

Accent

#b91c1c

<div
  id="echothread"
  data-shortname="daily-briefing"
  data-api-key="YOUR_API_KEY"
  data-identifier="briefings/city-budget"
  data-page-url="https://example.com/briefings/city-budget"
  data-lang="en"
  data-theme-source="--color-bg"
  data-accent-color="#b91c1c"
  data-auth-button-style="labelled"
></div>
<!-- Site settings for this preview:
  auth providers: Google + Facebook
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

darkEnglishicons loginGoogle + GitHub + X + Facebookguest commentstheme source

Geek Bravado Source

A Geek Bravado-style dark blog page where the widget reads --color-bg, blends into the same charcoal page surface, opens guest comments, and offers Google/GitHub/X/Facebook sign-in.

Host page backgroundSteam Next Fest blog using --color-bg

Theme

source --color-bg

Accent

#c21f13

<div
  id="echothread"
  data-shortname="geek-bravado"
  data-api-key="YOUR_API_KEY"
  data-identifier="my-demo-highlights-from-the-june-2026-steam-next-fest"
  data-page-url="https://example.com/my-demo-highlights-from-the-june-2026-steam-next-fest"
  data-lang="en"
  data-theme-source="--color-bg"
  data-accent-color="#c21f13"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + GitHub + X + Facebook
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

darkEnglishfull login buttonsGitHub + X + Facebookguest commentstheme source

Agency Case Study

A dark full-screen case-study layout that demonstrates inherited page color, guest comments, and full GitHub/X/Facebook sign-in buttons.

Host page backgroundDark case study using --case-study-bg

Theme

source --case-study-bg

Accent

#0f766e

<div
  id="echothread"
  data-shortname="studio-notes"
  data-api-key="YOUR_API_KEY"
  data-identifier="case-studies/launch-review"
  data-page-url="https://example.com/case-studies/launch-review"
  data-lang="en"
  data-theme-source="--case-study-bg"
  data-accent-color="#0f766e"
  data-auth-button-style="labelled"
></div>
<!-- Site settings for this preview:
  auth providers: GitHub + X + Facebook
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

lightitalianoicons loginGoogle + Facebooktheme source

Rivista Source

A warm Italian editorial layout where the inherited host background keeps the widget from looking pasted over the article.

Sfondo della pagina hostIntervista editoriale con --article-bg

Theme

source --article-bg

Accent

#c2410c

<div
  id="echothread"
  data-shortname="rivista-lenta"
  data-api-key="YOUR_API_KEY"
  data-identifier="cultura/intervista-editoriale"
  data-page-url="https://example.com/cultura/intervista-editoriale"
  data-lang="it"
  data-theme-source="--article-bg"
  data-accent-color="#c2410c"
  data-auth-button-style="icons"
></div>
<!-- Site settings for this preview:
  auth providers: Google + Facebook
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

dark한국어full login buttonsGitHub + X

Product Docs KR

A restrained Korean product-docs variant with full provider labels for enterprise readers who need explicit actions.

Theme

dark

Accent

#94a3b8

<div
  id="echothread"
  data-shortname="product-docs"
  data-api-key="YOUR_API_KEY"
  data-identifier="releases/api-v2"
  data-page-url="https://example.com/releases/api-v2"
  data-lang="ko"
  data-theme="dark"
  data-accent-color="#94a3b8"
  data-auth-button-style="labelled"
></div>
<!-- Site settings for this preview:
  auth providers: GitHub + X
  guest comments: off
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

lightEnglishfull login buttonsGoogle + Facebookguest comments

Founder Letter

A clean company-letter treatment that keeps login buttons descriptive and leaves the widget on a simple light surface.

Theme

light

Accent

#7c3aed

<div
  id="echothread"
  data-shortname="open-company"
  data-api-key="YOUR_API_KEY"
  data-identifier="letters/june-update"
  data-page-url="https://example.com/letters/june-update"
  data-lang="en"
  data-theme="light"
  data-accent-color="#7c3aed"
  data-auth-button-style="labelled"
></div>
<!-- Site settings for this preview:
  auth providers: Google + Facebook
  guest comments: on
-->
<script src="https://cdn.echothread.io/widget.js" async></script>

Before you paste

Widget theming questions

Every look above is the same widget with a few attributes changed. These are the questions site owners ask before they pick one, answered with the attribute that does the work.

The attributes in play

data-accent-colorbrand color
data-themelight, dark or a hex background
data-theme-sourcefollow your theme variable
data-langpin the interface language
data-auth-button-styleicon or labelled sign-in

data-accent-colordata-theme

How do I make the comment widget match my site’s colors?

Set data-accent-color to your brand color; it paints the submit button, active states and footer link, and accepts any CSS color. For the background, either let the widget read the page it sits on (the default), or pass a hex color to data-theme and the text and surface colors adapt to its luminance.

Build a theme from your URL

data-theme-source

Does the widget follow my site’s dark mode?

Yes. By default it reads the background of your page and picks the matching light or dark theme, so a reader whose device is in dark mode does not get a dark widget on a light page. If your site switches themes with a CSS custom property, pass its name to data-theme-source and the widget follows each change.

data-theme="light"data-theme="dark"

Can I force one theme for every visitor?

Set data-theme="light" or data-theme="dark" on the container, or pin it for the whole site under Widget theme in that site’s settings without touching the snippet. An attribute on the container wins over the site setting.

data-lang

Can the widget show in my readers’ language?

Leave data-lang off and each visitor sees the widget in their browser’s language, falling back to English. Set data-lang to en, ko, it, zh or el to pin one language for everyone. Only the widget’s own interface changes; comments are never machine-translated.

data-auth-button-style

Can I show icon-only sign-in buttons in a narrow column?

Set data-auth-button-style="icons". The providers render as 44px icon buttons with accessible labels and a tooltip on hover or keyboard focus. Which providers appear (Google, GitHub, X, Facebook, Discord, Bluesky, Mastodon, and guest commenting) is a site setting, not part of the snippet.

every plan

Do the themes in this gallery cost extra?

No. Widget theming is included on every EchoThread plan, including the free Hobby plan. Each look in the gallery is the standard widget with different attributes, so you can copy any snippet above as-is and change it later without reinstalling.

Compare plans