alphaledger-js

v0.1.6

Published

a month ago

AlphaLedger embed SDK for partner integrations

0High
0Medium
0Low

AlphaLedger JS SDK (`alphaledger-js`)

The official AlphaLedger JavaScript SDK for B2B partner integrations. Embed the AlphaLedger trading and analytics terminal seamlessly into any brokerage platform or web application.

Installation

Install the package via npm, yarn, or bun:

npm install alphaledger-js
# or
yarn add alphaledger-js
# or
bun add alphaledger-js

Or load it directly inside HTML using a script tag from a public CDN:

<!-- Load the latest version -->
<script src="https://unpkg.com/alphaledger-js/dist/index.global.js"></script>

<!-- Or load a specific version (recommended for production) -->
<script src="https://unpkg.com/[email protected]/dist/index.global.js"></script>

Quick Start

1. Plain HTML / CDN Integration

Create a placeholder container div with a specified height, and initialize the SDK:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Broker Dashboard</title>
</head>
<body>

  <!-- Container for the embed -->
  <div id="alphaledger-container" style="width: 100%; height: 100vh;"></div>

  <!-- Load SDK -->
  <script src="https://unpkg.com/alphaledger-js/dist/index.global.js"></script>

  <!-- Initialize -->
  <script>
    new AlphaLedger.AlphaLedger({
      containerId: "alphaledger-container",
      apiKey: "al_live_YOUR_API_KEY_HERE"
    }).init();
  </script>

</body>
</html>

2. Next.js / React Integration

Create a client component to mount the terminal inside a container on component mount:

"use client";

import { useEffect, useRef } from "react";
import { AlphaLedger } from "alphaledger-js";

interface AlphaLedgerEmbedProps {
  apiKey: string;
}

export default function AlphaLedgerEmbed({ apiKey }: AlphaLedgerEmbedProps) {
  const initialized = useRef(false);

  useEffect(() => {
    if (initialized.current) return;
    initialized.current = true;

    new AlphaLedger({
      containerId: "alphaledger-embed-target",
      apiKey,
    }).init();
  }, [apiKey]);

  return (
    <div
      id="alphaledger-embed-target"
      style={{ width: "100%", height: "100vh" }}
    />
  );
}

Important: Container Height Rule

The AlphaLedger terminal is a fully-featured dashboard layout. It requires a sufficient height in order to display scrollable elements and sidebars correctly.

DO NOT leave the container height unset (or at 0px).
DO NOT set the height too small (minimum recommended is 700px).
DO use height: 100vh (full-page embed) or height: 800px (inline sections).

<!-- ❌ WRONG (No height set; iframe will shrink to 0px) -->
<div id="alphaledger-container"></div>

<!-- ❌ WRONG (Height too small; content will crop) -->
<div id="alphaledger-container" style="height: 300px;"></div>

<!-- ✅ CORRECT (Takes full viewport height) -->
<div id="alphaledger-container" style="width: 100%; height: 100vh;"></div>

SDK Configuration Reference

When instantiating new AlphaLedger(config), the following configuration options are supported:

| Property | Type | Required | Description | |---|---|---|---| | containerId | string | Yes | The DOM element ID where the terminal iframe will be inserted. | | apiKey | string | Yes | Your unique B2B partner API key. | | token | string | No | Pre-authenticated SSO session token (if configured). | | baseUrl | string | No | Overrides the target app URL (defaults to production App). |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

AlphaLedger JS SDK (alphaledger-js)