@yuno-payments/dashboard-embed-sdk

Lightweight SDK for embedding the Yuno Dashboard via iframe. Zero dependencies — uses only DOM APIs.

Installation

npm install @yuno-payments/dashboard-embed-sdk

Usage

import { YunoDashboard } from "@yuno-payments/dashboard-embed-sdk";

const sdk = new YunoDashboard({
  baseUrl: "https://dashboard.y.uno",
  container: document.getElementById("dashboard")!,
  token: "your-jwt-token",
  theme: {
    tokens: { primary: "#134AC3" },
    typography: { fontFamily: "'Inter', sans-serif", fontUrl: "https://fonts.googleapis.com/css2?family=Inter" },
    mode: "light",
    styles: ".yuno-card { border-radius: 8px; }",
  },
  lang: "en",
});

// Navigate
sdk.navigate("/connections");

// Update theme
sdk.setTheme({ tokens: { primary: "#FF0000" } });

// Change language
sdk.setLang("es");

// Set auth token (reloads iframe)
sdk.setToken("new-jwt-token");

// Cleanup
sdk.destroy();

API

new YunoDashboard(config)

| Option | Type | Required | Description | |---|---|---|---| | baseUrl | string | Yes | Dashboard base URL | | container | HTMLElement | Yes | Element to mount the iframe | | token | string | No | JWT auth token | | theme | DashboardTheme | No | Initial theme configuration | | lang | string | No | Language code (default: "en") |

Methods

• setTheme(theme) — Update colors, typography, mode, or external styles
• setLang(lang) — Change display language
• setToken(token) — Set auth token (reloads iframe)
• navigate(path) — Navigate to a dashboard route
• destroy() — Remove iframe and clean up event listeners

Development

npm install
npm run build      # Build with tsup
npm run dev        # Watch mode
npm run type-check # TypeScript check