KvalityUI

Таймлайны

Хронология действий в визите и путь клиента от первого захода до звонка.

Действия в визите

Живой код — редактируйте
const traceData = {
  caveats: [],
  sessionId: "session-1",
  moments: [
    { visit: 1, tS: 0, kind: "page", detail: "Открыл /ceny из Яндекс Директа" },
    { visit: 1, tS: 18, kind: "scroll", detail: "Пролистал таблицу цен до конца" },
    {
      visit: 1,
      tS: 64,
      kind: "attention",
      detail: "Задержался на блоке «Что входит в стоимость»"
    },
    { visit: 1, tS: 121, kind: "input", detail: "Заполнил имя и телефон" },
    { visit: 1, tS: 184, kind: "form", detail: "Отправил заявку" }
  ]
};

render(
  <SessionTimeline trace={traceData} />
);

Путь клиента

Живой код — редактируйте
const journeyData = {
  caveats: [],
  items: [
    {
      at: "2026-10-17T19:20:00Z",
      kind: "visit",
      title: "Первый визит",
      detail: "Органика · 2 страницы"
    },
    {
      at: "2026-10-19T09:14:00Z",
      kind: "visit",
      title: "Вернулся из Директа",
      detail: "/ceny · 3 минуты"
    },
    {
      at: "2026-10-19T09:18:00Z",
      kind: "submission",
      title: "Оставил заявку",
      level: "high",
      submissionId: "submission-1"
    },
    {
      at: "2026-10-19T10:30:00Z",
      kind: "call",
      title: "Позвонил",
      detail: "5 минут разговора",
      callId: "call-1"
    }
  ]
};

render(
  <JourneyTimeline data={journeyData} />
);

Шаг таймлайна

TimelineStep — общий кирпичик обоих таймлайнов: иконка в кружке, линия к следующему шагу, содержимое.

Prop

Type

On this page