Canny Integration for Feature Requests on Your Site

Feature requests scattered across email, messengers, and ticketing systems—impossible to prioritize. The team spends up to 10 hours a week collecting and classifying instead of developing. Canny solves this by providing a unified window for collecting, voting, and tracking request status. We have implemented over 50 Canny integrations for projects of various scales—from startups to enterprise—ensuring seamless embedding into existing infrastructure. Our engineers with five years of experience have helped clients reduce feature request collection time by 70% and increase request conversion by 40% after SSO setup.

Let's break down how to embed Canny into a web application with React frontend and Laravel backend, set up SSO via JWT, and automatically notify users of changes via webhooks. Proper SSO configuration is key: after implementation, the number of feature requests from users grows by an average of 40%.

How to set up SSO via JWT for seamless authentication?

Canny supports SSO via JWT so users don't have to create a separate account. More details in Canny documentation.

Step 1: Generate JWT token on the server

// 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]); } 

It is important to check the token's expiration and refresh it when user data changes (role, company). Set TTL to no more than 24 hours and use a refresh mechanism. This configuration reduces the risk of token leakage and ensures security.

Step 2: Embed the widget in a React application

// В 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(); }, []); 

If the user is not authenticated, the widget does not render; instead, show a link to the login page. Use Intersection Observer for lazy loading. This reduces initial page load and improves Core Web Vitals.

Step 3: Handle webhooks

Canny sends webhooks when a request status changes:

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'); }); 

In case of processing errors (network or logical), configure retry — Canny retries requests within 24 hours. Add monitoring of failed webhooks queue through Laravel Horizon. Without proper webhook handling, you risk missing up to 15% of updates.

Typical integration phase timelines

Why Canny is better than in-house development?

Canny pays off through speed—you get a ready-made platform for collecting feature requests without development and support costs. Comparing costs, an in-house solution will cost at least three times more for similar functionality.

How to ensure stable webhook processing?

For reliable webhook processing, configure retry on failures and monitoring via Laravel Horizon. Ensure signature verification protects against fake requests. If webhooks stop arriving, check the SSL certificate and endpoint availability.

What's included in Canny integration

• SSO setup (JWT authentication with your user database)
• Widget embedding (React, Vue, Angular, or vanilla JS)
• Webhook configuration (notifications on status changes)
• Appearance customization (colors, logo, texts)
• Documentation (integration scheme, endpoint description)
• Team training (working with board, prioritization)
• Technical support during launch

We guarantee that the integration will not disrupt existing authentication and security processes. Order a turnkey integration from us—get an engineer consultation.

Timelines and cost

Basic integration (SSO + widget + one webhook) takes 1 to 3 business days. If multiple widgets, customization, or backend modifications are needed, timelines are negotiated individually. The cost is calculated based on the scope of work—contact us for a project estimate.

Typical mistakes when integrating Canny

Common problems and their solutions:

• Incorrect JWT configuration — missing id field or wrong signing algorithm. Always test the token in the Canny admin panel.
• Omitting webhook verification — without signature check, you can accept fake requests.
• Ignoring the role model — Canny allows differentiating admin and regular user permissions via companies.

Avoiding these mistakes will ensure stable feature request collection. If you doubt your implementation, order a turnkey integration with us.