Skip to main content
Version: v1

Select Nonprofit

The nonprofit selection widget is where the user is registered, and is where the user can choose a nonprofit for their transaction. For the transaction after a user chooses a nonprofit, a donation will be recorded as owed to that nonprofit. All recorded donations will separately be fulfilled in aggregate on a quarterly basis by the Finance team.

HTML​

Place this HTML element in the site where it should appear to add the base functionality of a Select Nonprofit widget. Beam strongly recommends to only show the Select Nonprofit component when the user's cart is not empty.

Replace the following in the example code, including the {{ }}

  • apiKey - Your Beam API Key
  • chainId - Your Beam Chain Id
  • storeId - Your Beam Store Id
  • baseUrl - This value can remain unchanged, unless you are specifically using Beam’s Staging environment
  • lang - Beam supports changing the displayed language based on a lang parameter passed into the widgets. If your site supports multiple languages, this value should be updated based on any existing language detection method available in the site. The supported values for this property can be found in the Beam Supported Languages documentation.
  • postalCode - Beam supports showing specific nonprofits based on the user’s postal code; this value should be updated based on any existing location detection method available in the site. This functionality requires coordination with the Beam team, so please reach out to us if this is desired
  <beam-select-nonprofit
    apiKey="{{ storefront_component_api_key }}"
    chainId="{{ chain_id }}"
    storeId="{{ store_id }}"
    lang="en"
    postalCode="11111"
    countryCode="US"
    baseUrl="{{ base_url }}"
  ></beam-select-nonprofit>

Javascript​

Include the Beam widget JS files in your site’s page, wherever you anticipate the Select Nonprofit widget to be loaded.

Data attributes data-em-disable data-categories="analytics" may be added to the script to prevent it from being modified by other 3rd party plugins.

  <html>
    <head> ... </head>
    <body>
      <!-- BEAM START -->
      <!-- Include Existing Beam Configuration Scripts -->
      <script type="module" async crossorigin src="https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/components/select-nonprofit.esm.js"></script>
      <!-- BEAM END -->
    </body>
  </html>

See the Cart Setup page for guidance on what the cartChangeEvent is expected to be in this example.

(Optional) Listening for Beam Selection Events​

Beam components which allow for selecting a nonprofit to support, such as the Select Nonprofit component, will emit a Javascript event when a nonprofit is selected. This event can be used for any custom code you may wish to add for tracking purposes. This is entirely optional.

window.addEventListener(events.BeamNonprofitSelectEvent.eventName, async (event) => {
  const { selectedNonprofitId, selectionId, nonprofitName } = event.detail;
  // You may add a custom handler here to track the nonprofit selection
  // information on the cart, order, your analytics platform, or anywhere you
  // would like to save this data.
});