Skip to content

Widget Configuration

Jump to bottom
Fishbakh-N edited this page May 26, 2023 · 1 revision

Minimum configuration

Add script to <head> tag and it will automatically replace link to https://www.every.org/your-slug#/donate

<script async defer src="https://embeds.every.org/0.4/button.js" />

Full configuration

To configure your button manualy, add ?explicit=1 to the script src

Here is an example html file with a manual configuration.

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="every-donate-btn">
      <a href="https://www.every.org/your-slug#/donate">Donate</a>
    </div>
    <script
      async
      defer
      src="https://embeds.every.org/0.4/button.js?explicit=1"
      id="every-donate-btn-js"
    ></script>
    <script>
      function createWidget() {
        everyDotOrgDonateButton.createButton({
          selector: "#every-donate-btn",
        });
        everyDotOrgDonateButton.createWidget({
          selector: "#every-donate-btn",
          nonprofitSlug: "your-slug",
        });
      }
      if (window.everyDotOrgDonateButton) {
        createWidget();
      } else {
        document.getElementById("every-donate-btn-js").onload = createWidget;
      }
    </script>
  </body>
</html>

Configuration options

The createWidget function accepts an object with the following properties:

  {
    /**
     * Selector to render button in
     */
    selector?: string;
    /**
     * Identifier for nonprofit on Every.org; you can get it by going to the
     * nonprofit's profile on Every.org and looking at its URL
     * @example
     * If the URL is https://www.every.org/givedirectly, the slug is "givedirectly"
     */
    nonprofitSlug: string;
    /**
     * Identifier for fundraiser on Every.org; you can get it by going to the
     * fundraiser's profile on Every.org and looking at its URL
     * @example
     * If the URL is https://www.every.org/givedirectly/f/my-fundraiser, the slug is "my-fundraiser"
     */
    fundraiserSlug?: string;
    /**
     * Payment methods: ["card", "bank", "paypal", "venmo", "pay", "crypto", "stocks", "daf"]
     * "pay" - for apple/google pay
     */
    methods?: string[];
    /**
     * An anchor which, if present in the URL, opens the widget
     * @default "donate"
     */
    openAt?: string;
    /**
     * If true shows the widget
     * @default false
     */
    show?: boolean;
    /**
     * Accent color for widget ui
     * @default "#018669"
     */
    primaryColor?: string;

    defaultDonationAmount?: number;
    /**
     * Minimum donation amount
     * @default 5
     */
    minDonationAmount?: number;
    /**
     * Donation frequency
     * @default 'once'
     */
    defaultFrequency?: DonationFrequency;
    /**
     * Amount suggestions
     * @default [10, 50, 100]
     */
    addAmounts?: number[];
    /**
     * @default false
     */
    completeDonationInNewTab?: boolean;
    /**
     * If present, do not show the normal www.every.org background,
     * only show the donation modal and do not allow people to exit
     * the modal.
     * @default true
     */
    noExit?: boolean;
  }

Also you can change them in runtime. Example:

  <script>
    // Ensure that the script was fully loaded before do this
    everyDotOrgDonateButton.setOptions({
        ...
    })
    everyDotOrgDonateButton.show()
  </script>
Clone this wiki locally