VarianceExperiment HTML SDK

A lightweight, client-side HTML SDK for rendering A/B test variants and sending experiment impressions to analytics. Supports preview mode, shared caching, and works with any <variance-experiment> / <variance-variant> setup.

Table of Contents

• Installation
• Usage
  • Basic Example
  • Preview Mode
• API
  • Attributes
  • Methods

Installation

Install via pnpm:

pnpm add @varianceab/html-sdk

Or include directly in your project:

<script src="https://unpkg.com/@varianceab/html-sdk"></script>

Usage

Basic example

<variance-experiment id="exp_123" client-id="client_123">
  <variance-variant id="var_123">
    <h1>Welcome, visitor!</h1>
  </variance-variant>
  <variance-variant id="var_456">
    <h1>Try our new feature!</h1>
  </variance-variant>
</variance-experiment>

• The component fetches the experiment data from the endpoint.
• The correct variant is automatically rendered.
• An analytics impression is sent automatically.

Preview Mode

Preview mode allows rendering a specific variant without sending analytics events or fetching experiment data.

<variance-experiment
  id="exp_456"
  client-id="client_123"
  preview-mode="true"
  variant-to-preview="var_456"
>
  <variance-variant id="var_123">
    <h1>Unseen variant</h1>
  </variance-variant>
  <variance-variant id="var_456">
    <h1>Previewed variant</h1>
  </variance-variant>
</variance-experiment>

• preview-mode="true" requires variant-to-preview to be set.
• No network request is made in preview mode.
• No analytics impressions are sent.

API

Attributes

| Attribute | Type | Description | | -------------------- | ------- | ----------------------------------------------------------------- | | id | string | The experiment ID. | | client-id | string | The client ID for fetching experiments. | | preview-mode | boolean | If true, renders a specific variant for preview purposes. | | variant-to-preview | string | The variant ID to preview (required when preview-mode is true). |

Methods

sendImpression(experimentId: string, variantId: string) – Sends an analytics event manually. Usually called automatically.

All other rendering is handled automatically; variants are rendered based on experiment data or preview mode.