Signal API
Customization as MarkdownUse a clean Markdown version of this page with an agent or local tooling.

Theme and appearance

Pass partial theme tokens to match your product. Unspecified values use the defaults listed in the type reference.

theme: {
  colors: {
    primary: "#0F766E",
    primaryText: "#FFFFFF",
    background: "transparent",
    surface: "#FFFFFF",
    text: "#16181D",
    muted: "#6B7280",
    border: "#E5E7EB",
    success: "#047857",
    successSurface: "#ECFDF5",
    warning: "#B45309",
    warningSurface: "#FFFBEB",
    danger: "#B91C1C",
    dangerSurface: "#FEF2F2",
  },
  typography: {
    fontFamily: "'Inter Variable', Inter, sans-serif",
    baseSize: "14px",
    smallSize: "12.5px",
    titleSize: "22px",
    titleWeight: "700",
    bodyWeight: "400",
  },
  shape: {
    radius: "10px",
    cardRadius: "10px",
    controlRadius: "10px",
    pillRadius: "999px",
  },
  spacing: {
    pagePadding: "20px",
    panelPadding: "16px",
    cardPadding: "16px 18px",
    gap: "12px",
    controlHeight: "34px",
  },
  density: "compact",
}

The embed bundles variable Inter, Roboto, Open Sans, and Montserrat fonts with normal and italic styles. Use 'Inter Variable', 'Roboto Variable', 'Open Sans Variable', or 'Montserrat Variable' first in the font-family stack. All weights from 100 through 900 are available. System font stacks also work without loading additional assets.

ColorsBrand, background, surface, text, border, and status colors.
TypographyFont family, text sizes, and title and body weights.
ShapeBase, card, control, and pill corner radii.
SpacingPage, panel, card, gap, and control-height overrides. Explicit spacing values take precedence over the selected density.
DensityUse compact or comfortable spacing.

Product settings may set the heading and subtitle, project-name visibility, detail navigation, and single-location behavior. showProjectAdminTabs and showLocationAdminTabs reveal the applicable Settings and read-only Users tabs; despite their names, they never grant admin access. The session role still controls every action.

Theme and settings are mount-time options. To change either after mounting, call unmount() and mount the application again with the new values. Use updateToken() only for session replacement.

Localization

Signal includes an immutable English catalog. To render another language, pass one active BCP 47 locale and a translated message catalog at mount time. The UI locale is independent from the language configured on a project or location.

// Start from the complete catalog and translate every value.
const nlMessages = Ceyo.translationTemplate();

Object.assign(nlMessages, {
  "app.defaultTitle": "AI-zichtbaarheid",
  "frame.title": "AI-zichtbaarheid",
  "common.saveChanges": "Wijzigingen opslaan",
  "common.cancel": "Annuleren",
  "navigation.overview": "Overzicht",
  "navigation.locations": "Locaties",
  "navigation.prompts": "Prompts",
  // Continue until every value in the returned catalog is translated.
});

const embed = Ceyo.mount("#signal-visibility", {
  sessionToken,
  localization: {
    locale: "nl-NL",
    messages: nlMessages,
  },
  onError(message) {
    reportEmbedError(message);
  },
});
Complete templateCall Ceyo.translationTemplate() to receive every key with its English source value. Translate the values and preserve the keys.
ValidationThe iframe checks the locale, non-empty values, and interpolation variables. English catalogs cannot be overridden.
Safe fallbackAn invalid catalog falls back to English and reports invalid_localization through onError. Missing or empty keys fall back to English for that string only and report localization_warning. Keys under tooltips.* are optional: untranslated tooltips are hidden.
FormattingNumbers and dates use the selected locale. Labels, placeholders, empty states, accessibility text, toasts, and errors come from the supplied catalog.
Mount-time optionPass only the locale needed by the current user. To switch languages, unmount and mount again with the next locale and catalog.

Client events

onReady fires once the component can be used. onError reports an error message. onTokenExpired applies a returned replacement token. Keep the returned handle when the host page needs to update or unmount the application later.

const embed = Ceyo.mount("#signal-visibility", {
  sessionToken,
  onReady() {
    document.querySelector("#signal-loading")?.remove();
  },
  onError(message) {
    reportEmbedError(message);
  },
  async onTokenExpired() {
    return refreshSession(currentSession.token, false);
  },
});

// The returned handle supports lifecycle changes outside callbacks.
embed.updateToken(freshToken);
embed.unmount();