Drop a MixByParts calculator anywhere

Copy a share query, choose your view, and ship a performant embed in minutes. Result view keeps recipes read-only, while the mini calculator lets visitors tweak values on the page.

Drop-in iframe & one-liner script loaderResult card or mini calculator with locksStatic hosting friendly · No tracking · 7 KB

Result view

Ships a compact breakdown card – perfect for SDS callouts, training docs, and QR label previews. Every value comes from your preset, and CTAs link back to the full calculator.

• Auto-resizes via postMessage so you can drop it into any layout.
• Mirrors the share link – regenerate on mixbyparts.com/embed for new recipes.
• No visitor inputs, ideal for compliance-sensitive mixes.

Mini calculator

Adds lightweight controls for total volume, units, and ratio parts. Keep what matters editable, lock the rest, and still send curious users to the full calculator for labels.

• Append view=mini or use data-type="mini" to flip the layout.
• Lock parts or container independently with lock_ratio / lock_container.
• PPM mode stays read-only – open the main calculator for those recipes.

Result view (read-only)

Drop in a preset share link and show the final breakdown. Perfect for SDS callouts, recipe cards, and QR labels that should not be edited on-site.

Best for CMS blocks and quick embeds. Keep the inline styles for rounded corners and responsive width.

<iframe src="https://www.mixbyparts.com/widget?m=ratio2&x=volume&u=oz&t=32&r=none&ru=oz&ra=1-128&dn=1-1&theme=auto" loading="lazy" title="MixByParts dilution calculator" style="width:100%;min-height:360px;border:0;border-radius:16px;"></iframe>

Mini calculator (interactive)

Let visitors tweak totals or parts without leaving your page. Use data-type="mini" (or ?view=mini), lock ratio/container when you need to keep fields fixed, and pass pl=Wash|Rinse (or data-labels) to rename each part.

Best for CMS blocks and quick embeds. Keep the inline styles for rounded corners and responsive width.

<iframe src="https://www.mixbyparts.com/widget?m=ratio2&x=volume&u=oz&t=32&r=none&ru=oz&ra=1-128&dn=1-1&theme=auto&view=mini&lock_ratio=1" loading="lazy" title="MixByParts mini dilution calculator" style="width:100%;min-height:380px;border:0;border-radius:16px;"></iframe>

Default preset

Ratio 1:128 in a 32 oz bottle, volume-first, no rounding. Swap any data-attribute to create bespoke dilution calculator embeds, then append view=mini (or add data-type="mini") when you want the interactive version.

Open widget preset

Lock the ratio with lock_ratio=1 or data-lock-ratio="1" when you only want visitors to tweak container size.
Freeze the container with lock_container=1 or data-lock-container="1" so only the parts fields stay editable in mini view.
Rename parts with pl=Wash|Rinse or data-labels="Wash|Rinse" (max 24 characters per label) to match your terminology.

Embed parameter reference

Swap between query params (for iframes) or data-* attributes (for the mbp.js loader). Every option below maps 1:1 so you can move between implementations without relearning the API.

Query param	Data attribute	Scope	Default	Details
view	data-type	all embeds	result	Switch between the read-only "result" card and the interactive "mini" calculator.
lock_ratio	data-lock-ratio	mini	0	Set to 1 to disable the parts inputs in mini view.
lock_container	data-lock-container	mini	0	Set to 1 to disable total volume + unit inputs in mini view.
mrequired	data-mode	all embeds	ratio2	Calculator logic – choose ratio2, ratio3, or ppm.
trequired	data-total	all embeds	32 (or 5 for ppm)	Container size or batch total (number only).
urequired	data-unit	all embeds	oz	Volume unit for totals (mL, L, oz, gal).
x	data-mix-by	all embeds	volume	Choose volume or weight output. Weight converts using per-part densities.
r	data-rounding	all embeds	none	Round outputs: none, 0.5mL, 1mL, 0.25oz, 1tsp, 1/8cup.
ru	data-result-unit	all embeds	matches unit	Override the display unit inside the widget (falls back to data-unit).
theme	data-theme	all embeds	auto	Theme selection – light, dark, or auto (prefers-color-scheme).
ti	data-title	all embeds	MixByParts dilution calculator	Optional heading override for the widget card.
ca	data-category	all embeds	—	Tag the mix (e.g. bleach) to surface relevant safety notes.
ra	data-ratio	ratio modes	1:128 (ratio2) or 4:1:1 (ratio3)	Parts for ratio modes. Use colon or hyphen separated values.
dn	data-densities / data-density1…	ratio modes	1 for each part	Per-part densities in g/mL. Accepts shorthand like data-densities="1-1".
pl	data-labels / data-label1…	ratio modes	Part A · Part B (Part C)	Override part names (separate values with \| or use data-label1, data-label2…). Each label is trimmed to 24 characters.
pp	data-ppm	ppm	1000	Target parts-per-million. Ignored for ratio modes.
de	data-density	ppm	1	Solute density (g/mL) used to convert ppm to volume.
sc	data-source-pct	ppm	100	Percent strength of the source stock used in ppm mode.
share	data-share	advanced	m=ratio2&…	Advanced: pass the raw MixByParts share query to bypass every other attribute.

FAQ

Result or mini — which embed should I use?

Result view is read-only and perfect for recipe cards or SDS callouts. Mini lets visitors tweak container size or parts inline—add data-type="mini" (or ?view=mini) and lock fields with data-lock-ratio / data-lock-container when you need to keep a preset.

Can I prefill it?

Yes. Set ratio=, container volume via data-total, pick data-unit, and pass densities or ppm values as data attributes. The widget mirrors the full calculator.

Will it slow my page?

No. The embed is lazy-loaded, a single 7 KB request, and ships no trackers. Everything is static-friendly for Cloudflare Pages.

Can I theme it?

Use theme=light, theme=dark, or theme=auto. Auto listens to prefers-color-scheme, so the dilution calculator widget blends into your site.

Is it really free?

Yes—always free and ad-free. Please keep the tiny “Powered by MixByParts” link inside the widget so visitors know where the calculator lives.

Brand guidelines

✔ Keep the “Powered by MixByParts” link visible inside the widget.
✔ Use system fonts or inherit your stack; the embed avoids custom fonts to protect PSI scores.
✔ Do not inject additional scripts inside the iframe—CSP locks scripts and styles to mixbyparts.com.
✔ Need a custom color accent? Wrap the iframe with your styles—the widget picks up theme=light|dark|auto automatically.