Configuration

All available options to customize the Flotify widget.

Full configuration example

import { Flotify } from '@flotify/widget'

Flotify.init({
  // Required: which provider to use
  provider: 'trello',

  // Required: Trello credentials
  trello: {
    apiKey: 'your-api-key',
    token: 'your-token',
    listId: 'your-list-id',
  },

  // Optional: widget position (default: 'bottom-right')
  position: 'bottom-right', // or 'bottom-left'

  // Optional: color theme (default: 'light')
  theme: 'light', // 'light' | 'dark' | 'auto'

  // Optional: accent color for the bubble and buttons (default: '#09090b')
  accentColor: '#09090b',
})

Options Reference

Option	Type	Default	Description
`provider`	`'trello'`	—	Required. The integration provider.
`trello.apiKey`	`string`	—	Required. Your Trello API key.
`trello.token`	`string`	—	Required. Your Trello authorization token.
`trello.listId`	`string`	—	Required. The ID of the Trello list where cards will be created.
`position`	`string`	`'bottom-right'`	Widget bubble position. `'bottom-right'` or `'bottom-left'`.
`theme`	`string`	`'light'`	`'light'`, `'dark'`, or `'auto'` (follows system preference).
`accentColor`	`string`	`'#09090b'`	Hex color for the bubble and primary buttons.

Theming

The widget adapts to light and dark mode. Set theme: 'auto' to follow the user's system preference, or force a specific theme.

// Follow system preference
Flotify.init({ theme: 'auto', ... })

// Force dark mode
Flotify.init({ theme: 'dark', ... })

// Custom accent color (e.g., your brand color)
Flotify.init({ accentColor: '#0079BF', ... })

Environment Variables

We recommend storing your Trello credentials in environment variables instead of hardcoding them.

.env.local

NEXT_PUBLIC_TRELLO_API_KEY=your-api-key
NEXT_PUBLIC_TRELLO_TOKEN=your-token
NEXT_PUBLIC_TRELLO_LIST_ID=your-list-id

main.ts

Flotify.init({
  provider: 'trello',
  trello: {
    apiKey: process.env.NEXT_PUBLIC_TRELLO_API_KEY!,
    token: process.env.NEXT_PUBLIC_TRELLO_TOKEN!,
    listId: process.env.NEXT_PUBLIC_TRELLO_LIST_ID!,
  },
})

!Even with environment variables, the values are embedded in the client-side bundle at build time. They are not secret. Only use Trello boards where the data is not sensitive.