Crypto Widgets

Coin Chip Widget

Price chips you can drop into any sentence, row, grid or scrolling ticker.

Demo

Light / dark, variants
Theme
Layout

Integration

Include the script once per page. Use any method below — all render the same widget.

1

Inline chip

The fastest way in: add the script once, then place a chip anywhere in your markup. The price refreshes on its own.

HTML
<!-- 1. Include the script once per page -->
<script src="https://cdn.bubblenexus.com/widgets/v1/coin-widgets.js?v=1.4.1"></script>

<!-- 2. Drop a chip into any sentence or element -->
<p>
  Bitcoin <span data-cw="btc"></span> is trading near its weekly high.
</p>
2

Auto render

Add attributes to the script tag and it renders a widget right after itself — no wrapper element required.

HTML
<script
  src="https://cdn.bubblenexus.com/widgets/v1/coin-widgets.js?v=1.4.1"
  data-coins="btc,eth,sol,ada,xrp"
  data-layout="row"
  data-theme="light"
  data-size="md"
></script>
3

JavaScript API

Full control from JS — pick the target, layout, size and link behaviour programmatically. Call .refresh() to re-fetch prices.

HTML + JS
<div id="coin-chips"></div>

<script src="https://cdn.bubblenexus.com/widgets/v1/coin-widgets.js?v=1.4.1"></script>
<script>
  ChipWidget.init({
    target: "#coin-chips",
    coins: ["btc", "eth", "sol"],
    theme: "light",
    layout: "grid",
    cols: 3,
    size: "md",
    icon: true,
    name: true,
    change: true,
    link: true
  });
</script>

Options

In markup use data-*attributes; in the JavaScript API drop the data- prefix.

AttributeValuesDefaultDescription
data-cwcoin slug or symbol—Coin for an inline chip, e.g. btc, bitcoin or Bitcoin. Only used on inline spans.
data-coinscomma-separated listbtc,ethCoins to display. Accepts slugs, symbols or names: btc,ethereum, Solana.
data-themelight | darklightColour palette used by the widget.
data-layoutinline | row | grid | tickerinlineinline sits inside text, row wraps horizontally, grid uses data-cols columns, ticker scrolls continuously.
data-sizesm | md | lgmdChip font size and padding.
data-cols1–63Column count — only used when data-layout is grid.
data-icontrue | falsetrueShow the coin logo.
data-nametrue | falsetrueShow the full coin name under the symbol.
data-changetrue | falsetrueShow the 24h change pill.