Trello Setup Guide

Complete walkthrough to connect Flotify to your Trello board. Takes about 5 minutes.

iYou need a free Trello account. If you don't have one, create it at trello.com/signup.

1. Get your API Key

1

Go to the Trello Power-Up Admin

Open trello.com/power-ups/admin and sign in with your Trello account.

2

Click "New" to create a Power-Up

Fill in the form:

  • Name: Flotify Feedback (or any name you like)
  • Workspace: Select the workspace that contains your target board
  • Iframe connector URL: Leave empty
  • Email: Your email
  • Author: Your name
3

Copy your API Key

After creating the Power-Up, you'll see your API Key on the left sidebar under "API Key". Copy it and save it somewhere safe.

TRELLO_API_KEY=your-api-key-here

2. Generate a Token

4

Generate an authorization token

On the same Power-Up page, next to your API Key, click the link "Token" (or you can generate one manually).

Replace YOUR_API_KEY in the URL below and open it in your browser:

https://trello.com/1/authorize?expiration=never&scope=read,write&response_type=token&key=YOUR_API_KEY

Click "Allow". Trello will display your token. Copy it.

TRELLO_TOKEN=your-token-here
!This token gives read and write access to your Trello account. Keep it secret. Since Flotify runs client-side, this token will be visible in your page source. Only use it on boards where the data is not sensitive.

3. Find your List ID

5

Open your target board

Navigate to the Trello board where you want feedback cards to land. Create a new list called Inbox (or use an existing one).

6

Get the List ID from the API

The easiest way to find your list ID is to open this URL in your browser (replace the values with yours):

https://api.trello.com/1/boards/YOUR_BOARD_ID/lists?key=YOUR_API_KEY&token=YOUR_TOKEN

To find your Board ID: open your board in Trello, add .json at the end of the URL, and look for the "id" field at the top of the JSON.

The API will return an array of lists. Find the one named "Inbox" and copy its id.

// Response example:
[
  {
    "id": "60d5f4b8c3a4e12a3f8b4567",  // <-- This is your List ID
    "name": "Inbox",
    ...
  },
  {
    "id": "60d5f4b8c3a4e12a3f8b4568",
    "name": "In Progress",
    ...
  }
]
TRELLO_LIST_ID=60d5f4b8c3a4e12a3f8b4567

4. Test the connection

7

Initialize Flotify and test

Now that you have all three values, initialize the widget:

main.ts
import { Flotify } from '@flotify/widget'

Flotify.init({
  provider: 'trello',
  trello: {
    apiKey: 'your-api-key',
    token: 'your-token',
    listId: 'your-list-id',
  },
})

// Submit a test feedback
Flotify.open()

Click the bubble, fill in a test feedback, and submit. Check your Trello board — a new card should appear in your Inbox list within seconds.

5. Enable notifications (recommended)

8

Watch your feedback list

To get notified when new feedback arrives:

  • Open your Trello board and find the Inbox list
  • Click the "..." menu on the list header
  • Click "Watch"

You'll now receive Trello notifications (email + mobile push) every time a user submits feedback. This is the fastest way to stay on top of incoming reports.

*Also enable notifications in the Trello mobile app for real-time alerts on your phone.

6. Recommended board structure

We recommend organizing your feedback board with these lists:

InboxFeedback lands here
Under Review
In Progress
Done

When new feedback comes in, it lands in Inbox. You triage it, move it to Under Review, then to In Progress when a developer picks it up, and finally to Done when resolved.

7. Troubleshooting

Card not appearing on the board

  • Double-check your API key, token, and list ID
  • Make sure the token has read,write scope
  • Check the browser console for error messages
  • Verify the list still exists (wasn't archived or deleted)

"Invalid token" error

  • Regenerate your token using the URL in step 4
  • Make sure the token was generated with the same API key

"Unauthorized" error

  • Your API key may be revoked — regenerate it from the Power-Up admin
  • Make sure the Power-Up is associated with the correct workspace