DEV Community

Cover image for We Built Free Embeddable Stock Sentiment Widgets — Here's How to Use Them
Alexander Schneider
Alexander Schneider

Posted on • Originally published at adanos.org

We Built Free Embeddable Stock Sentiment Widgets — Here's How to Use Them

#webcomponents #javascript #fintech #opensource

We just shipped something we're really excited about: three embeddable stock sentiment widgets that any developer can drop into their site with a single <script> tag.

No API key. No framework dependency. No build step. Just HTML.

Why We Built This

We run the Reddit Stock Sentiment API — it tracks what retail investors are talking about on Reddit and X/Twitter in real-time, scoring stocks by buzz, sentiment, and trend direction.

The API is great for developers building dashboards and trading tools. But we kept hearing the same request: "Can I just embed a widget on my blog?"

So we built exactly that.

The Three Widgets

1. Ticker Tape

A scrolling horizontal bar showing trending stocks with sentiment indicators. Think Bloomberg terminal vibes for your website header.

<script src="https://adanos.org/embed/adanos-widgets.js"></script>
<adanos-ticker-tape theme="dark" source="reddit" limit="15" speed="normal"></adanos-ticker-tape>
Enter fullscreen mode Exit fullscreen mode

Each ticker item shows the stock logo, symbol, buzz score, a colored sentiment dot (green = bullish, red = bearish), and trend direction.

Attributes:
| Attribute | Options | Default |
|-----------|---------|---------|
| theme | light, dark | light |
| source | reddit, x | reddit |
| limit | 5, 10, 15, 20 | 10 |
| speed | slow, normal, fast | normal |

2. Top Movers

A ranked leaderboard of the hottest stocks. Shows buzz score, bullish percentage, trend direction, and a 7-day sparkline chart.

<script src="https://adanos.org/embed/adanos-widgets.js"></script>
<adanos-top-movers theme="light" source="reddit" limit="10" period="1" show-logos="true"></adanos-top-movers>
Enter fullscreen mode Exit fullscreen mode

The table is fully responsive — company names hide on tablets, sparklines hide on phones.

Attributes:
| Attribute | Options | Default |
|-----------|---------|---------|
| theme | light, dark | light |
| source | reddit, x | reddit |
| limit | 5, 10, 15 | 10 |
| period | 1, 3, 7, 14, 21, 30 (days) | 1 |
| show-logos | true, false | true |

3. Stock Sentiment Card

A deep-dive card for a single stock. Shows buzz score, bullish percentage, mention count, trend, a 7-day sparkline, and an optional AI-generated explanation of why the stock is trending.

<script src="https://adanos.org/embed/adanos-widgets.js"></script>
<adanos-stock-sentiment ticker="TSLA" theme="light" source="reddit" show-explanation="true"></adanos-stock-sentiment>
Enter fullscreen mode Exit fullscreen mode

Perfect for embedding in stock analysis articles.

Attributes:
| Attribute | Options | Default |
|-----------|---------|---------|
| theme | light, dark | light |
| source | reddit, x | reddit |
| ticker | Any stock symbol | (required) |
| show-explanation | true, false | true |

Technical Decisions

A few things we think fellow devs will appreciate:

Standard Web Components

No React. No Vue. No Angular. Just customElements.define() and Shadow DOM. The widgets work everywhere — static sites, WordPress, Next.js, whatever. If the browser supports Web Components (all modern ones do), it works.

Shadow DOM Encapsulation

Every widget uses Shadow DOM, so our styles never leak into your page and your styles never break our widgets. You get clean isolation out of the box.

No API Key Required

The widgets call our proxy endpoint which handles authentication server-side. You don't need to sign up, manage keys, or worry about exposing credentials in your frontend code.

Built-in Caching

Every widget has an in-memory cache with a 5-minute TTL and request deduplication. Drop five widgets on a page — they share cached responses. No redundant API calls.

Zero External Dependencies

The entire widget library is a single vanilla JS file. No npm packages, no bundler required, no polyfills. The font loading (Space Grotesk + JetBrains Mono) is handled internally and only triggers once per page.

Real-World Examples

Financial news site header:

<adanos-ticker-tape theme="dark" source="reddit" limit="20" speed="fast"></adanos-ticker-tape>
Enter fullscreen mode Exit fullscreen mode

Weekly stock roundup blog post:

<adanos-top-movers period="7" limit="10" show-logos="true"></adanos-top-movers>
Enter fullscreen mode Exit fullscreen mode

Single stock analysis article:

<adanos-stock-sentiment ticker="NVDA" show-explanation="true"></adanos-stock-sentiment>
Enter fullscreen mode Exit fullscreen mode

Dark-themed trading dashboard:

<adanos-ticker-tape theme="dark" source="x"></adanos-ticker-tape>
<adanos-top-movers theme="dark" source="x" period="1"></adanos-top-movers>
<adanos-stock-sentiment ticker="AAPL" theme="dark" source="x"></adanos-stock-sentiment>
Enter fullscreen mode Exit fullscreen mode

Try the Live Configurator

We built an interactive configurator where you can tweak every attribute, see a live preview, and copy the embed code:

adanos.org/widgets

Change the theme, data source, number of tickers, time period — the preview updates instantly and the embed code regenerates automatically.

What's Next

We're working on:

  • Custom color theming via CSS custom properties
  • Webhook-triggered updates for real-time push data
  • More data sources beyond Reddit and X

If you have ideas or feature requests, drop a comment below or reach out at adanos.org/contact.

Built by Adanos Software — we build trading intelligence tools for retail investors.

Top comments (0)