canny

$npx mdskill add TerminalSkills/skills/canny

Collect and prioritize product feedback with Canny

  • Solves the problem of managing feature requests and user feedback
  • Uses Canny SDK/API to integrate with web applications
  • Identifies users and tracks their feedback, votes, and roadmap engagement
  • Embeds a feedback widget and public roadmap in the user interface
SKILL.md
.github/skills/cannyView on GitHub ↗
---
name: canny
description: >-
  Collect and manage product feedback with Canny. Use when a user asks to set
  up a feature request board, prioritize product feedback, build a public
  roadmap, or let users vote on features.
license: Apache-2.0
compatibility: 'Any web app via SDK/API'
metadata:
  author: terminal-skills
  version: 1.0.0
  category: business
  tags:
    - canny
    - feedback
    - roadmap
    - feature-requests
    - product
---

# Canny

## Overview

Canny collects, organizes, and prioritizes product feedback. Users submit feature requests, vote on ideas, and follow updates. Teams build public roadmaps and close the loop when features ship.

## Instructions

### Step 1: Identify Users

```typescript
// components/CannySdk.tsx — Identify logged-in users
'use client'
import { useEffect } from 'react'

export function CannyIdentify({ user }) {
  useEffect(() => {
    if (window.Canny && user) {
      window.Canny('identify', {
        appID: process.env.NEXT_PUBLIC_CANNY_APP_ID,
        user: {
          id: user.id,
          email: user.email,
          name: user.name,
          avatarURL: user.avatar,
          created: new Date(user.createdAt).toISOString(),
          customFields: { plan: user.plan, mrr: user.mrr },
        },
      })
    }
  }, [user])
  return null
}
```

### Step 2: Embed Feedback Widget

```tsx
// Embed the feedback widget in your app
function FeedbackButton() {
  return (
    <button
      data-canny-link
      data-board-token="your-board-token"
      className="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-full"
    >
      💡 Feedback
    </button>
  )
}
```

### Step 3: API Integration

```typescript
// lib/canny.ts — Programmatic feedback management
const CANNY_API_KEY = process.env.CANNY_API_KEY!

// Create a post (feature request) programmatically
await fetch('https://canny.io/api/v1/posts/create', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    apiKey: CANNY_API_KEY,
    authorID: userId,
    boardID: 'board-id',
    title: 'Dark mode support',
    details: 'Would love a dark theme option for the dashboard.',
  }),
})

// Retrieve top voted posts
const response = await fetch('https://canny.io/api/v1/posts/list', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    apiKey: CANNY_API_KEY,
    boardID: 'board-id',
    sort: 'score',
    limit: 20,
  }),
})
```

## Guidelines

- Free tier: 1 board, basic features. Growth ($79/mo): unlimited boards, roadmap, integrations.
- Use custom fields to segment feedback by plan (show which features paying customers want).
- Public changelog closes the loop — users see when their requested features ship.
- For free alternative, consider using GitHub Discussions or a simple upvote board.
More from TerminalSkills/skills