Saltar al contenido
notific.menotific.menotific.me

Ejemplos de tarjetas

Cada ejemplo muestra la tarjeta como la renderiza la app web y, después, la llamada del SDK y el cuerpo HTTP que la producen. Copia, cambia el texto y envía. El contenido de los ejemplos está en inglés, como en los SDKs.

Alerta con acciones

Sección titulada «Alerta con acciones»

text, metric con variación, list con iconos y buttons: un enlace que se abre en una pestaña nueva y una action de plugin que solo funciona en la app. El theme define el color de acento (borde izquierdo) y el icono.

Push / relojapi-v2 died on vps-01 (exit 137)

Container died

api-v2 on vps-01 was killed by the OOM killer and restarted.

Crashes in 24h3+2
  • Exit code 137 (out of memory)
  • Memory limit: 512 MiB
  • Restarted automatically
Open dashboard ↗Restart
import { NotificMe } from "@notificme/sdk";


const notific = new NotificMe({ source: "my-service" });


await notific.send({
  type: "container.die",
  severity: "high",
  summary: "api-v2 died on vps-01 (exit 137)",
  card: {
    title: "Container died",
    theme: { accent: "#E5484D", icon: "🐳" },
    blocks: [
      {
        type: "text",
        text: "api-v2 on vps-01 was killed by the OOM killer and restarted.",
      },
      { type: "metric", label: "Crashes in 24h", value: 3, delta: "+2" },
      {
        type: "list",
        items: [
          { text: "Exit code 137 (out of memory)", icon: "⚠️" },
          { text: "Memory limit: 512 MiB", icon: "📦" },
          { text: "Restarted automatically", icon: "🔁" },
        ],
      },
      {
        type: "buttons",
        buttons: [
          { label: "Open dashboard", url: "https://dokploy.example.com/project/api" },
          { label: "Restart", action: "docker.restart" },
        ],
      },
    ],
  },
});

Despliegue en vivo

Sección titulada «Despliegue en vivo»

Un bloque progress con pasos, enviado con live: true y actualizado con update(). Cada actualización reemplaza la tarjeta en su lugar en vez de crear una notificación nueva.

Push / relojDeploying api-v2

Deploy api-v2

  1. Build
  2. Tests
  3. Push image
  4. Rollout

Commit 4c69fac by Jimmy: verification with the authenticator app.

import { NotificMe } from "@notificme/sdk";


const notific = new NotificMe({ source: "my-service" });


const deploy = await notific.send({
  type: "deploy.progress",
  severity: "info",
  summary: "Deploying api-v2",
  live: true,
  card: {
    title: "Deploy api-v2",
    theme: { accent: "#FF6A00", icon: "🚀" },
    blocks: [
      {
        type: "progress",
        value: 0.6,
        steps: ["Build", "Tests", "Push image", "Rollout"],
        current: 2,
      },
      {
        type: "text",
        text: "Commit 4c69fac by Jimmy: verification with the authenticator app.",
      },
    ],
  },
});

Informe diario

Sección titulada «Informe diario»

Dos bloques metric, un chart (líneas, dos series) y una table. Las celdas null se muestran como un guion.

Push / relojDaily sales: 1,284 orders (+18%)

Daily sales

Orders1284+18%
Revenue48,210 USD+9%
MonSun
This week Last week
RegionOrdersChange
BR612+21%
US433+15%
EU239—
import { NotificMe } from "@notificme/sdk";


const notific = new NotificMe({ source: "my-service" });


await notific.send({
  type: "report.daily",
  severity: "info",
  summary: "Daily sales: 1,284 orders (+18%)",
  card: {
    title: "Daily sales",
    blocks: [
      { type: "metric", label: "Orders", value: 1284, delta: "+18%" },
      {
        type: "metric",
        label: "Revenue",
        value: "48,210",
        unit: "USD",
        delta: "+9%",
      },
      {
        type: "chart",
        kind: "line",
        x: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        series: [
          { name: "This week", values: [820, 932, 901, 1034, 1190, 1330, 1284] },
          { name: "Last week", values: [790, 850, 870, 910, 980, 1100, 1088] },
        ],
      },
      {
        type: "table",
        columns: ["Region", "Orders", "Change"],
        rows: [
          ["BR", 612, "+21%"],
          ["US", 433, "+15%"],
          ["EU", 239, null],
        ],
      },
    ],
  },
});

Gráfico de barras e imagen

Sección titulada «Gráfico de barras e imagen»

Un chart de tipo bar y una image por URL (https o data:image raster).

Push / relojCI got slower this week

CI duration (minutes)

webdocs
Last week This week
Slowest steps of the server pipeline
import { NotificMe } from "@notificme/sdk";


const notific = new NotificMe({ source: "my-service" });


await notific.send({
  type: "ci.duration",
  severity: "low",
  summary: "CI got slower this week",
  card: {
    title: "CI duration (minutes)",
    blocks: [
      {
        type: "chart",
        kind: "bar",
        x: ["web", "server", "sdk", "docs"],
        series: [
          { name: "Last week", values: [4, 7, 2, 1] },
          { name: "This week", values: [5, 9, 2, 2] },
        ],
      },
      {
        type: "image",
        src: "/examples/flamegraph.svg",
        alt: "Slowest steps of the server pipeline",
      },
    ],
  },
});

Aprobación para un agente de IA

Sección titulada «Aprobación para un agente de IA»

Un grupo de preguntas dentro de la tarjeta: options para una pregunta single con “otro”, options para una pregunta yesno e input para una pregunta text opcional, debajo de una table con el contexto. El nivel 2 pide biometría o el código 2FA.

Push / relojAgent wants to delete 340 duplicate records
import { NotificMe } from "@notificme/sdk";


const notific = new NotificMe({ source: "my-service" });


const reply = await notific.ask({
  title: "Agent wants to delete 340 duplicate records",
  questions: [
    {
      id: "action",
      type: "single",
      text: "What should we do?",
      options: ["Approve", "Only the first 10", "Deny"],
      allowOther: true,
    },
    { id: "backup", type: "yesno", text: "Back up first?" },
    {
      id: "note",
      type: "text",
      text: "Instructions for the agent",
      optional: true,
    },
  ],
  level: 2,
  timeout: "30m",
  onTimeout: { action: "Deny" },
  card: {
    title: "CRM cleanup",
    theme: { icon: "🤖" },
    blocks: [
      {
        type: "text",
        text: "The CRM cleanup agent found 340 contacts duplicated by e-mail.",
      },
      {
        type: "table",
        columns: ["E-mail", "Copies"],
        rows: [
          ["[email protected]", 4],
          ["[email protected]", 3],
          ["[email protected]", 2],
        ],
      },
      { type: "options", questionId: "action" },
      { type: "options", questionId: "backup" },
      { type: "input", questionId: "note" },
    ],
  },
});


console.log(reply.status, reply.answers, reply.asText);

Formulario

Sección titulada «Formulario»

options para una pregunta multi e input para preguntas date, number y voice.

Push / relojRelease window for api-v2

Release window

Which regions?
Postpone until
How many servers per batch?
Anything else? (voice) (opcional)🎙 Mantén para grabar
import { NotificMe } from "@notificme/sdk";


const notific = new NotificMe({ source: "my-service" });


const reply = await notific.ask({
  title: "Release window for api-v2",
  questions: [
    {
      id: "regions",
      type: "multi",
      text: "Which regions?",
      options: ["BR", "US", "EU"],
    },
    { id: "until", type: "date", text: "Postpone until" },
    { id: "batch", type: "number", text: "How many servers per batch?" },
    { id: "voice", type: "voice", text: "Anything else? (voice)", optional: true },
  ],
  level: 1,
  card: {
    title: "Release window",
    blocks: [
      { type: "options", questionId: "regions" },
      { type: "input", questionId: "until" },
      { type: "input", questionId: "batch" },
      { type: "input", questionId: "voice" },
    ],
  },
});


console.log(reply.status, reply.answers, reply.asText);

Buenas prácticas

Sección titulada «Buenas prácticas»
  • Escribe siempre un buen summary: es todo lo que muestra un push o un reloj.
  • Mantén las tarjetas cortas. Pon los detalles detrás de un enlace en buttons.
  • Las preguntas siempre son nativas: nunca pidas una decisión con un enlace o una imagen.
  • Usa dedupKey para alertas repetidas y tarjetas live para todo lo que tenga progreso.
  • La app web muestra el texto como texto plano: no cuentes con markdown ni HTML.