Hearth

Free widget

Add this free chocolate-toxicity checker to your site

If you write for dog owners — a clinic site, a shelter, a groomer, a pet blog — this is the tool your readers want at the exact moment they need it: how much chocolate their dog ate, and whether it is dangerous. Paste one snippet and it lives on your page. It is free, it needs no signup or API key, and it sets no cookies and runs no analytics on your readers.

Live demo

This is not a screenshot and not a rebuild — the markup below this heading is literally the snippet in the box further down, running here.

Dog Chocolate Toxicity Calculator by hearthcalc.com

The snippet

Paste it wherever you want the widget to appear. The small script only sets the frame's height so the widget never scrolls inside a box. Drop it and everything still works — the widget then falls back to the fixed heights in the style block, which fit it as it loads. 

<!-- Free dog chocolate toxicity checker from hearthcalc.com -->
<style>
  #hearthcalc-chocolate-widget { height: 920px }
  @media (max-width: 660px) { #hearthcalc-chocolate-widget { height: 970px } }
  @media (max-width: 499px) { #hearthcalc-chocolate-widget { height: 1060px } }
  @media (max-width: 399px) { #hearthcalc-chocolate-widget { height: 1270px } }
</style>
<iframe
  id="hearthcalc-chocolate-widget"
  src="https://hearthcalc.com/dog-chocolate-toxicity-calculator/embed/"
  title="Dog Chocolate Toxicity Calculator"
  loading="lazy"
  style="display:block;width:100%;border:1px solid #e6d9c2;border-radius:14px"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
></iframe>
<p style="font-size:14px">
  <a href="https://hearthcalc.com/dog-chocolate-toxicity-calculator">Dog Chocolate Toxicity Calculator</a> by hearthcalc.com
</p>
<script>
(function () {
  var ORIGIN = 'https://hearthcalc.com';
  var frame = document.getElementById('hearthcalc-chocolate-widget');
  if (!frame) return;
  function hello() {
    if (frame.contentWindow) frame.contentWindow.postMessage({ type: 'hearthcalc:embed:hello' }, ORIGIN);
  }
  window.addEventListener('message', function (event) {
    if (event.origin !== ORIGIN) return;
    if (event.source !== frame.contentWindow) return;
    var data = event.data;
    if (!data || data.type !== 'hearthcalc:embed:size') return;
    var height = Number(data.height);
    if (!(height > 0) || height > 4000) return;
    frame.style.height = height + 'px';
  });
  frame.addEventListener('load', hello);
  hello();
})();
</script>

The rules, in full

For whoever reviews the snippet

Fair questions if you're the one pasting this into a production template.