← Volumine

Webflow

3D charts in Webflow

On a marketing site the chart is decoration with a job: it has to look expensive and it must not cost you the page speed you spent a week earning. A charting library pulls hundreds of kilobytes of JavaScript into your bundle. This is one iframe that loads one file and nothing else, and it is not in your bundle at all.

Live, running in Webflow the same way it runs here. Drag it.

Open this chart in the editorChange the numbers, copy your link. No account needed.

How to put it in Webflow

  1. 1

    Copy the link from the editor

    Build the chart at volumine.app/crear and press Copy link — or press the small iframe button next to it, which copies the whole tag ready to paste.

  2. 2

    Drop in an Embed element

    In the Webflow designer, Add panel → Components → Embed. Paste the iframe tag into the code box and save. The chart renders straight away in the designer, not only on the published site.

  3. 3

    Let it size itself

    Set the Embed element to 100% width and give it a fixed height, or wrap it in a div with an aspect ratio. The chart fills whatever box it is given and re-renders when the box changes, so it handles breakpoints without extra work.

The chart above, ready to paste

This is the exact tag for the chart you just dragged. It works anywhere that accepts HTML; the steps above are for editors that want a URL instead.

<iframe
  src="https://volumine.app/embed?c=N4IgbiBcCMA0IBcCeAHAplEKCWH4IAs0BbDSEAQwFcAnAexopHgBMKEnJQAbCgIzTcAzlADaIAPI0A5hQB22AMbMQAEWw00ihCoBKaAGZoajbioDKdRdgpn4AUWIVsZgLrwhx3CMijQYWyo0H1EAFlDYACYAZlhoAFY4uAB2VwBfdI9FNDkyUD4KRQBraXoqORYoUCLsCswERjkhFApNOR00tPheAWEqkCECOgB3KAag+GI6FjIQOioEIWwZlUGRgDVA4LGaCYGh4YAFY2z2naCukCmEbDo5fuoEOl06DgQycbQPdDRKyGjOkA"
  width="100%"
  height="420"
  style="border:0"
  loading="lazy"
  title="Where the traffic came from"
></iframe>

Height is the only thing worth changing: the chart fits the width on its own, but it cannot guess how tall you want it.

What it costs the page

This is usually what decides whether you are allowed to embed something, so here are the numbers rather than adjectives:

Weight

148 KBThe whole 3D viewer, compressed.

Requests

1One file. Nothing else.

Cookies

0It does not track whoever sees it.

Third parties

0It calls no external server.

That is why an embedded chart adds no obligations to the privacy policy of the page you put it on. It is a constraint of the design, measured on every build — not a marketing promise.

What it will not do

  • Webflow Embed elements do not render in the designer preview on the free plan in some cases. Publish to a staging domain to see it.
  • The chart is an iframe, so it will not inherit your site fonts. Pick the chart typeface in the editor instead.
  • It needs WebGL. On a device without it the embed falls back to a static image of the same chart rather than an empty box.

Somewhere else?

If it accepts a link or an <iframe>, it accepts this.

Make yours

Paste your own numbers, pick a theme, copy the link. It takes about a minute and you do not need an account for any of it.

Open the editor

How it works · All integrations · Pricing