{
  "id": 20095469,
  "title": "Making a calculator other sites can embed, on a fully static site",
  "url": "https://urgent.news/2026/11/15/making-a-calculator-other-sites-can-embed-on-a-fully-static-site",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-15T01:49:39.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/paidandfiled/making-a-calculator-other-sites-can-embed-on-a-fully-static-site-316h"
  },
  "original_language": "en",
  "account": "I operate a modest site for freelancers called Paid & Filed. One of its most valuable pages is a complimentary 1099 tax calculator that calculates quarterly estimated tax. Various bloggers, coworking spaces, and accountants who write for freelancers consistently requested embedding this calculator on their own web pages. Consequently, I created a feature enabling embedding.\n\nThe embed capability consists of a secondary route. The calculator is encapsulated within a single React component. The embed-friendly version is a distinct route, /embed/quarterly-tax-calculator/. This version excludes the site header, footer, and analytics tracking. The React component rendering the calculator is exported as a default function.\n\nThere are two key design choices involved. Firstly, the embed route is marked as noindex. This directive is enforced both in the page metadata and as an X-Robots-Tag header for /embed/* paths. This ensures that search engines direct users to the full calculator page instead of a condensed duplicate. The follow directive remains active for links contained within the embedded calculator, enabling them to contribute to SEO. Second, analytics tracking and ad networks are disabled on embed routes via a layout check. This prevents the inclusion of third-party tracking code on the host page when a user embeds the calculator.\n\nEmbedding the calculator presents challenges since iframes do not dynamically adjust their height to accommodate their content. A fixed height either obscures the results or leaves an empty space, which becomes problematic as the calculator reveals additional sections. To address this, the embedded page reports its height to the parent page whenever it changes. The EmbedHeight component measures the height of the main content area within the iframe, rather than the entire document body. This ensures that the parent page can expand but never contract based on the iframe's content.\n\nThe parent page includes a simple script to handle the height adjustment. This script listens for messages sent from the embedded calculator and updates the height of any matching iframes based on the received height value. The origin of the message is verified to ensure that only the genuine calculator can adjust the height, thereby preventing manipulation by other frames on the same page. The script is optional; without it, the iframe retains its fixed height, albeit with potential scrolling issues. This script is essential as many content management systems strip script tags from published content, making it necessary for the fallback functionality to work.\n\nCredit is given to the calculator provider through a plain link beneath the iframe. This credit link serves as a simple hyperlink in the host page, crediting the tool by name. It's worth noting that there is a temptation to format the credit text as bold or highlighted, but doing so could detract from the calculator's display and result in a less user-friendly experience. The primary focus should always be on providing a seamless and functional embedding experience for end-users.",
  "summary": "I run a small site for freelancers, Paid & Filed , and its most useful page is a free 1099 tax calculator that works out quarterly estimated tax. Bloggers, coworking spaces and accountants who write for freelancers kept wanting to put it on their own pages, so I made it embeddable. The site is a static Next.js export served from a Cloudflare Worker: no backend, no API keys, no per-site accounts.…",
  "key_points": [
    "Calculator embedded via React component",
    "Embed route excludes header, footer, analytics",
    "Height adjustment script for seamless display"
  ],
  "editors_take": "Turning a single React component into an embeddable tool allows niche sites to extend their utility across the web while protecting SEO and user privacy through strategic routing.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}