Skip to main content
Version: v1

Setup

theme.liquid
<html>
  <head> ... </head>
  <body>
    <!-- BEAM START -->
    {% render 'beam-config' %}
    {% render 'beam-cart-setup' %}
    <!-- BEAM END -->
  </body>
</html>

Base code​

Replace the following in the example, including the {{ }}

  • Beam Version SDK version (Latest version: latest) (See SDK Versions for more info)
  • apiKey Your Beam SDK API Key (string)
  • chainId Your Beam Chain ID (number)
  • storeId Your Beam Store ID (number)
  • domain Your website’s top-level domain (string, eg: “myshop.com”). If your site uses different subdomains between your public storefront and your checkout flow (ie: myshop.com and checkout.myshop.com), this setting allows for storing nonprofit selections between each subdomain.
  • baseUrl The Beam base server URL. This is optional unless you are using credentials for the Beam staging server

SDK v1.31.0+ (current)​

beam-config.liquid
<script type="module">

import { init } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/beam.js"
import { StatsigPlugin } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/statsig.js"

const beam = await init({
  apiKey: "{{ settings.beam_api_key }}", // i.e., "abc123.xyz456"
  chainId: {{ settings.beam_chain_id }}, // i.e., 1000
  storeId: {{ settings.beam_store_id }}, // i.e., 50000
  domain: "{{ settings.beam_store_domain }}", // i.e., "pets.com"
  // Base URL is optional - it is used to change to a staging server
  baseUrl: "{{ settings.beam_base_url }}",
  plugins: [
    new StatsigPlugin({ statsigApiKey: "{{ settings.beam_statsig_api_key }}" })
  ], // Beam Plugins, such as Statsig (see documentation)
});

</script>

Reading config values in other snippets / Liquid code:

import { getConfig } from "https://sdk.beamimpact.com/web-sdk/{{ Beam Version }}/dist/integrations/beam.js"

const beam = getConfig(); // Reads the config values set by init()

Async initialization for plugins that take time to load, like Statsig:

// Use one of the following methods to wait for async Beam plugins:

// The Beam object has a Promise that can be awaited:
await beam.readyPromise;

// Instead of the Promise, you can use event listeners:
if (beam.status !== "ready") {
  beam.addEventListener("beamstatuschange", (event) => {
    const status = event.detail.status;
    if (status === "ready") doSomething(beam);
    else if (status === "error") handleError(event.detail.error);
  });
}

SDK before v1.31.0​

Older versions of the SDK do not have the init/getConfig system and require additional code below:

beam-config.js
window.BeamImpact = {
  ...(window.BeamImpact || {}),
  apiKey: "{{ Api Key }}",
  chainId: {{ Chain Id }},
  storeId: {{ Store Id }},
  storeTopDomain: "{{ Store Top Domain }}",
  baseUrl: "https://api.beamimpact.com",
  logUrl: "https://production.beamimpactlogs.com",
  initialized: false,
  awaitable: Promise.resolve(true),
  logEvent: async (eventName, value, metadata = {}) => {
    console.debug("🚀 Beam event logged", eventName, value, metadata);
  },
};