Интеграция 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.

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