Embed on any website

Dashboards, cards and hubs on any page: two lines of HTML where scripts run, a link where they don't. No framework needed

Make a snippet

What to embed

Card

Token

A symbol such as DEGEN, or chain:address

View

Colors

PreviewLive, from /embed.js

Nothing to show yet

Platforms

Where scripts run, the element sizes itself to its content. Link-only hosts frame the embed at the height you set

Platform	Scripts	Paste	Height
HTML	Scripts run	The two lines (the iframe where scripts are removed)	Fits the content
Notion	Link only	The link	As you set it
WordPress	Scripts on some plans	The two lines (the iframe where scripts are removed)	Fits the content
Framer	In the HTML type	The link (URL type), or the two lines (HTML type)	As you set it
Webflow	Scripts run	The two lines (the iframe where scripts are removed)	Fits the content
Squarespace	Scripts on some plans	The two lines (the iframe where scripts are removed)	Fits the content
Wix	In a frame of fixed size	The link	As you set it

Elements

Load the script once per page; it defines three elements

<script src="https://blocktronics.xyz/embed.js" async></script>

<blocktronics-dashboard src="https://blocktronics.xyz/d#…" header></blocktronics-dashboard>
<blocktronics-card card="netflow" token="DEGEN" view="calendar" theme="dark"></blocktronics-card>
<blocktronics-hub hub="https://blocktronics.xyz/hub#…"></blocktronics-hub>

<blocktronics-dashboard>: One of spec (an encoded spec, or the spec as JSON), src (a /d, /s, /embed or /hub/d link from this site), dashboard-id (a saved dashboard's share code, so the embed follows its saves) or hub with dashboard-id as the slug of one of the hub's dashboards. Changing spec updates the dashboard in place.
<blocktronics-card>: card (an id, such as netflow or market-treemap), token (DEGEN, base:DEGEN or an address), chain, view, palette (green or blue for the cards with buy and sell colours) and params for a market card's settings, as metric=mcap&limit=20.
<blocktronics-hub>: hub: the encoded hub or its /hub link.

On every element

themelightdarkauto: Overrides the embed's own mode. auto follows the visitor's light or dark setting on your page and switches in place when it changes. Unset, the dashboard keeps its own.
height: A fixed height in px, or fill to fill the element's box (the embed scrolls inside it). Unset, the element grows to fit its content.
header: Shows the title row: name, data date and tokens. Dashboards and hubs.
transparent: No page background behind the cards.
data-key: An embed key (btpk_…) that locks the embed to the sites you name. On any other site the element shows a note and fires bt-error, and the server refuses the frame too.
loadinglazy: Embeds load as they come within 400px of the screen. eager loads at once.
reduced-motion: Chart entrances and transitions off. Visitors who ask for less motion get it anyway.
title: The frame's accessible name. Defaults to the dashboard's title.
origin: The Blocktronics site to frame. Defaults to the site the script came from; set it only when you host a copy of the script.

Events

DOM events on the element, from the embed's messages. Only messages from this site's frame, and from the element's own frame, are read

const card = document.querySelector("blocktronics-card");
card.addEventListener("bt-ready", (e) => console.log(e.detail.title, e.detail.cards));
card.addEventListener("bt-card-click", (e) => console.log(e.detail.card, e.detail.token));
card.addEventListener("bt-error", (e) => console.warn(e.detail.reason));

// They bubble out of the element, so one listener can watch the page.
document.addEventListener("bt-resize", (e) => console.log(e.target.id, e.detail.height));

bt-ready: { title, cards } once the embed has rendered. Cards may still be loading their data.
bt-resize: { height } whenever the content height changes.
bt-card-click: { key, card, index, token, view, params, interactive }; interactive is true when the click hit a control or link inside the card.
bt-error: { reason }: invalid-attributes, missing-source, foreign-link, invalid-key, origin-not-allowed, revoked, unknown-key, or invalid-spec from the embed.

Without the script

Every embed is also a page, for hosts that frame a link and run nothing else

https://blocktronics.xyz/embed?card=netflow&token=DEGEN            one card (a token card takes token, chain, view, palette)
https://blocktronics.xyz/embed?card=market-treemap&chain=base       a market card and its settings
https://blocktronics.xyz/embed?s=<code>                             a saved dashboard's live link: always the latest save
https://blocktronics.xyz/embed#<spec>                               a dashboard in the link
https://blocktronics.xyz/embed?hub=<slug>#<hub>                     one of a hub's dashboards
https://blocktronics.xyz/hub/embed#<hub>                            a hub
…&mode=light|dark|auto  &header=1  &bg=transparent

Size, caching and security

Size: 4.9 KB gzipped, no dependencies. It does nothing where custom elements don't exist, so server rendering is safe.
Caching: /embed@0.1.0.js never changes and is cached for a year; the snippets name it with its Subresource Integrity hash. /embed.js is always the latest and is cached for five minutes. .mjs for the module build.
Content Security Policy: A page that sets one needs script-src and frame-src for this site, plus connect-src for keyed embeds (the element checks the key before framing).
Frames: Only this site's /embed and /hub/embed are framed; a link to anywhere else is refused. The frame is sandboxed: scripts, popups and downloads, no navigating your page. Links inside open in a new tab.
Messages: Read only from this site's origin and the element's own frame. The embed posts only to your page's origin.
Code: No eval, no HTML from attributes: every value is checked before it reaches the frame's link.

Build a dashboardThen Share → Website React SDKThe same embeds as React components