How do I embed an interactive chart in Carrd?
Quick answer
To embed an interactive chart in Carrd, add an Embed element, set Type to Code and Style to Inline, and paste the chart's iframe code. Embeds need Carrd Pro Standard or higher; the Pro Lite plans do not include them. The builder does not render embeds, so publish the site to see the chart, and set the iframe width to 100% with a height that fits a phone screen.
Carrd embeds an interactive chart through its Embed element. Add one, set Type to Code and Style to Inline, paste the chart's iframe code, and publish. Two things catch people out. The element only exists on Pro Standard and higher plans, and the builder never shows what is inside it, so the chart is invisible until the site is live.
Carrd is popular for one-page sites: a newsletter sign-up page, a fund's holding page, a personal site with a few live charts on it. Here is the full route, and how to size the chart so it survives a phone.
Check your plan first
According to Carrd's documentation, the Embed element requires Pro Standard or higher. On Carrd's pricing page as of 30 September 2026, Pro Standard is listed at $19 a year, and the cheaper Pro Lite plans do not include embeds. On the free plan or a Pro Lite plan, the element is not available and no workaround inside Carrd will get an iframe onto the page.
Step by step
In the Carrd builder, add a new element and choose Embed.
Set Type to Code. This is the setting for custom HTML, CSS and JavaScript.
Set Style to Inline. Carrd's docs describe Inline as inserting your code exactly where the element sits on the page, like any other element. The alternative, Hidden, places code in the page's head, at the top of the body or at the end of the body, with nothing visible; it is for scripts, not charts.
Paste the iframe code from your chart tool into the Code field. A typical embed looks like this:
<iframe src="https://charts.example.com/c/abc123" title="10-year Treasury yield, 2026" style="width:100%;height:420px;border:0" loading="lazy"></iframe>
Give the element a Label if you have several, so you can tell them apart in the builder.
Publish the site and open the live address to check the chart.
Why the chart shows as a blank box in the builder
Carrd's documentation is explicit that the Embed element does not output anything in the builder, so you have to publish to see it. This is the most common reason people think the embed is broken. It is not. Publish, then judge.
If the chart is still missing on the live site, the cause is usually one of two browser rules rather than Carrd. An iframe whose address starts with http:// is blocked inside a page served over https://, so use the chart's https address. And some chart hosts forbid being framed by other sites at all, in which case the host's own settings, not your embed code, decide whether it can appear.
Sizing the chart
The embed sits in your page's content column, so the iframe should fill that column rather than set its own width. Set width to 100% and never a fixed pixel width.
Height is the part that breaks on phones. An iframe does not know how tall its content is, so on a narrow screen a chart whose legend wraps onto more lines gets clipped at the bottom. You have three options, in order of effort:
Pick a fixed height that fits the chart at phone width, and accept some white space on a desktop. This is the simplest and it never clips.
If the chart keeps the same shape at every width, replace the fixed height with height:auto and aspect-ratio:16/10 in the iframe's style.
If the chart can report its own height, add a small listener script that resizes the iframe when the chart sends a message. Carrd is one of the platforms where this is possible, because the Embed element accepts script tags. Put the listener in a separate Embed element with Style set to Hidden and the location set to Body End, so it loads once for the whole page.
The third option, and the code for both sides of it, is covered in how to make an iframe chart embed responsive. Test at about 360 pixels wide before you share the page, since that is where most legends wrap.
What about chart widgets and Datawrapper?
Widget services that publish Carrd instructions, such as Common Ninja, use the same Embed element: you paste their script into a Code embed. They are quick for simple bar and pie charts. Datawrapper's embed code also works, and its responsive version includes a script that resizes the chart, which Carrd will run. For most general charts that is a strong free option.
The gap, if your page is about markets, is finance-specific chart types: yield curves, rate-probability ladders, volatility surfaces. That comparison is laid out in Datawrapper alternatives for finance newsletters.
[QUADESTO-EMBED: Carrd one-page site mockup with a full-width embedded US Treasury yield curve, shown at desktop and 360px phone widths]
How Carrd compares to other site builders
The route is close to Framer, Wix and Squarespace: an embed or code block, an iframe, then sizing. What is particular to Carrd is the plan gate on embeds and a builder that shows you nothing until you publish.
Where Quadesto fits
Quadesto charts are shared three ways: an iframe embed, a public link and a static image. On Carrd the iframe goes straight into a Code embed as above.