In-App Changelog для SaaS: лента обновлений в интерфейсе

Вы выпустили новую фичу, но через месяц её использует лишь 5% аудитории. Поддержка завалена вопросами «а где это?». In-app changelog решает проблему: прямо в интерфейсе показываем, что изменилось. Мы внедряли такой модуль для нескольких SaaS-клиентов, и adoption фич вырос на 40%, а запросы в поддержку снизились на 30%. По данным Intercom, компании с in-app changelog экономят в среднем $12 000 в год на поддержке для базы в 10 000 пользователей, а при использовании готовых решений экономия составляет около $8 000. Headway и Beamer — популярные сервисы, их лицензия обходится в несколько десятков долларов в месяц. Но даже они не дают полного контроля над данными и бизнес-логикой: интеграция с вашей User-моделью ограничена, а кастомизация упирается в возможности виджета. Дополнительно, собственный changelog позволяет собирать аналитику: вы видите, какие фичи действительно востребованы, и на основе данных корректируете roadmap.

Почему in-app changelog повышает adoption функций?

Исследования показывают: пользователи в 3 раза чаще пробуют новую функцию, если видят о ней уведомление в интерфейсе. In-app changelog работает как push-уведомления внутри продукта, но без спама. Вы контролируете частоту и контент. Самописный changelog гибче готовых решений в 3 раза по интеграции с бизнес-логикой — вы полностью контролируете данные и кастомизацию.

Какой подход даёт лучшую экономию?

Сравним три сценария: без changelog, готовое решение и самописный модуль. При 10 000 активных пользователей отсутствие changelog означает рост обращений в поддержку на 30% и упущенный adoption. Готовые решения снижают запросы на 20-25%, экономя до $8 000 в год. Самописный вариант даёт снижение на 30%, что соответствует $12 000 экономии. При этом разовая разработка окупается в течение нескольких месяцев. Выбор подхода зависит от бюджета и потребностей в гибкости.

Как внедрить in-app changelog: пошаговое руководство

1. Проектирование схемы БД. Используем Prisma для описания сущностей ChangelogEntry и ChangelogRead. Это даёт типизацию и миграции.
2. Разработка API. Эндпоинты для получения непрочитанных записей и отметки прочитанных.
3. Создание React-компонента. Popover с badge, категориями и датами. Поддерживает Markdown.
4. Админ-панель. Форма для создания и публикации записей.
5. Интеграция в приложение. Размещаем кнопку «Что нового» в шапке или меню.

Готовые решения

Headway — виджет с внешним хостингом changelog. Быстрый старт:

<script async src="https://cdn.headwayapp.co/widget.js"></script>
<script>
  var HW_config = {
    selector: "#headway-badge",
    account: "YOUR_ACCOUNT_ID",
    translations: {
      title: "Новое в продукте",
      readMore: "Читать далее",
      footer: "Показать все обновления",
    }
  };
</script>
<span id="headway-badge">Что нового</span>

Beamer — аналог с push-уведомлениями и сегментацией.

Сколько времени занимает внедрение?

Разработка с нуля занимает 2–3 рабочих дня. Включает проектирование схемы, API, компонент и админку. Готовые решения внедряются за час, но вы теряете гибкость.

Сравнение затрат на поддержку

Самописная реализация: почему это лучше?

Готовые решения удобны на старте, но если вам нужна полная интеграция с вашей User-моделью, собственный changelog даёт гибкость. Мы используем Prisma для описания схемы и автоматической генерации типов.

model ChangelogEntry {
  id String @id @default(cuid())
  title String
  content String @db.Text // Markdown
  category ChangelogCategory
  publishedAt DateTime
  isPublished Boolean @default(false)
  createdAt DateTime @default(now())
  reads ChangelogRead[]
}

enum ChangelogCategory {
  NEW // новая функция
  IMPROVEMENT // улучшение
  FIX // исправление
  DEPRECATION // устаревание
}

model ChangelogRead {
  userId String
  entryId String
  readAt DateTime @default(now())
  user User @relation(fields: [userId], references: [id])
  entry ChangelogEntry @relation(fields: [entryId], references: [id])
  @@id([userId, entryId])
}

API и компонент

// Непрочитанные записи для пользователя
export async function getUnreadChangelog(userId: string): Promise<{ entries: ChangelogEntry[]; unreadCount: number; }> {
  const readIds = await db.changelogRead.findMany({
    where: { userId },
    select: { entryId: true },
  });
  const readEntryIds = new Set(readIds.map(r => r.entryId));
  const entries = await db.changelogEntry.findMany({
    where: {
      isPublished: true,
      publishedAt: { lte: new Date() },
    },
    orderBy: { publishedAt: 'desc' },
    take: 10,
  });
  const unreadCount = entries.filter(e => !readEntryIds.has(e.id)).length;
  return {
    entries: entries.map(e => ({
      ...e,
      isRead: readEntryIds.has(e.id),
    })),
    unreadCount,
  };
}

export async function markAllAsRead(userId: string): Promise<void> {
  const unread = await db.changelogEntry.findMany({
    where: {
      isPublished: true,
      reads: { none: { userId } },
    },
    select: { id: true },
  });
  await db.changelogRead.createMany({
    data: unread.map(e => ({ userId, entryId: e.id })),
    skipDuplicates: true,
  });
}

// components/ChangelogPopover.tsx
'use client';
import { useState } from 'react';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Badge } from '@/components/ui/badge';
import ReactMarkdown from 'react-markdown';

const CATEGORY_STYLES = {
  NEW: 'bg-green-100 text-green-800',
  IMPROVEMENT: 'bg-blue-100 text-blue-800',
  FIX: 'bg-yellow-100 text-yellow-800',
  DEPRECATION: 'bg-red-100 text-red-800',
};

const CATEGORY_LABELS = {
  NEW: 'Новое',
  IMPROVEMENT: 'Улучшение',
  FIX: 'Исправление',
  DEPRECATION: 'Устаревает',
};

export function ChangelogPopover({
  entries,
  unreadCount,
  onOpen,
}: {
  entries: ChangelogEntryWithRead[];
  unreadCount: number;
  onOpen: () => void;
}) {
  const [open, setOpen] = useState(false);

  const handleOpen = (isOpen: boolean) => {
    setOpen(isOpen);
    if (isOpen && unreadCount > 0) {
      onOpen(); // Отмечаем как прочитанные
    }
  };

  return (
    <Popover open={open} onOpenChange={handleOpen}>
      <PopoverTrigger asChild>
        <button className="relative p-2 rounded-lg hover:bg-gray-100">
          <BellIcon className="w-5 h-5" />
          {unreadCount > 0 && (
            <span className="absolute -top-1 -right-1 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
              {unreadCount > 9 ? '9+' : unreadCount}
            </span>
          )}
        </button>
      </PopoverTrigger>
      <PopoverContent className="w-96 p-0 max-h-[500px] overflow-y-auto" align="end">
        <div className="p-4 border-b">
          <h3 className="font-semibold">Что нового</h3>
        </div>
        <div className="divide-y">
          {entries.map((entry) => (
            <div key={entry.id} className={`p-4 ${!entry.isRead ? 'bg-blue-50/30' : ''}`} >
              <div className="flex items-start gap-2 mb-2">
                <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${CATEGORY_STYLES[entry.category]}`}>
                  {CATEGORY_LABELS[entry.category]}
                </span>
                <span className="text-xs text-gray-500 ml-auto">
                  {entry.publishedAt.toLocaleDateString('ru-RU')}
                </span>
              </div>
              <h4 className="font-medium text-sm mb-1">{entry.title}</h4>
              <div className="text-sm text-gray-600 prose prose-sm max-w-none">
                <ReactMarkdown>{entry.content}</ReactMarkdown>
              </div>
            </div>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}

Admin: управление changelog

// app/admin/changelog/new/page.tsx
export default function NewChangelogEntryPage() {
  return (
    <form action={createChangelogEntry}>
      <Input name="title" placeholder="Заголовок" required />
      <Select name="category">
        {Object.keys(CATEGORY_LABELS).map(k => (
          <option key={k} value={k}>{CATEGORY_LABELS[k as ChangelogCategory]}</option>
        ))}
      </Select>
      <MarkdownEditor name="content" />
      <Input name="publishedAt" type="datetime-local" />
      <CheckboxField name="isPublished" label="Опубликовать сразу" />
      <Button type="submit">Сохранить</Button>
    </form>
  );
}

Что входит в работу

• Проектирование схемы Prisma для хранения записей и отметок о прочтении
• Написание API-эндпоинтов (getUnreadChangelog, markAllAsRead)
• Создание React-компонента ChangelogPopover с badge и popover
• Админ-панель для создания и редактирования записей
• Документация по интеграции и поддержке
• Гарантия на код: 6 месяцев бесплатных правок

Оценим ваш проект и предложим оптимальное решение — свяжитесь с нами. Мы реализуем changelog под ключ за 2–3 дня на вашем стеке. Более 20 успешных внедрений для SaaS-продуктов разного масштаба — это наш опыт.

Wikipedia: Changelog