How to embed a Plainso calculator and customise it to match your site

Embedding takes less than a minute

Every Plainso tool has an embed section on its page. Open any tool — a profit margin calculator, a project quote estimator, a freelancer rate calculator — scroll to "Embed this tool," and copy the snippet.

<iframe
  src="https://plainso.com/embed/profit-margin"
  width="100%"
  height="600"
  style="border:0;border-radius:12px;"
  loading="lazy"
  title="Plainso calculator"
></iframe>

Paste it into WordPress, Shopify, Webflow, Squarespace, or a plain HTML page. There are no API keys, no accounts, and nothing to configure — the widget renders, computes in the visitor's browser, and requires zero maintenance.

Choosing the theme

The embed follows your visitor's system theme by default. On a page where most visitors use light mode, the widget renders light; on a dark-mode site, it renders dark.

That automatic behaviour is right for most sites, but you can also pin a theme so the widget always matches your design:

Option	Result
?theme=auto (default)	Follows the visitor's OS preference
?theme=light	Always light
?theme=dark	Always dark

<iframe
  src="https://plainso.com/embed/profit-margin?theme=light"
  width="100%"
  height="600"
  style="border:0"
  title="Plainso calculator"
></iframe>

If your site has its own theme toggle, you can wire the embed to it. Most sites expose the current theme on the documentElement — often a dark class — so you can build the URL dynamically:

<iframe
  src="https://plainso.com/embed/profit-margin?theme=dark"
  width="100%"
  height="600"
  style="border:0"
  title="Plainso calculator"
></iframe>

The principle is simple: whatever expression your site uses to know its theme, use it to set ?theme=.

Sizing: width, height, and responsiveness

The embed is a normal iframe, so it inherits standard iframe sizing.

• Width — width="100%" makes the widget fill its container and stay responsive on mobile. That is the setting we recommend.
• Height — height="600" fits most calculators. If you use a tool with many inputs, increase it to 700 or 720. If the widget gets cut off, raise the height.

<iframe
  src="https://plainso.com/embed/loan-emi?theme=light"
  width="100%"
  height="700"
  style="border:0;width:100%;max-width:480px;display:block;margin:0 auto;"
  title="Plainso calculator"
></iframe>

For a centred, column-width widget — common on blog posts — wrap the iframe in a container with a max width. The widget adapts to whatever space you give it.

Corners, borders, and shadows

The embed ships with rounded corners. You can adjust the radius to match your site:

<iframe
  src="https://plainso.com/embed/profit-margin"
  width="100%"
  height="600"
  style="border:0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.08);"
  title="Plainso calculator"
></iframe>

• border-radius — 8px for a subtle corner, 0 for square corners, or a larger value for a pill-like look.
• box-shadow — add depth so the widget lifts off the page, like a card.
• border — set border:1px solid #eee if you want a visible outline.

What about colours and fonts?

The widget uses the theme you choose (light or dark), and its colours are tuned to be legible in both. If you want the widget to blend into a strongly branded page, the practical lever is the theme — a light site with warm tones pairs best with ?theme=light, and a dark site with ?theme=dark.

The widget's typography is designed to match the site's system fonts, so it reads consistently on both desktop and mobile. The font is inherited from the visitor's operating system, which keeps the widget fast (no font files to download) and avoids jarring mismatches.

We deliberately don't support arbitrary per-pixel colour overrides: it keeps every embed fast, consistent, and free to maintain. The theme switch is the supported way to match your brand.

The 'Powered by Plainso' link

Every embed carries a small "Powered by Plainso" link in the footer. It's how the tools stay free. If someone clicks it, they land on Plainso with attribution that tells us which site the embed came from — which helps us keep building free tools.

Putting it together

A complete, responsive, light-themed embed that matches a centred blog layout:

<div style="max-width:520px;margin:2rem auto;">
  <iframe
    src="https://plainso.com/embed/profit-margin?theme=light"
    width="100%"
    height="640"
    style="border:0;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.08);"
    loading="lazy"
    title="Plainso calculator"
  ></iframe>
</div>

That is the whole story: pick a theme, size the iframe, round the corners if you like, and paste it in. Your visitors get a working calculator, and your page stays exactly on-brand.