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​

Replace the bracketted code with values from your Beam IDs and credentials above, i.e.:

  • {{ settings.beam_sdk_version }} = latest (See SDK Versions for more information on versioning.)
  • {{ settings.beam_chain_id }} = Your Beam provided chainId
beam-config.js
<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 }}" })
  ], // Optional Beam Plugins, such as Statsig (see documentation)
});

</script>

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.