Making a calculator other sites can embed, on a fully static site

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.

The 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.

There 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.

Embedding 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.

The 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.

Credit 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.