Skip to main content
Version: v1

Setup

<html>
  <head> ... </head>
  <body>
    <!-- BEAM START -->
    <script type="module" src="./beam-config.js"></script>
    <script type="module" async crossorigin src="./beam-cart-setup.js"></script>
    <!-- BEAM END -->
  </body>
</html>

Base code​

beam-config.liquid (if using a template)

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.js
  import { init } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/beam.js"
  import { StatsigPlugin } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/statsig.js"

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

Reading config values in other snippets / Liquid code:

    import { getConfig } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_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: "{{ storefront_component_api_key }}",
    chainId: {{ chain_id }},
    storeId: {{ store_id }},
    storeTopDomain: "{{ domain }}",
    baseUrl: "{{ base_url }}",
    logUrl: "https://production.beamimpactlogs.com",
    initialized: false,
    awaitable: Promise.resolve(true),
    logEvent: async (eventName, value, metadata = {}) => {
      console.debug("🚀 Beam event logged", eventName, value, metadata);
    },
  };