Skip to main content
Version: v1

Setup

Add the base Beam files, in the order shown below, to one of the site’s common pages (generally a file that is used by all pages of the site such as a header file, footer file, or template file). Beam recommends adding these files as the last thing to load on the site; they are also asynchronous to avoid impacting the site’s loading speed as much as possible.

<html>
  <head>
    <!-- Your page head -->
  </head>
  <body>
    <!-- Your page content... -->

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

Beam Configuration File​

beam-config.js
  import { init } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/beam.js"
  <!-- Optional Beam Plugins -->
  import { StatsigPlugin } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/statsig.js"
  import { PromoManagerPlugin } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/promoManager.js";

  const beam = await init({
    apiKey: "{{ storefront_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 PromoManagerPlugin(),
      new StatsigPlugin({ statsigApiKey: "{{ settings.beam_statsig_api_key }}" })
    ],
  });

A/B Test Plugin​

Beam provides a plugin to use Statsig for A/B testing. To use it, add the plugin to the init() command that was already configured. See Statsig A/B Tests for more information and implementation details.

Promo Manager Plugin​

The PromoManagerPlugin enables automatic detection and handling of promo codes from UTM query parameters. See Promo Manager Plugin for more information and implementation details.