Cumulative Impact

Beam’s Cumulative Impact widget displays overall impact made by the partner’s community across all of a partner’s nonprofit goals with a text-based summary of each goal’s completion progress. This is similar to the Community Impact widget, differing in that it displays goal completion in number values rather than progress bars. It is highly recommended by the Beam team, and is in Beam’s best practices, to place the Community Impact widget and Cumulative Impact widgets on the same page, with the Community Impact widget above the Cumulative Impact widget.

💡 It is highly recommended by the Beam team to include your Cumulative Impact widget on the same page as your Community Impact page.

Note that the Cumulative Impact widget will not display impact information for nonprofit goals which have not yet been funded enough to show a whole number of progress towards the goal. For example: a nonprofit goal of cleaning 100 pounds of plastic from the ocean must be funded at least 1% in order to display 1 pound of plastic cleaned from the ocean. For this reason, it is recommended by the Beam team to wait to implement the Cumulative Impact widget until your community has been given enough time to fund some of your partnered nonprofit’s goals.

Adding the Cumulative Impact widget to your existing Community Impact page

To add the Beam Cumulative Impact widget to your existing Community Impact page in the BigCommerce Storefront:

1. Open your BigCommerce Storefront administration panel, and go to Web Pages

   

2. Click the name of your Community Impact page to open the BigCommerce page editor

3. In Web Page Details → Page Content, update the page content script as follows:

   In the following code example, 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 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.
   • cardStyle - Beam supports either “image” or “icon” for cardStyle values for the Community Impact widget. Using “image” will display the Beam Community Impact widget using an image associated the nonprofit for an engaging user experience (this is the default option). Using “icon” will display the Beam Community Impact widget using an icon associated with each nonprofit for a more streamlined and compact user experience.

   <script type="module" async crossorigin src="https://sdk.beamimpact.com/web-sdk/v1.30.1/dist/components/cumulative-impact.esm.js"></script>
   
   <!-- BEAM START -->
   <div data-beam-widget="community-impact">
     <h2>The {{ Your Brand Name }} Community's Impact</h2>
     <p>
       1% of every {{ Your Brand Name }} purchase is donated to a nonprofit of your choice.<br />
       Check out the impact the {{ Your Brand Name }} community is making below.
     </p>
   
     <beam-community-impact
       apiKey="{{ SDK API Key }}"
       chainId={{ Chain Id }}
       baseUrl="https://api.beamimpact.com"
       lang="en"
       cardStyle="image"
       class="beam-community-impact"
     ></beam-community-impact>
   
     <!-- The Beam Cumulative Impact widget -->
     <beam-cumulative-impact
       apiKey="{{ SDK API Key }}"
       chainId={{ Chain Id }}
       storeId={{ Store Id }}
       baseUrl="https://api.beamimpact.com"
       lang="en"
       class="beam-cumulative-impact"
     ></beam-cumulative-impact>
   </div>
   <!--BEAM END -->

4. Click the Save & Exit button to save your page changes

---

Preview your Beam Cumulative Impact Page

To open your BigCommerce Storefront page where you placed the Beam Cumulative Impact widget and validate that the widget is displaying correctly, you may either:

1. Directly navigate to the page using the URL you specified in the page configuration, or

2. Click the ellipsis icon in your Storefront page and select Preview to open the page in a new browser tab