Community Impact

Beam’s Community Impact is typically added to a page on a partner’s site that highlights the brand’s giving initiatives, an “About Us” page, or anywhere that the partner would like to showcase their community’s impact towards nonprofit goals.

Widget page configuration

To add the Beam Community Impact widget to your BigCommerce Storefront:

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

1. Click the Create a Web Page button to add a new page to your storefront, or edit an existing web page to which you’d like to add the Beam Community Impact widget

1. Use the following information to fill out the new page creation form, or to edit the existing web page
   1. Page Type
      1. This Page Will: Contain content created using the WYSIWYG editor below
   2. Web Page Details

      1. Page Name: Your Brandname Community’s Impact

         💡 Replace Your Brandname with your brand’s name, ie: “An Awesome Company Community’s Impact”

      2. Page URL: /community-impact

         💡 You may use whatever URL path you wish; /community-impact is simply a suggestion!

      3. Page Content:

         In the following code example, replace

         • apiKey - Your Beam SDK API Key
         • chainId - Your Beam Chain 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/community-impact.esm.js"></script>
         
         <!-- BEAM START -->
         <div data-beam-widget="community-impact">
           <h2>The Your Brandname Community's Impact</h2>
           <p>
             1% of every Your Brandname purchase is donated to a nonprofit of your choice.<br />
             Check out the impact the Your Brandname 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>
         </div>
         <!--BEAM END -->
   3. The rest of the page form can be filled out as you wish, such as choosing a Parent Page or adding it to your site’s navigation bar
   4. Beam does not recommend enabling the Spam Protection option for this page
   5. Beam does not recommend enabling the Restrict to Customers Only option for this page
2. Click the Save & Exit button to save your page changes

---

Preview your Beam Community Impact Page

To open your BigCommerce Storefront page where you placed the Beam Community 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