Quick Start

Get the Flotify widget running on your site in under 2 minutes.

Install the package

npm install @flotify/widget

Get your Trello credentials

You need three things from Trello: an API key, a token, and a list ID. See the full Trello Setup Guide for a detailed walkthrough.

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

*That's it. A feedback bubble will appear in the bottom-right corner of your page. When users submit feedback, a card is created on your Trello board with the title, description, type, priority, screenshot, and browser metadata.

Framework Examples

Flotify is framework-agnostic. Here's how to use it with popular frameworks:

React (useEffect)

import { useEffect } from 'react'
import { Flotify } from '@flotify/widget'

export default function App() {
  useEffect(() => {
    const widget = 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!,
      },
    })

    return () => Flotify.destroy()
  }, [])

  return <div>Your app</div>
}

Vue (onMounted)

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Flotify } from '@flotify/widget'

onMounted(() => {
  Flotify.init({
    provider: 'trello',
    trello: {
      apiKey: import.meta.env.VITE_TRELLO_API_KEY,
      token: import.meta.env.VITE_TRELLO_TOKEN,
      listId: import.meta.env.VITE_TRELLO_LIST_ID,
    },
  })
})

onUnmounted(() => Flotify.destroy())
</script>

Plain HTML

<script src="https://cdn.jsdelivr.net/npm/@flotify/widget/dist/index.js"></script>
<script>
  Flotify.init({
    provider: 'trello',
    trello: {
      apiKey: 'your-api-key',
      token: 'your-token',
      listId: 'your-list-id',
    },
  })
</script>