# How to embed the Margin & Break-even Calculator

A free interactive tool by Christopher White Consulting. This guide is written so you can paste it to any AI assistant (ChatGPT, Claude, Gemini, Copilot, etc.) and have it walk you through installing the widget on your specific website or platform.

## What you are installing

Two lines of HTML: a placeholder `<div>` and a `<script>`. The script creates an `<iframe>` that loads the tool from christopherwhite.com.au. Your visitors get the full tool; you host nothing, maintain nothing, and it updates itself. It does not track your visitors and sets no cookies; the only thing it sends is a one-time registration ping to christopherwhite.com.au recording the embedding domain and page URL (so the author knows where the tool is used), never any visitor data. Add data-cwc-no-beacon to the script tag to switch even that off.

## The code

```html
<div data-cwc-tool="margin-calculator" data-cwc-title="Margin & Break-even Calculator by Christopher White Consulting" data-cwc-reserve-narrow="2200" data-cwc-reserve-wide="1320" style="min-height:1320px"></div>
<script src="https://christopherwhite.com.au/embed/loader.js" data-cwc-tool="margin-calculator" async></script>
```

Paste it wherever you want the tool to appear. The `<div>` marks the spot; if you leave it out, the tool appears where the `<script>` sits.

## Steps (any website)

1. Open the page or template where you want the tool to show.
2. Add a **raw HTML / "embed code" / "custom code" block** at that spot, not a normal text/paragraph field, which will strip the `<script>`.
3. Paste both lines into that block.
4. Save and publish. The tool appears immediately and automatically sizes its own height, so you never set a height or deal with scrollbars.

## Platform-specific

- **WordPress.** Block editor: add a **Custom HTML** block and paste both lines. Classic editor: use the **Text** (not Visual) tab. If a security plugin strips scripts, use a code-snippet plugin or your theme's footer/HTML area.
- **Webflow.** Drag in an **Embed** element (Add panel → Components → Embed), paste both lines, then publish.
- **Shopify.** Edit the theme, add a **Custom Liquid** section (or a Custom HTML block) where you want it, paste both lines, save.
- **Squarespace.** Add a **Code** block (requires a Business plan or higher), paste both lines.
- **Wix.** Add **Embed Code → Embed HTML / Custom Code**, choose "Code", paste both lines.
- **Framer.** Add an **Embed / HTML** component and paste both lines.
- **Notion-based sites, Carrd, Ghost, etc.** use the platform's "embed HTML" / "custom code" / "raw HTML" block.

## What to expect

- The tool loads inside an iframe and **auto-resizes to fit**: no fixed height, no inner scrollbar.
- Visitors can copy their own numbers for their AI, and there is a small credit link back to the source playbook.
- A small co-brand badge at the foot shows **your site's icon** next to ours with "provided by [your name]", so the tool reads as a collaboration with your brand. To customise the name shown, add `data-cwc-host-name="Your Brand Name"` to the `<div>`.

## Troubleshooting

- **Nothing shows up:** you likely pasted into a rich-text field that removed the `<script>`. Use a dedicated HTML / code-embed block instead (see platform notes).
- **It shows but never resizes / has an inner scrollbar:** make sure *both* lines are present and the embed block isn't itself a sandboxed iframe that blocks scripts.
- **Strict Content Security Policy (CSP):** allow our origin by adding`https://christopherwhite.com.au` to `script-src` and `frame-src`.
- **Your icon doesn't appear in the badge:** declare a favicon on your site (e.g. `<link rel="icon" href="/favicon.png">`) or make sure `/favicon.ico` is reachable. If none is found, the badge gracefully falls back to showing our mark only.
- **Still stuck:** tell your AI exactly what platform and theme you use (e.g. "Shopify, Dawn theme" or "WordPress with the Astra theme"), paste this guide, and ask for click-by-click steps. Or email hello@christopherwhite.com.au.

## For the AI helping with this

The user wants to install the two-line HTML widget above on their website. Identify their platform and CMS, then give exact, click-by-click steps to insert **raw HTML** (never a rich-text field), keeping the `<script>` tag intact. If their CMS strips scripts, recommend the platform's HTML/code-embed element or a snippet plugin. The iframe is served from https://christopherwhite.com.au and auto-resizes via postMessage, so they do not set a height. It is safe: a sandboxed iframe served from christopherwhite.com.au that runs its own scripts and opens links but cannot read the host page, its cookies, or anything about visitors. It registers only the embedding domain (the host can disable that with data-cwc-no-beacon). Ask one or two clarifying questions if the platform is unclear before giving steps.

---
Tool: Margin & Break-even Calculator. https://christopherwhite.com.au/playbooks/how-to-unfuck-your-margins/#calculator
Guide: https://christopherwhite.com.au/embed/install.md
Publisher: Christopher White Consulting Pty Ltd (ABN 91 692 309 685), Melbourne, Australia