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.

Plugin

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: "abc123", // Beam SDK API Key
  /* ... See Beam Configuration Options ... */
  plugins: [
    new StatsigPlugin({ statsigApiKey: "statsig_client_key_here" }) 
  ],
};

Setup

Setup for A/B tests is async (it takes a few milliseconds to load).

Waiting for Beam A/B test setup to be ready in other scripts:

import { getConfig } from "<https://sdk.beamimpact.com/web-sdk/>{{ settings.beam_sdk_version }}/dist/integrations/beam.js"
const beam = getConfig();
await beam.readyPromise; // Resolves when plugins are all ready

// OR 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);
  });
}

Events

Initializing the Statsig plugin will automatically log statsig_init, cart_created, and order_created events.

To manually log additional events:

beam.plugins.statsig.logEvent(eventName, eventValue, metadataObject);

Visibility

Once initialized, all Beam widgets have display: none unless user is assigned to A/B test group that shows Beam.

To hide additional elements, add the CSS className beam-sync-visibility to them. Elements with this class will automatically have display: none if the user can't see Beam.

Experiment Values

To access the experiment state in JavaScript:

import { getConfig } from "<https://sdk.beamimpact.com/web-sdk/>{{ settings.beam_sdk_version }}/dist/integrations/beam.js";

getConfig().plugins.statsig.experiments.shouldShowBeam; // boolean