Интеграция Canny для сбора Feature Requests на сайте

Feature requests разбросаны по почте, мессенджерам и тикет-системе — приоритезировать их практически невозможно. Команда тратит до 10 часов в неделю на сбор и классификацию вместо разработки. Canny решает эту проблему, предоставляя единое окно для сбора, голосования и отслеживания статуса запросов. Мы реализовали более 50 интеграций Canny для проектов разного масштаба — от стартапов до enterprise, гарантируя бесшовное встраивание в существующую инфраструктуру. Наши инженеры с пятилетним опытом помогли клиентам сократить время сбора фичереквестов на 70% и повысить конверсию запросов на 40% после настройки SSO.

Разберём, как встроить Canny в веб-приложение на React с бэкендом на Laravel, настроить SSO через JWT и автоматически уведомлять пользователей об изменениях через вебхуки. Правильная конфигурация SSO — ключевой фактор: после внедрения количество фичереквестов от пользователей вырастает в среднем на 40%.

Как настроить SSO через JWT для бесшовной авторизации?

Canny поддерживает SSO через JWT, чтобы пользователи не создавали отдельный аккаунт. Подробнее в документации Canny.

Шаг 1: Генерация JWT-токена на сервере

// CannyTokenController
public function generate(): JsonResponse
{
    $user = auth()->user();
    $userData = [
        'avatarURL' => $user->avatar_url,
        'email' => $user->email,
        'id' => (string) $user->id,
        'name' => $user->name,
        // Опционально: companies для B2B сегментации
        'companies' => [[
            'id' => (string) $user->company_id,
            'name' => $user->company->name,
        ]],
    ];

    $token = \Firebase\JWT\JWT::encode(
        ['userData' => $userData],
        config('services.canny.private_key'),
        'HS256'
    );

    return response()->json(['token' => $token]);
}

Важно проверять срок действия токена и обновлять его при изменении данных пользователя (роль, компания). Устанавливайте TTL не более 24 часов и используйте рефреш-механизм. Такая конфигурация снижает риск утечки токена и обеспечивает безопасность.

Шаг 2: Встраивание виджета в React-приложение

// В React-компоненте
useEffect(() => {
  // Загрузка Canny SDK
  (function(w, d, i, s) {
    // ... Canny SDK loader
  })(window, document, 'Canny', 'https://cdn.canny.io/sdk.js');

  const initCanny = async () => {
    const { token } = await fetch('/api/canny-token').then(r => r.json());
    window.Canny('identify', {
      appID: process.env.NEXT_PUBLIC_CANNY_APP_ID,
      user: { ssoToken: token },
    });
    window.Canny('render', {
      boardToken: 'YOUR_BOARD_TOKEN',
      basePath: '/feedback',
      ssoToken: token,
    });
  };

  initCanny();
}, []);

Если пользователь не авторизован — виджет не рендерится, вместо этого показываем ссылку на страницу логина. Для ленивой загрузки используйте Intersection Observer. Это снижает начальную загрузку страницы и улучшает Core Web Vitals.

Шаг 3: Обработка вебхуков

Canny отправляет вебхуки при изменении статуса запроса:

Route::post('/webhooks/canny', function (Request $request) {
    // Верификация подписи
    $signature = hash_hmac('sha256', $request->getContent(), config('services.canny.webhook_secret'));
    if (!hash_equals($signature, $request->header('Canny-Signature'))) abort(401);

    $event = $request->json('type');
    $post = $request->json('object');

    if ($event === 'post.statusChanged' && $post['status'] === 'complete') {
        // Уведомляем всех проголосовавших по email
        // Canny делает это автоматически, но можно добавить собственную логику
        Log::info("Canny feature completed: {$post['title']}");
    }

    return response('ok');
});

При ошибках обработки (сетевых или логических) настройте повторную отправку — Canny повторяет запрос в течение 24 часов. Добавьте мониторинг очереди неудачных вебхуков через тот же Laravel Horizon. Без правильной обработки вебхуков вы рискуете пропустить до 15% обновлений.

Типовые сроки этапов интеграции

Почему Canny выгоднее собственной разработки?

Canny окупается за счёт скорости — вы получаете готовую платформу для сбора фичереквестов без затрат на разработку и поддержку. Сравнивая затраты, собственное решение обойдётся как минимум в три раза дороже при аналогичном функционале.

Как обеспечить стабильную обработку вебхуков?

Для надёжной обработки вебхуков настройте повторную отправку при сбоях и мониторинг через очередь Laravel Horizon. Убедитесь, что подпись верифицируется — это защищает от поддельных запросов. Если вебхуки перестают приходить, проверьте SSL-сертификат и доступность эндпоинта.

Что входит в интеграцию Canny

• Настройка SSO (JWT-авторизация с вашей базой пользователей)
• Встраивание виджета (React, Vue, Angular или чистый JS)
• Конфигурация вебхуков (уведомления об изменении статуса)
• Кастомизация внешнего вида (цвета, логотип, тексты)
• Документация (схема интеграции, описание эндпоинтов)
• Обучение команды (работа с board, приоритизация)
• Техническая поддержка на этапе запуска

Мы гарантируем, что интеграция не нарушит существующие процессы авторизации и безопасности. Закажите интеграцию под ключ у нас — получите консультацию инженера.

Сроки и стоимость

Базовая интеграция (SSO + виджет + один вебхук) занимает от 1 до 3 рабочих дней. Если необходима поддержка нескольких виджетов, кастомизация или доработка бэкенда — сроки согласовываются индивидуально. Стоимость рассчитывается исходя из объёма работ — свяжитесь с нами для оценки вашего проекта.

Типичные ошибки при интеграции Canny

Распространённые проблемы и их решения:

• Неправильная конфигурация JWT — отсутствие поля id или неверный алгоритм подписи. Всегда тестируйте токен в панели Canny.
• Пропуск верификации вебхуков — если не проверять подпись, можно принимать фальшивые запросы.
• Игнорирование ролевой модели — в Canny можно разграничить права администраторов и обычных пользователей через companies.

Избежав этих ошибок, вы получите стабильно работающий сбор фичереквестов. Если сомневаетесь в своей реализации — закажите интеграцию под ключ у нас.