Recommend people embed the "latest" version

[markulrich]

We should have some URL like https://partners.every.com/widgets.js which will be continuously upgraded to the latest version of the donate-button repo. This is what Twitter, Pinterest, and TikTok all do - when people want to embed a tweet at https://publish.twitter.com/, they are given an everygreen link to the widget.js twitter library

We want to make it super easy for anyone on the internet to embed an Every.org experience on their own website, and for this to be so easy you don't have to be a developer to embed it, and for the user experience to always be as up to date and unified across the internet as possible.

For developers who want a specific version, they can use directions in this repo to point to a specific version

[jake-nz]

If we want a simple way to embed multiple kinds of widgets we could make a small script that loads other scripts only for widgets used on the page.

The code on the page could look like this

<a href="https://www.every.org/livebetter-corp/donate">Donate</a>
<script async src="https://partners.every.com/widgets.js"></script>

and widgets.js would be something like this:

const links = document.querySelectorAll('a[href^="https://www.every.org/"]');
const donateButtonRegex = /^https:\/\/www\.every\.org\/.*\/donate$/;
links.forEach((element) => {
  // Check if the link is a EDO Donate link
  if (donateButtonRegex.test(element.href)) {
    console.info("Donate button found", element);
    loadDonateButtonJs();
  }
});

let donateButtonJsLoading;
function loadDonateButtonJs() {
  // Prevent loading multuple times
  if (donateButtonJsLoading) return;
  donateButtonJsLoading = true;

  console.info("Loading bonate button JS");

  const script = document.createElement("script");
  script.src = "https://assets.every.org/dist/donate-button/latest/index.js";
  document.body.appendChild(script);
}

donate-button/latest/index.js would automatically initialise on load

We could support a few config options as data attributes like <a href="https://www.every.org/livebetter-corp/donate" data-theme-color="#C0FFEE">Donate</a> and more advanced config like:

<a href="https://www.every.org/livebetter-corp/donate" id="widget-1">Donate</a>
<script>
window.edoConfig = {
  widget1: { /* full config here */ }
}
</script>
<script async src="https://partners.every.com/widgets.js"></script>

What does everyone think?

[jake-nz]

Alternatively, and more simply, we could have a donate-widget-specific script that is included in the page after the element and initialises on load without needing to be called.

<a href="https://www.every.org/livebetter-corp/donate">Donate</a>
<script async src="https://assets.every.org/dist/donate-button/latest/index.js"></script>