LayoutEmbedScripts.astro

---
// src/components/LayoutEmbedScripts.astro
/** Third-party embed loaders: Fathom events, HelpScout, Hyperping, MaxMind, WebMCP. */

interface LayoutEmbedScriptsProps {
  isProduction: boolean;
}

const { isProduction } = Astro.props as LayoutEmbedScriptsProps;
---

{/* Fathom event tracking - fires on any element with data-fathom-event */}
<script is:inline>
  document.addEventListener('click', function (e) {
    var el = e.target.closest('[data-fathom-event]');
    if (el && window.fathom) {
      window.fathom.trackEvent(el.getAttribute('data-fathom-event'));
    }
  });
</script>

{/* HelpScout Beacon open trigger handler */}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const beaconTriggers = document.querySelectorAll('.open-beacon');
    beaconTriggers.forEach((trigger) => {
      trigger.addEventListener('click', function (e) {
        e.preventDefault();
        // @ts-expect-error Beacon is loaded from HelpScout script
        if (window.Beacon) {
          // @ts-expect-error Beacon is loaded from HelpScout script
          window.Beacon('open');
        }
      });
    });
  });
</script>

{/* Hyperping Status Badge - Load on idle to not block main thread */}
<script is:inline>
  /* eslint-disable no-undef */
  (function () {
    function initHyperping() {
      var script = document.createElement('script');
      script.src = 'https://hyperping.com/badge.js';
      script.async = true;
      script.onload = function () {
        if (typeof Hyperping !== 'undefined') {
          Hyperping.init({
            statuspage: 'https://www.datumstatus.net',
            border: 'none',
            borderColor: '#30363D',
            uptime: false,
            dot: true,
            dotSize: 10,
            isNeutral: false,
            dotOk: '#2BAC76',
            dotIncident: '#FFAF36',
            dotOutage: '#E95858',
            dotMaintenance: '#0070F3',
            dotNeutral: '#0070F3',
            operational: 'All systems normal',
            incident: 'Under investigation',
            outage: 'System outage',
            maintenance: 'Under maintenance',
          });
        }
      };
      document.body.appendChild(script);
    }
    // Load on idle or after 3s timeout (whichever comes first)
    if ('requestIdleCallback' in window) {
      requestIdleCallback(initHyperping, { timeout: 3000 });
    } else {
      setTimeout(initHyperping, 2000);
    }
  })();
</script>

{/* HelpScout Beacon - Deferred loading on first interaction or 5s timeout */}
<script is:inline data-production={isProduction ? 'true' : 'false'}>
  (function () {
    var isProduction = document.currentScript.getAttribute('data-production') === 'true';
    if (!isProduction) return;

    function loadHelpScout() {
      if (window.__helpScoutLoaded) return;
      window.__helpScoutLoaded = true;

      // Initialize Beacon stub
      window.Beacon =
        window.Beacon ||
        function (method, options, data) {
          window.Beacon.readyQueue = window.Beacon.readyQueue || [];
          window.Beacon.readyQueue.push({ method: method, options: options, data: data });
        };
      window.Beacon.readyQueue = [];

      // Load HelpScout script
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = 'https://beacon-v2.helpscout.net';
      script.onload = function () {
        window.Beacon('init', '57a7245e-772c-4d51-bdb1-6b898f34f2cb');
      };
      document.body.appendChild(script);
    }

    var events = ['mousemove', 'touchstart', 'scroll', 'keydown'];
    var loaded = false;

    function onInteraction() {
      if (loaded) return;
      loaded = true;
      events.forEach(function (e) {
        document.removeEventListener(e, onInteraction);
      });
      loadHelpScout();
    }

    events.forEach(function (e) {
      document.addEventListener(e, onInteraction, { once: true, passive: true });
    });

    setTimeout(function () {
      if (!loaded) {
        loaded = true;
        loadHelpScout();
      }
    }, 5000);
  })();
</script>

{/* MaxMind minFraud device tracking - feeds fingerprint into signup fraud check */}
<script is:inline data-production={isProduction ? 'true' : 'false'} data-account-id="1313245">
  (function () {
    var isProduction = document.currentScript.getAttribute('data-production') === 'true';
    if (!isProduction) return;

    var accountId = document.currentScript.getAttribute('data-account-id');
    var mmapiws = (window.__mmapiws = window.__mmapiws || {});
    mmapiws.accountId = accountId;

    function loadMaxMind() {
      var script = document.createElement('script');
      script.src = 'https://device.maxmind.com/js/device.js';
      script.async = true;
      document.body.appendChild(script);
    }
    if ('requestIdleCallback' in window) {
      requestIdleCallback(loadMaxMind, { timeout: 4000 });
    } else {
      setTimeout(loadMaxMind, 3000);
    }
  })();
</script>

{/* WebMCP — expose site tools to AI agents via the browser model context API */}
<script is:inline>
  if ('modelContext' in navigator && typeof navigator.modelContext.registerTool === 'function') {
    const controller = new AbortController();

    navigator.modelContext.registerTool({
      name: 'search_docs',
      description:
        'Search Datum documentation for information about network cloud features, configuration, and API usage',
      inputSchema: {
        type: 'object',
        properties: {
          query: { type: 'string', description: 'Search query' },
        },
        required: ['query'],
      },
      execute: async ({ query }) => ({ url: '/docs/?q=' + encodeURIComponent(query) }),
      signal: controller.signal,
    });

    navigator.modelContext.registerTool({
      name: 'navigate',
      description:
        'Navigate to a page on the Datum website. Use paths like /docs/, /features/, /download/, /contact/, /changelog/, /blog/',
      inputSchema: {
        type: 'object',
        properties: {
          path: { type: 'string', description: 'Site-relative path to navigate to' },
        },
        required: ['path'],
      },
      execute: async ({ path }) => {
        window.location.href = path;
        return { navigated: path };
      },
      signal: controller.signal,
    });
  }
</script>