How to embed a chart anywhere

Two lines of HTML. Works in blogs, docs, and CMSes.

After publishing, the chart page shows an Embed card with a copy-paste snippet. Drop it into any HTML page and you're done.

1Copy the snippet
It's two tags:
```
<chart-saas-chart slug="abc12345"></chart-saas-chart>
<script src="https://chart.d1.tel/embed.js" async></script>
```
Tip: The script is safe to include once per page, even if you embed multiple charts.
2Paste into your page
WordPress: in a Custom HTML block.
Ghost: in an HTML card.
Substack: currently strips custom elements — use the PNG instead.
Notion: as an embed on notion.so (paste the chart URL, not the snippet).
Docusaurus / Nextra: any MDX file works.
3(Optional) Theme per-host
Override colors with attributes on the element:
```
<chart-saas-chart
  slug="abc12345"
  primary="#ff0066"
  background="#0f172a"
  foreground="#e2e8f0"
></chart-saas-chart>
```
These override the chart's saved theme for this embed only.
4(Optional) Remove the attribution
Free embeds include a small "Made with Chart SaaS" link. Pro accounts can white-label individual charts (set whiteLabel: true on the chart).

Troubleshooting

›The chart doesn’t show up

Your host is probably stripping custom elements. Open the page source and look for <chart-saas-chart>. If it's gone, use the PNG export instead.

›The chart's fonts look different from my site

That's the whole point — Shadow DOM keeps our fonts from clashing with yours. If you want to match, pass `foreground` and matching brand colors via attributes.

Ready to try it?

Get started — free

Keep going

How to publish and share a chart

One click to a shareable URL.

How to build a dashboard

Pin charts into a single shareable page.

How to chat your way to a chart

No chart-type picker. Just describe what you want.

1Copy the snippet

2Paste into your page