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.

Widget script configuration

To add the Beam Select Nonprofit script to your BigCommerce Storefront:

1. Open your BigCommerce Storefront administration panel, and go to Script Manager

   

2. Click the Create Script button to add a new script to your storefront

   

3. Use the following information to fill out the new script creation form

   1. Script name: Beam Select Nonprofit
   2. Description: Beam Select Nonprofit Script Tag
   3. Placement: Footer
   4. Location: All pages
   5. Script category: Essential
   6. Script type: Script
   7. Script contents:

   <!-- -->
   <!-- Include the Beam Select Nonprofit Script module -->
   <!--  -->
   <script
     type="module"
     async
     crossorigin
     src="https://sdk.beamimpact.com/web-sdk/v1.30.1/dist/components/select-nonprofit.esm.js"
   ></script>
   
   <!-- -->
   <!-- OPTIONAL -->
   <!-- The default behavior should be to not show the Beam Select Nonprofit widget if the cart is empty -->
   <!-- The following two scripts are one way to accomplish this, but can be removed if your cart
        template already has a method for hiding the Beam Select Nonprofit widget if the cart is empty. -->
   <!-- This example relies on a "BeamCartChangeEvent" that is emitted after adding Beam Cart Tracking -->
   <!--  -->
   <script>
     document.head.insertAdjacentHTML(
       "beforeend",
       `<style>[data-beam-widget="select-nonprofit"][data-cart-empty="true"]{display:none;}</style>`
     );
   </script>
   <script type="module" async crossorigin>
     import { events } from "https://sdk.beamimpact.com/web-sdk/v1.30.1/dist/integrations/utils.esm.js";
     document.querySelector('[data-beam-widget="select-nonprofit"]')?.setAttribute("data-cart-empty", !currentCart?.cart?.itemCount);
     window.addEventListener(events.BeamCartChangeEvent.eventName, async (event) => {
       const {itemCount, cartId, subtotal, currencyCode} = event.detail;
       document.querySelector('[data-beam-widget="select-nonprofit"]')?.setAttribute("data-cart-empty", itemCount === 0);
     });
   </script>

   💡 If your cart template already has a method for not showing the Beam Select Nonprofit HTML element if the cart is empty, you may remove the “OPTIONAL” scripts in the example above.

4. Click the Save button to save your new script

---

Adding the Select Nonprofit widget HTML

Once the select-nonprofit script tag has been added to your BigCommerce Storefront Script Manager, you are now ready to add the Beam Select Nonprofit widget to your theme.

Add the following HTML block to your theme wherever you would like the Beam Select Nonprofit widget to appear. Some common locations for this are:

• At the bottom of templates/components/cart/preview.html
• At the bottom of templates/components/cart/content.html

In the following code:

Replace

• 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 your 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; value can be updated based on any existing location detection method available in your site. This functionality requires coordination with the Beam team, so please reach out to us if this is desired.

<!-- -->
<!-- Beam Select Nonprofit Widget -->
<!--  -->
<div data-beam-widget="select-nonprofit" data-cart-empty="true">
  <beam-select-nonprofit
    apiKey="{{ SDK API Key }}"
    chainId="{{ Chain Id }}"
    storeId="{{ Store Id }}"
    lang="en"
    postalCode=""
    baseUrl="https://api.beamimpact.com"
  ></beam-select-nonprofit>
</div>