Can I create a Wix search bar that finds Trello cards by title or card ID?

Ask the community
,
1

I run a lawn care business and use Trello to track all our customer jobs. Each Trello card title is the customer’s name (e.g., “Firstname Lastname”) and the card contains job details like date and description. I’d like to set up a search bar on my Wix site where:

  1. A customer enters their name → the site searches a specific Trello board for any cards with that name in the card title.
  2. The results would show:
  • The Trello card title
  • The date or description field
  • A button or link that opens the Trello card in a new tab

OR

They can also enter their Job ID (which is the Trello card ID) directly, and it will match and return their card. I don’t care which method works better (title match or ID), just whichever is possible.

Is this doable with Wix Velo and the Trello API? If so, how would I go about setting that up — capturing the input, calling Trello, and displaying results dynamically?

Thanks!

2

API integrations like this one require Intermediate to Advanced knowledge of Velo, not only because it is fetching data from an external third-party source, but also because this involves securely storing and managing API keys, tokens and other credentials which you will not want your users to get access to. So all the API calls that you make will need to be made through your site’s backend.

Now coming to which method will work? On taking a look at Trello’s APIs it seems like both methods should work. It really depends on what you would consider more user friendly and easily accessible by your site’s users - also while keeping security in mind.

So yes, this is doable.

Here’s a list of resources that will be useful:

Happy coding!

1 Like
3

Hello,

Yes, it’s doable with Wix Velo and the Trello API.

Steps:
Get Trello API Key & Token:
From Trello’s developer site.

Enable Velo in Wix:
Turn on Dev Mode in your Wix editor.

Create UI:

Input box (#searchInput)

Button (#searchButton)

Repeater (#resultsRepeater)

Backend Code (trello.jsw):

import {fetch} from ‘wix-fetch’;

const API_KEY = ‘YOUR_KEY’;
const TOKEN = ‘YOUR_TOKEN’;
const BOARD_ID = ‘YOUR_BOARD_ID’;

export async function searchTrelloCards(query) {
const url = https://api.trello.com/1/boards/${BOARD_ID}/cards?key=${API_KEY}&token=${TOKEN};
const res = await fetch(url);
const cards = await res.json();
const byId = cards.find(c => c.id === query || c.shortLink === query);
if (byId) return [byId];
return cards.filter(c => c.name.toLowerCase().includes(query.toLowerCase()));
}
Client Code (Page.js):

import {searchTrelloCards} from ‘backend/trello’;

$w.onReady(() => {
$w(‘#searchButton’).onClick(async () => {
const query = $w(‘#searchInput’).value;
const results = await searchTrelloCards(query);
$w(‘#resultsRepeater’).data = results.map(card => ({
title: card.name,
description: card.desc,
link: card.shortUrl
}));
});
});

Best Regard,
Brian