How to Embed an Interactive Gantt Chart in Your Blog (Iframe Guide)

The simplest way to put an interactive Gantt chart in your blog post is a single iframe tag. Your readers get the full builder, you get a polished embed that updates itself. Here's the exact code and platform-specific notes.

-->

The recommended method — iframe embed

The GanttBuilder tool runs as a live page on this site. You don't need to download it, host it, or maintain it — you just embed it. One tag in your post and your readers get the full interactive tool.

Paste this into your blog post (switch to HTML editing mode first):

<iframe
  src="https://aistory.antlog.kr/p/gantt-builder-tool.html"
  width="100%"
  height="900"
  style="border: 1px solid #DDD; border-radius: 8px;"
  loading="lazy"
  title="Gantt Chart Builder">
</iframe>

That's the entire setup. Adjust height based on how tall you want the embed (usually 700-1000 px).

Why iframe is the right choice

Always up to date. When the tool improves, your embed improves with it. No re-uploading.
Zero maintenance on your side. No files to host. No JavaScript to debug.
Complete CSS isolation. Your blog's theme can't break the tool, and the tool can't bleed into your page.
Privacy-friendly. The tool runs in your reader's browser; their data stays there. Same privacy model as if they visited our site directly.
Mobile-responsive. The tool adapts to the iframe width automatically.

Live example

Here's the iframe in action. Click anywhere, load the sample, and try editing — it's the real tool, not a screenshot:

-->

Platform-specific instructions

Blogger

Switch to HTML view (not Compose) before pasting iframes. Blogger occasionally strips attributes from Compose mode.

iframes: work fine in HTML view
Save and preview: confirm the iframe renders before publishing
Mobile: Blogger themes adapt automatically; the iframe's width="100%" handles it

WordPress

In the Gutenberg editor:

Insert a Custom HTML block
Paste the iframe tag
Click Preview to verify

If a security plugin (Wordfence, Sucuri) blocks external iframes, whitelist aistory.antlog.kr.

Medium

Medium does NOT support inline iframes in regular posts. The workaround: paste the tool URL on its own line. Medium will render a preview card for the link. Readers click through to use the tool.

Notion

Type /embed on a new line
Paste the tool URL
Notion renders the iframe automatically

Substack / Ghost

Both support iframes via custom HTML blocks. Use the same iframe code as the Blogger example.

Squarespace, Wix, Webflow

All support iframe embeds through their "Embed" or "HTML" block. Paste the iframe code as-is.

Static image fallback

If your platform doesn't allow iframes (some restricted CMSes, RSS readers, internal wikis), use a screenshot instead:

Open the tool, configure your project
Use a full-page screenshot tool (Chrome DevTools "Capture full size screenshot", Firefox "Save full page", or browser extensions like GoFullPage)
Save as PNG
Upload to your blog as a regular image
Link the image back to the tool URL so readers can interact with the live version

Example HTML:

<a href="https://aistory.antlog.kr/p/gantt-builder-tool.html">
  <img src="gantt-screenshot.png" alt="Project schedule built with GanttBuilder" style="width: 100%;">
</a>
<p><em><a href="https://aistory.antlog.kr/p/gantt-builder-tool.html">Try the live version →</a></em></p>

Tips for great embeds

1. Set an honest height

If your chart is taller than the iframe, readers see scrollbars. Measure your chart's natural height and set the iframe accordingly. 720-900 px works for most schedules under 30 tasks.

2. Wrap in a styled container

<div style="margin: 24px 0; border: 1px solid #DDD; border-radius: 8px; overflow: hidden;">
  <iframe ...></iframe>
</div>

Adds visual separation from surrounding content.

3. Add lazy loading

loading="lazy" means the iframe only loads when the reader scrolls to it. Faster page load, less mobile data.

4. Provide a fallback link

Some readers (RSS, accessibility tools, print) can't render iframes. Below the embed, add: <p><a href="...">Open the full tool in a new tab →</a></p>

5. Don't embed an empty tool

If your reader sees a blank chart, they might think the page is broken. Use the tool's CSV-load feature: have a "Load this sample" button next to the iframe that triggers a CSV import via URL params. (Currently manual; on the GanttBuilder roadmap.)

Why we don't recommend downloading the source

Some Gantt tools encourage you to download an HTML file and host it yourself. We deliberately don't, because:

It freezes the version. Bug fixes and new features don't reach your readers.
You take on maintenance. Hosting, updates, broken-link fixes are your problem.
Your blog's CSS often breaks the tool. Isolation via iframe avoids this entirely.
Privacy is unchanged. The tool runs in your reader's browser either way — there's no server-side data to "own."

iframe embed gives you all the upsides of self-hosting with none of the maintenance cost. It's the right default for 99% of blogs.

Don't over-embed

If your post has 5 different Gantt charts, embedding 5 iframes will slow the page load even with lazy loading. Use one or two interactive embeds for the key examples, and static screenshots for the rest.

-->

Quick reference

Copy and paste:

<div style="margin: 24px 0; border: 1px solid #DDD; border-radius: 8px; overflow: hidden;">
  <iframe
    src="https://aistory.antlog.kr/p/gantt-builder-tool.html"
    width="100%"
    height="800"
    style="border: 0; display: block;"
    loading="lazy"
    title="Gantt Chart Builder">
  </iframe>
</div>
<p><em><a href="https://aistory.antlog.kr/p/gantt-builder-tool.html">Open the full tool in a new tab →</a></em></p>

Try the tool →

이 블로그 검색

Gantt Chart, Project Management, AI Automation