Drop a MixByParts calculator anywhere

Copy a share query, choose your view, and ship a performant embed in minutes. The summary card slides into nav bars, the label card mirrors your download artwork, the result card stays read-only, and the mini calculator lets visitors tweak values on the page—all using our compact layout by default.

Drop-in iframe & one-liner script loaderSummary strip, label card, mini calculator, or read-only result card with locksStatic hosting friendly · Compact spacing baked in · No tracking

Open the widget builder Step-by-step install guide

Need a walkthrough?

Follow the new embed install guide for platform-specific instructions, troubleshooting tips, and ready-to-copy snippets. Summary, label, result, and mini embeds now ship in compact mode by default—no extra parameters required.

Widget builder

Tune the calculator preset, swap themes, and copy ready-made code. The live preview mirrors the exact embed you'll paste into your site.

Live preview

Resizes automatically — copy or open the preset when you're happy.

View full size

Link opens the full calculator with your preset — perfect for QR codes.

Theme

Preset details

Adjust the recipe, container, and rounding. We'll convert everything into share parameters automatically.

Mode: ratio2

Calculator modeMix byContainer sizeContainer unit

All embeds now auto-select per-part display units and rounding based on each part's magnitude. Small volumes show in mL/oz, larger ones in L/gal—no manual setup needed.

Part A labelPart B label

Custom titleCategory tag

Ratio parts

Part APart B

Densities (g/mL)

Density ADensity B

Embed code

Choose iframe or the mbp.js loader.

Iframe snippet

<div style="max-width:560px">
  <iframe src="https://www.mixbyparts.com/widget?m=ratio2&x=volume&u=oz&t=32&r=2dp&ru=oz&ra=1-128&dn=1-1&theme=auto&utm_source={{domain}}&utm_medium=embed" loading="lazy" allow="clipboard-write" title="MixByParts dilution calculator" style="width:100%;min-height:360px;border:0;border-radius:16px;"></iframe>
  <div style="font:12px/1.4 system-ui,sans-serif;margin-top:6px">Free dilution calculator by <a href="https://www.mixbyparts.com" rel="noopener">MixByParts</a></div>
</div>

Script loader

<div style="max-width:560px">
  <div class="mbp-calculator" data-share="m=ratio2&x=volume&u=oz&t=32&r=2dp&ru=oz&ra=1-128&dn=1-1&theme=auto" data-theme="auto" data-utm-source="{{domain}}" data-utm-medium="embed"></div>
  <div style="font:12px/1.4 system-ui,sans-serif;margin-top:6px">Free dilution calculator by <a href="https://www.mixbyparts.com" rel="noopener">MixByParts</a></div>
</div>
<script async src="https://www.mixbyparts.com/embeds/mbp.js"></script>

Summary card

Ultra-compact layout that still shows the total, ratio, and part amounts. Drop it into sidebars, support hubs, or intranets where vertical space is tight.

• Shows pill chips for each part with exact amounts.
• Keeps the “Open full calculator” CTA for advanced tweaks.
• Compact spacing is standard—drop it straight into skinny sidebars.
• Great for nav panels, account dashboards, and resource lists.

Label card

Matches the download label artwork. Add a headline, supporting copy, and optionally render the bottle illustration with legend.

• Chips reveal the container + ratio — tap to edit when unlocked.
• Auto units & rounding mirror the MixByParts label output.
• Optional bottle graphic helps crews visualise the fill order.
• Perfect for SOP hubs, training portals, and print-ready previews.

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.
• Compact layout keeps the recipe tidy without extra parameters.

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.
• Auto-selects part units and rounding per output based on the container unit.

Summary card (ultra-compact)

Squeeze the preset into tight layouts. Use data-type="summary" (or ?view=summary) to render the pill-based strip with totals, ratios, and a link back to the full calculator.

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

<div style="max-width:560px">
  <iframe src="https://www.mixbyparts.com/widget?m=ratio2&x=volume&u=oz&t=32&r=2dp&ru=oz&ra=1-128&dn=1-1&theme=auto&view=summary&utm_source={{domain}}&utm_medium=embed" loading="lazy" title="MixByParts summary dilution card" style="width:100%;min-height:240px;border:0;border-radius:16px;"></iframe>
  <div style="font:12px/1.4 system-ui,sans-serif;margin-top:6px">Free dilution calculator by <a href="https://www.mixbyparts.com" rel="noopener">MixByParts</a></div>
</div>

Label card (download-ready)

Match the MixByParts label download. Pass lh=/ls= copy, toggle the bottle with lb=1, and lock chips when you need a fixed preset.

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

<div style="max-width:560px">
  <iframe src="https://www.mixbyparts.com/widget?m=ratio2&x=volume&u=oz&t=32&r=2dp&ru=oz&ra=1-128&dn=1-1&theme=auto&view=label&lh=Ready%20to%20mix&ls=Auto%20units%20%26%20rounding%20from%20MixByParts&lb=1&utm_source={{domain}}&utm_medium=embed" loading="lazy" title="MixByParts label widget" style="width:100%;min-height:320px;border:0;border-radius:16px;"></iframe>
  <div style="font:12px/1.4 system-ui,sans-serif;margin-top:6px">Free dilution calculator by <a href="https://www.mixbyparts.com" rel="noopener">MixByParts</a></div>
</div>

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.

<div style="max-width:560px">
  <iframe src="https://www.mixbyparts.com/widget?m=ratio2&x=volume&u=oz&t=32&r=2dp&ru=oz&ra=1-128&dn=1-1&theme=auto&utm_source={{domain}}&utm_medium=embed" loading="lazy" title="MixByParts dilution calculator" style="width:100%;min-height:360px;border:0;border-radius:16px;"></iframe>
  <div style="font:12px/1.4 system-ui,sans-serif;margin-top:6px">Free dilution calculator by <a href="https://www.mixbyparts.com" rel="noopener">MixByParts</a></div>
</div>

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. Mini view now auto-selects display units and rounding based on the container unit.

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

<div style="max-width:560px">
  <iframe src="https://www.mixbyparts.com/widget?m=ratio2&x=volume&u=oz&t=32&r=2dp&ru=oz&ra=1-128&dn=1-1&theme=auto&view=mini&lock_ratio=1&utm_source={{domain}}&utm_medium=embed" loading="lazy" title="MixByParts mini dilution calculator" style="width:100%;min-height:360px;border:0;border-radius:16px;"></iframe>
  <div style="font:12px/1.4 system-ui,sans-serif;margin-top:6px">Free dilution calculator by <a href="https://www.mixbyparts.com" rel="noopener">MixByParts</a></div>
</div>

Default preset

Ratio 1:128 in a 32 oz bottle, volume-first, 2-decimal rounding. Swap any data-attribute to create bespoke dilution calculator embeds—append view=summary (or data-type="summary") for the summary strip, view=label for the label widget, or view=mini / data-type="mini" when you want the interactive version.

Preview this 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 + label views.
Rename parts with pl=Wash|Rinse or data-labels="Wash|Rinse" (max 24 characters per label) to match your terminology.
Mini view now auto-picks part units and rounding based on container units—no extra setup needed.
Label view mirrors the download — pass lh=Headline, ls=Supporting, and lb=1 (plus data-label-* equivalents) to customise the chips.

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 summary strip, read-only result card, the label card, and the interactive mini calculator (auto display units + rounding).
lock_ratio	data-lock-ratio	mini + label	0	Set to 1 to disable the parts inputs in mini + label views.
lock_container	data-lock-container	mini + label	0	Set to 1 to disable total volume + unit inputs in mini + label views.
lh	data-label-headline	label	—	Optional heading that appears above the primary label line.
ls	data-label-support	label	—	Supporting text beneath the headline (batch, notes, etc).
lb	data-label-bottle	label	0	Set to 1 to show the bottle illustration + legend.
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	summary + result	none	Round outputs in summary + result views. Mini view always auto-picks rounding per part.
ru	data-result-unit	summary + result	matches unit	Override the display unit for summary + result embeds. Mini view auto-selects per-part units based on the container system.
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?

Summary card squeezes into nav bars when you just need totals and part chips. Label view mirrors the download artwork and adds chip-level editing for presets. 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. Every layout now runs with our compact spacing automatically.

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.