Skip to main content
Version: v1

Select Nonprofit

Place this HTML element in the site where it should appear to add the base functionality of a Select Nonprofit widget. To move the widget to a non-standard location, this file can be used as-is, and an appropriate script from the other sections below can be included to move the widget to be displayed where necessary.

  • apiKey - Your Beam SDK 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
  <div data-beam-widget="select-nonprofit" data-cart-empty="true">
    <beam-select-nonprofit
      apiKey="{{ storefront_component_api_key }}"
      chainId="{{ chain_id }}"
      storeId="{{ store_id }}"
      lang="en"
      postalCode=""
      baseUrl="{{ base_url }}"
    ></beam-select-nonprofit>
  </div>

Include the following <script> files to your site’s page, wherever you anticipate the Select Nonprofit widget to be loaded.

  <html>
  <head> ... </head>
  <body>
    ...

    <!-- BEAM START -->
    <script type="text/javascript" src="./beam-config.js"></script>
    <script type="module" async crossorigin src="./beam-cart-setup.js"></script>
    <script type="module" async crossorigin data-em-disable data-categories="analytics" src="https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/components/select-nonprofit.esm.js"></script>
    <!-- BEAM END -->
  </body>
</html>