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', 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",
}
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 complete 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 required key with its English source value. Translate every value and preserve the keys.
ValidationThe iframe checks the locale, required keys, non-empty values, and interpolation variables. English catalogs cannot be overridden.
Safe fallbackAn invalid or incomplete catalog falls back to English and reports an invalid_localization message through onError and the browser console.
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();