How to use the ‘source url’ to override the “View Events” button - Squarespace 7.1

If you’re using Squarespace’s Events feature, you’ve probably noticed that each event has a “View Event” button that links to the internal event page by default.

That works fine, unless you want that button to lead somewhere else.

Maybe your events are hosted on an external site like Eventbrite, a ticketing platform, or a partner website. Squarespace includes a “Source URL” field inside each event for exactly this reason, but it doesn’t automatically replace the default button link.

Here’s how to make that happen.

---

Code:

Add this to your Code Injection > Footer

<script>
(function () {
  // Run on initial load and on Squarespace ajax loads
  document.addEventListener('DOMContentLoaded', init);
  document.addEventListener('mercury:load', init);

  function init() {
    observeEventList();
    processEvents();
  }

  function observeEventList() {
    const root = document.querySelector('.eventlist, .collection-type-events');
    if (!root || root.__eventObserver) return;

    const mo = new MutationObserver(() => processEvents());
    mo.observe(root, { childList: true, subtree: true });
    root.__eventObserver = mo;
  }

  async function processEvents() {
    const items = document.querySelectorAll('.eventlist-event:not([data-source-url-processed])');

    for (const item of items) {
      item.setAttribute('data-source-url-processed', '1');

      const button = item.querySelector('.eventlist-button, .sqs-block-button-element');
      const detailLink = item.querySelector('.eventlist-title-link, .eventlist-title a');

      if (!button || !detailLink) continue;

      const detailHref = detailLink.getAttribute('href');
      if (!detailHref) continue;

      try {
        const absoluteDetailURL = toAbsoluteURL(detailHref);
        const jsonURL = absoluteDetailURL + (absoluteDetailURL.includes('?') ? '&' : '?') + 'format=json-pretty';

        const res = await fetch(jsonURL, { credentials: 'same-origin' });
        if (!res.ok) continue;

        const data = await res.json();
        const sourceURL = data?.item?.websiteUrl || data?.item?.sourceUrl || '';

        if (sourceURL) {
          button.setAttribute('href', sourceURL);
        }
      } catch (e) {
        console.warn('Event source URL fetch failed:', e);
      }
    }
  }

  function toAbsoluteURL(href) {
    try {
      return new URL(href, window.location.origin).toString();
    } catch {
      return href;
    }
  }
})();
</script>