Embedding.

1 · iframe — works everywhere

The simplest path. Copy, paste, done. No JavaScript on your page, works in WordPress, Notion, Webflow, Ghost, Substack — anywhere HTML embeds are allowed.

<iframe src="https://toolsamurai.com/embed/drones-uav/drone-flight-time-calculator"
        width="100%" height="640"
        frameborder="0"
        style="border:0;display:block"
        title="Drone Flight Time Calculator"></iframe>

Set height to whatever fits — the page scrolls if it overflows. If you want the iframe to auto-fit its content with no scroll bar, use method 2.

2 · Script tag — auto-resize + helpers

Drop one tag per tool plus a single embed.js script anywhere on the page. The script finds every [data-tool] div, injects an iframe, and listens for postMessage height updates so the iframe always fits its content.

<div data-tool="drone-flight-time-calculator"
     data-domain="drones-uav"
     data-theme="auto"></div>

<script src="https://toolsamurai.com/embed.js" async></script>

You can drop multiple tool divs on one page — the script will render all of them. The script also exposes window.ToolSamurai.embed() to re-scan the DOM if you load content dynamically (SPA / React routes).

Customisation reference

All options work as both URL query params (on the iframe src ) and as data-* attributes (on the script-tag container div).

Pre-filling and locking inputs

Pre-filling lets you bake the “starting numbers” for the scenario your article or product is about. Combined with locking, it becomes a white-label widget: visitors can only adjust the inputs that matter for your use case.

<iframe src="https://toolsamurai.com/embed/drones-uav/drone-flight-time-calculator
  ?defaults=auw_grams:680,battery_capacity_mah:1500,battery_cells_s:4
  &lock=auw_grams,battery_capacity_mah
  &theme=light"
  width="100%" height="640" frameborder="0"></iframe>

In this example, auw_grams and battery_capacity_mah are locked at your chosen values — the visitor can only change cells, hover efficiency, flight style, etc.

Embed IDs & analytics

Create embeds from the dashboard so every snippet carries your public Embed ID. That ID connects views, runs, top tools, top referring domains, and countries back to your analytics.

Embed IDs are public — like a Stripe publishable key or a Google Maps key. They identify you, not authenticate you. Anyone who sees your embed code can read the ID. That's fine because:

• The ID is not a credential — it can't call your API.
• You can scope each ID to a specific tool (pinnedToolSlug) so misuse on the wrong tool is rejected.
• You can declare allowed domains; mismatches are flagged in your dashboard for review.
• You can revoke a compromised ID and issue a new one in seconds.

For server-to-server API calls, use a secret API key — never put one in an embed.

postMessage events

The embed posts messages to its parent window so your page can react to resize events. All messages carry source: "toolsamurai-embed" so you can filter cleanly.

window.addEventListener("message", (e) => {
  if (e.data?.source !== "toolsamurai-embed") return;
  if (e.data.type === "resize") {
    // e.data.height — the iframe's current content height
    console.log("Embed grew to", e.data.height, "px");
  }
});

The embed.js helper already wires this up for you — you only need to listen yourself if you wrote your own iframe and skipped the script.

Security & CSP

Embedded tools run inside a separate-origin iframe and can't read anything from your page. If your site uses a strict Content-Security-Policy header, add these directives:

frame-src https://toolsamurai.com;
script-src 'self' https://toolsamurai.com;
connect-src https://toolsamurai.com;

Embeds don't set third-party cookies, don't fingerprint visitors, and don't require local storage on the host domain. The beacon endpoint records only: tool slug, event type, referring domain, and country (from your edge CDN's CF-IPCountry header when present).

Platform-specific examples

WordPress (Gutenberg)

Insert a Custom HTML block and paste the iframe snippet. For the script-tag method, the script must be allowed by your security plugin — most allow scripts from toolsamurai.com by default.

Notion

Type /embed, paste the iframe src URL (not the full iframe tag), set the block height to taste.

Webflow

Add an Embed element from the Add panel and paste the iframe. Webflow respects the iframe's width / height attributes directly.

Ghost

Use the HTML card (/html) and paste either snippet — both work without further configuration.

React / Next.js

<iframe
  src="https://toolsamurai.com/embed/drones-uav/drone-flight-time-calculator?theme=dark"
  width="100%"
  height={640}
  style={{ border: 0, display: "block" }}
  title="Drone Flight Time Calculator"
/>

Limits & not-yet-embeddable tools

• Embed page HTML is cached at the edge — changes to your iframe settings (theme, defaults, etc.) take effect immediately because they're query-string driven.
• The API testing sandbox is not embeddable yet because it needs a browser-fetch UI. Standard calculator and converter tools work through the embed shell.
• The free plan allows up to 20 active embeds per account; revoke an unused one to create another.

Troubleshooting

The iframe shows a scroll bar. Use the script-tag method — pure iframes can't auto-resize cross-origin.

My pre-fill values aren't showing. Check input keys against the tool's schema at /api/v1/{domain}/{slug}/schema — the keys are case-sensitive and use underscores.

I'm not seeing analytics in my dashboard. Make sure ?eid=… is present in the URL, the Embed ID isn't revoked, and the embed isn't pinned to a different tool. Hits show up within a minute.

The embed loads but the run button does nothing. Check your browser console — a blocked postMessage suggests a parent-page CSP that denies frame-src. Add the directives from the Security section above.