MixByParts

Add the MixByParts widget to your site

Start in the widget builder, copy the embed code, and paste it into your platform of choice. This guide keeps every step skimmable—plus quick fixes if an iframe gets blocked or stripped.

Launch the widget builderView full-size demo

Quick start: build, copy, paste

  1. Open the widget builder and dial in your recipe. Pick summary, result, or mini view, lock ratio/container fields if visitors shouldn't edit them, and remember every layout now ships in compact mode automatically.
  2. Use the copy buttons under iframe or mbp.js snippets. Every preset you make in the builder mirrors the code shown here.
  3. Click View full size to open the widget in its own tab. Keep this handy so you can compare styling while pasting the code into your CMS.
  4. Paste into your site using a Custom HTML/Code block (or Custom liquid section on Shopify). Publish or preview to confirm everything renders.

Copy-paste snippets

These snippets mirror the builder defaults. Pick the summary strip when you need a low-profile card, stick with the result view for read-only recipes, or switch to the mini calculator for editable inputs. Compact spacing is automatic on every view—just replace {{domain}} with your site domain for cleaner analytics.

Summary card (iframe)

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

Summary card (mbp.js loader)

<div style="max-width:560px">
  <div class="mbp-calculator" data-type="summary" data-share="m=ratio2&x=volume&u=oz&t=32&r=2dp&ru=oz&ra=1-128&dn=1-1&theme=auto&view=summary" 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>

Result card (iframe)

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

Result card (mbp.js 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>

Mini calculator (iframe)

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

Mini calculator (mbp.js loader)

<div style="max-width:560px">
  <div class="mbp-calculator" data-type="mini" data-share="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" 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>

No-credit iframe

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

If you remove the inline credit, please add a small text link to MixByParts elsewhere on the page so visitors know where the calculator lives.

Height cheat sheet

  • • Summary card: 200–240px is plenty thanks to the baked-in compact layout.
  • • Result card: 360–420px keeps the full recipe visible without extra tweaking.
  • • Mini view: start at ~420px, then trim down after you lock fields or switch units.

Allow embedding on your domain

  • • Do not send X-Frame-Options: DENY or SAMEORIGIN.
  • • If you use Content Security Policy, include frame-ancestors https://www.mixbyparts.com or an allowlist that includes it.
  • • Always embed over HTTPS—some builders block non-secure iframes.

Platform quick guides

Follow the clicks, paste locations, and gotchas for the platforms we see most often. Each one includes a quick test so you can confirm the widget renders before launch.

WordPress (self-hosted + WooCommerce)

  • • Block editor (Gutenberg): Pages → + → Custom HTML → paste the iframe → Preview.
  • • Classic editor: switch to the Text (HTML) tab before you paste the code.
  • • Sidebars/footers: Appearance → Widgets → Custom HTML widget → paste.

Height

Summary ≈220px. Result ≈360–420px. Mini ≈420px baseline (compact layout is automatic).

Gotcha

Security plugins (e.g., Wordfence) and WordPress.com’s stricter plans can strip iframes. If it disappears, paste using a Custom HTML block and whitelist iframe embeds.

Test

Use the View full size button in the builder to compare your live page to the MixByParts demo.

Success check

You should see the calculator immediately without needing to open the theme editor preview.

Shopify (Online Store 2.0)

  • • Pages & blogs: Online Store → Pages/Blog posts → edit → click the <> HTML button → paste the iframe.
  • • Product templates: Online Store → Themes → Customize → add a Custom liquid section → paste the iframe or the mbp.js snippet inside it.

Height

Summary ≈220px. Result ≈360–420px. Mini ≈420px baseline (compact layout is automatic).

Gotcha

Rich-text areas sanitize iframes. If the code vanishes, move it into a Custom liquid section or a standalone Page and link to it.

Test

Preview with View full size from the builder and match the height/spacing in your theme preview.

Success check

The calculator should render inside the theme editor without toggling to Preview mode.

Wix

  • • Editor: Add (+) → Embed Code → Embed HTML → paste the iframe.
  • • Set width to 100% and height around 420px (or ~360px on tighter layouts) and toggle “Stretch to full width”.

Height

Summary ≈220px. Result ≈360–420px depending on layout. Mini ≈420px baseline; trim after locking fields.

Gotcha

Check the mobile editor—Wix may crop the iframe. Manually adjust the height if it looks clipped.

Test

Compare with the builder’s View full size demo on desktop and mobile.

Success check

You should see the calculator live on desktop without needing to publish first.

Squarespace (7.1)

  • • Page editor: Add Block → Code → paste the iframe.
  • • Set Display Source to HTML so the markup renders instead of showing as text.

Height

Summary ≈220px. Result ≈360–420px. Mini ≈420px baseline with compact spacing.

Gotcha

Some templates hide overflow. If you see clipping, set the block to full width or drop the height a bit.

Test

Use View full size from the builder as your reference and adjust height to match.

Success check

The calculator should appear inside the editor as soon as you exit the Code block.

Webflow

  • • Designer: Add → Embed → paste the iframe → Save & Close.
  • • For CMS Rich Text, insert an Embed inside the rich text element using the “Add custom code” option.

Height

Summary ≈220px. Result ≈360–420px. Mini ≈420px baseline (auto compact).

Gotcha

Some strict CSS caps the width—wrap the embed in a div with max-width:560px if needed.

Test

Publish to staging and compare with View full size from the builder.

Success check

The staging publish should show the widget instantly without extra scripts.

Ghost

  • • Editor: click + → HTML card → paste the iframe snippet.
  • • Wrap in a container (max-width:560px) if your theme has very wide content blocks.

Height

Summary ≈220px. Result ≈360–420px. Mini ≈420px baseline with compact spacing.

Gotcha

Themes with aggressive CSS may cap width—add a wrapper div to control it.

Test

Preview the post and compare to the MixByParts View full size demo.

Success check

You should see the calculator in the editor preview before publishing.

Weebly

  • • Build tab: drag “Embed Code” element into the page → click “Edit Custom HTML” → paste the iframe.

Height

Summary ≈220px. Result ≈360–420px. Mini ≈420px baseline before trimming.

Gotcha

If the embed looks cropped, open Advanced → Spacing and add a little padding.

Test

Use View full size from the builder as your baseline when adjusting spacing.

Success check

You should see the calculator in the live builder without publishing.

Blogger

  • • Post editor: switch to HTML view → paste the iframe → switch back to compose to preview.

Height

Summary ≈220px. Result ≈360–420px. Mini ≈420px baseline; reduce after locking fields.

Gotcha

Blogger may strip code in Compose view—always paste in HTML view and avoid re-editing in Compose.

Test

Compare the live preview against the View full size demo.

Success check

The calculator should appear in the preview immediately after saving.

Troubleshooting

  • • If the iframe disappears after saving, your platform sanitized it. Paste it inside a Custom HTML/Code block or a Custom liquid section (Shopify) instead.
  • • If it is too tall or too short, change the height value—start at 420px on desktop and 380px on mobile, then adjust after locking fields.
  • • A blank box usually means your site blocks external iframes. Ask your web admin to allow iframes from mixbyparts.com or place the widget on a standalone page and link to it.

Pre-launch checklist

  • • Generate your recipe inside the widget builder and lock anything visitors should not edit.
  • • Copy the iframe or mbp.js snippet directly from the builder to avoid typos.
  • • Pick a height that matches your layout (≈220px summary, ≈360–420px result/mini) and test on mobile.
  • • Click View full size to compare your embed with the MixByParts demo.
  • • Double-check that your server is not sending X-Frame-Options: DENY/SAMEORIGIN or a restrictive frame-ancestors directive.

Need help beyond these steps? Email hello@mixbyparts.com with your URL and the snippet you're using—we can take a quick look.