Trello API integration with website

Integrating Trello API with Website

Trello is used as a lightweight task manager for small teams. Integration with a website allows automatically creating cards from requests, displaying a public roadmap from a Trello board, and synchronizing task statuses.

Authentication

Trello uses API Key + Token:

$apiKey   = config('services.trello.api_key');
$apiToken = config('services.trello.api_token');

// Base URL for all requests
$base = "https://api.trello.com/1";
$auth = "?key={$apiKey}&token={$apiToken}";

Creating Card from Form

class TrelloService
{
    public function createCard(string $listId, array $data): array
    {
        $resp = Http::post("https://api.trello.com/1/cards", [
            'idList' => $listId,
            'name'   => $data['subject'],
            'desc'   => "**From:** {$data['email']}\n\n{$data['message']}",
            'pos'    => 'top',
            'key'    => config('services.trello.api_key'),
            'token'  => config('services.trello.api_token'),
        ]);

        $card = $resp->json();

        // Add label by priority
        if ($data['priority'] === 'high') {
            Http::post("https://api.trello.com/1/cards/{$card['id']}/idLabels", [
                'value' => config('services.trello.urgent_label_id'),
                'key'   => config('services.trello.api_key'),
                'token' => config('services.trello.api_token'),
            ]);
        }

        return $card;
    }
}

Public Roadmap from Trello

async function getRoadmap(boardId: string): Promise<RoadmapColumn[]> {
  const lists = await fetch(
    `https://api.trello.com/1/boards/${boardId}/lists?cards=open&key=${KEY}&token=${TOKEN}`
  ).then(r => r.json());

  return lists
    .filter((list: any) => !list.closed)
    .map((list: any) => ({
      id:    list.id,
      name:  list.name,
      cards: list.cards.map((card: any) => ({
        id:          card.id,
        title:       card.name,
        description: card.desc,
        labels:      card.labels.map((l: any) => l.name),
        url:         card.shortUrl,
      })),
    }));
}

Webhooks

// Create webhook in Trello (once during setup)
Http::post("https://api.trello.com/1/webhooks", [
    'callbackURL' => route('webhooks.trello'),
    'idModel'     => $boardId,
    'key'         => $apiKey,
    'token'       => $apiToken,
]);

// Handler
Route::post('/webhooks/trello', function (Request $request) {
    $action = $request->input('action');
    if ($action['type'] === 'updateCard') {
        $card      = $action['data']['card'];
        $newListId = $action['data']['listAfter']['id'] ?? null;
        if ($newListId) SyncTrelloCardStatus::dispatch($card['id'], $newListId);
    }
    return response('ok');
});

Timeline

Creating cards from forms + roadmap: 2–3 business days.