Pular para o conteúdo
notific.menotific.menotific.me

Exemplos de cards

Cada exemplo mostra o card como o app web renderiza e, em seguida, a chamada do SDK e o corpo HTTP que o produzem. Copie, troque o texto e envie. O conteúdo dos exemplos fica em inglês, como nos SDKs.

Alerta com ações

Seção intitulada “Alerta com ações”

text, metric com variação, list com ícones e buttons: um link que abre em nova aba e uma action de plugin que só funciona no app. O theme define a cor de destaque (borda esquerda) e o ícone.

Push / relógioapi-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" },
        ],
      },
    ],
  },
});

Deploy ao vivo

Seção intitulada “Deploy ao vivo”

Um bloco progress com etapas, enviado com live: true e atualizado com update(). Cada atualização troca o card no lugar em vez de criar uma notificação nova.

Push / relógioDeploying 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.",
      },
    ],
  },
});

Relatório diário

Seção intitulada “Relatório diário”

Dois blocos metric, um chart (linha, duas séries) e uma table. Células null aparecem como travessão.

Push / relógioDaily sales: 1,284 orders (+18%)

Daily sales

Orders1.284+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 imagem

Seção intitulada “Gráfico de barras e imagem”

Um chart do tipo bar e uma image por URL (https ou data:image raster).

Push / relógioCI 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",
      },
    ],
  },
});

Aprovação para um agente de IA

Seção intitulada “Aprovação para um agente de IA”

Um grupo de perguntas dentro do card: options para uma pergunta single com “outro”, options para uma pergunta yesno e input para uma pergunta text opcional, abaixo de uma table com o contexto. O nível 2 pede biometria ou o código 2FA.

Push / relógioAgent 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);

Formulário

Seção intitulada “Formulário”

options para uma pergunta multi e input para perguntas date, number e voice.

Push / relógioRelease window for api-v2

Release window

Which regions?
Postpone until
How many servers per batch?
Anything else? (voice) (opcional)🎙 Segure para gravar
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);

Boas práticas

Seção intitulada “Boas práticas”
  • Sempre escreva um bom summary: é tudo o que um push ou um relógio mostra.
  • Mantenha os cards curtos. Coloque os detalhes atrás de um link em buttons.
  • Perguntas são sempre nativas: nunca peça uma decisão com um link ou uma imagem.
  • Use dedupKey para alertas repetidos e cards live para tudo que tem progresso.
  • O app web mostra o texto como texto puro: não conte com markdown nem HTML.