Breeder Website Widget: Canine Genetics

Embedding Instructions

1. Pick where the widget should appear on your page (for example, under a blog post or before your contact form).
2. Click the button below to copy the embed code. It already includes the script, so you only need to paste once.
3. Paste it into your site using an Embed/HTML block (or hand it to your web helper if you have one).
4. Publish or refresh your page. The widget loads itself automatically and keeps the height consistent.

Vanilla JavaScript Snippet

Use this option for any CMS, static site, or website builder that lets you add custom HTML. It's the easiest choice if you do not work inside a React app.

<div data-paction-canine-genetics></div>
<script>
  (function (w, d, scriptId, scriptUrl) {
    function initWidget() {
      if (w.PactionCanineGeneticsWidget && typeof w.PactionCanineGeneticsWidget.init === 'function') {
        w.PactionCanineGeneticsWidget.init();
      }
    }

    if (w.PactionCanineGeneticsWidget && typeof w.PactionCanineGeneticsWidget.init === 'function') {
      initWidget();
      return;
    }

    var existingScript = d.getElementById(scriptId);
    if (existingScript) {
      existingScript.addEventListener('load', initWidget);
      return;
    }

    var scriptElement = d.createElement('script');
    scriptElement.id = scriptId;
    scriptElement.src = scriptUrl;
    scriptElement.async = true;
    scriptElement.addEventListener('load', initWidget);

    var target = d.head || d.body || d.documentElement;
    if (target) {
      target.appendChild(scriptElement);
    }
  })(window, document, 'paction-canine-genetics-embed-script', 'https://paction.ca/widgets/canine-genetics.js');
</script>

React Component Snippet

Working inside a React codebase? Drop this component into your project and mount it anywhere in your layout. It reuses the same script and keeps initialization logic tidy.

import { useEffect } from 'react';

const SCRIPT_ID = 'paction-canine-genetics-embed-script';
const SCRIPT_URL = 'https://paction.ca/widgets/canine-genetics.js';

export function PactionCanineGeneticsWidget() {
  useEffect(() => {
    const initWidget = () => {
      window.PactionCanineGeneticsWidget?.init?.();
    };

    if (window.PactionCanineGeneticsWidget?.init) {
      initWidget();
      return undefined;
    }

    const handleLoad = () => initWidget();
    let scriptElement = document.getElementById(SCRIPT_ID);

    if (scriptElement) {
      scriptElement.addEventListener('load', handleLoad);
      return () => scriptElement.removeEventListener('load', handleLoad);
    }

    scriptElement = document.createElement('script');
    scriptElement.id = SCRIPT_ID;
    scriptElement.src = SCRIPT_URL;
    scriptElement.async = true;
    scriptElement.addEventListener('load', handleLoad);

    const target = document.head || document.body || document.documentElement;
    if (target) {
      target.appendChild(scriptElement);
    }

    return () => {
      scriptElement.removeEventListener('load', handleLoad);
    };
  }, []);

  return <div data-paction-canine-genetics />;
}