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

Уникнувши цих помилок, ви отримаєте стабільно працюючий збір фічереквестів. Якщо сумніваєтеся у своїй реалізації — замовте інтеграцію під ключ у нас.