<aside> đź‘‹ What is Beam?
The Beam SDK enables brands to connect with their customers over shared values, not transactional discounts, to build stronger loyalty. Our integration achieves this by allowing customers to (a) choose a nonprofit where the brand will donate part of their purchase from a set of curated options and (b) track their cumulative impact with every order towards quantifiable goals.
Beam takes care of all the nonprofit management and compliance, impact tracking, UI styling and dynamic campaignization.
Questions? Here’s how to reach us:
<aside> đź‘‹ Want to get started even faster? Give our team collaborator access for a no lift option. Check out our quickstart guide!
</aside>
Most of Beam’s widgets and code implementations reference specific identifiers and credentials that will be necessary to communicate with the Beam system. Please ensure that you have all of these values readily available as you begin your implementation, and reach out to us if you need them!
Required
API Key
abc123.xyz456Chain ID
Store ID or Postal Code + Country Code
storeId should be omitted and postalCode and countryCode provided instead.Widget Version
v1.36.91**.7.2 => **1**.25.0 same first number, no code changes needed1**.9.0 => **2**.5.0 new first number, there may be breaking changesOptional
Domain
mystore.com), which is used to set cookies that can be read across subdomains. This is used to preserve nonprofit selections and AB test assignments if your storefront and checkout flows are on different subdomains like www.mystore.com, checkout.mystore.com.Statsig Client API Key
client-abc123xyz456Base Url
https://staging-central-backend.beamimpact.com.baseUrl is https://production-central-backend-ne.beamimpact.com. You do not need to provide it unless you are using a different URL.Add the base Beam files, in the order shown below, to the site’s theme (generally in theme.liquid). While these files will load their resources asynchronously, we generally recommend adding them at the end of the <body> to ensure that the scripts minimize any potential impact to load times.
<html>
<head> ... </head>
<body>
...
<!-- BEAM START -->
{% render 'beam-config' %}
{% render 'beam-cart-setup' %}
<!-- BEAM END -->
</body>
</html>
Add the Beam configuration file
Add the Beam cart tracking file
Add the Statsig setup to your Beam configuration, if necessary (only used for setting up A/B tests, please reach out to the Beam team if you are interested in setting up an AB test for your implementation)
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.
On any thank you page after a customer has completed an order, the Beam Post Purchase experience can be easily integrated. If a user has already selected a nonprofit in the cart for that order, the thank you page will show the Impact Overview widget. If a customer has not selected a nonprofit, the customer will see the option to select a nonprofit using the Select Nonprofit widget. Once the customer clicks “Submit”, the transaction will be updated in Beam’s system with the user’s nonprofit selection and the thank you page will then show the Impact Overview widget.
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.