Some of your favorite tools such as Confluence and Dropbox Paper already know how to detect Trello card urls, and enrich them with live embeds.
Embed a Trello card anywhere you can load some JavaScript, in 4 lines.
<blockquote class="trello-card-compact"> | |
<a href="https://trello.com/c/CjBy4OpQ"></a> | |
</blockquote> | |
<script src="https://p.trellocdn.com/embed.min.js"></script> |
Leave memorizing lines for the actors. Trello has the exact syntax covered.
📚 Learn more in our embedding guide
For when you’re comfortable with a bit more code and want more control.
// The script at https://p.trellocdn.com/card.min.js | |
// must already be loaded at this point | |
const idCard = 'CjBy4OpQ'; | |
const api = 'https://api.trello.com/1/card'; | |
const opts = { | |
fields: 'name,closed,cover,url,badges,labels', | |
customFields: true, | |
customFieldItems: true, | |
members: true, | |
stickers: true, | |
}; | |
const qs = Object.keys(opts) | |
.map((param) => `${param}=${opts[param]}`) | |
.join('&'); | |
const resp = await fetch(`${api}/${idCard}?${qs}`); | |
const cardData = await resp.json(); | |
// create the card element | |
const cardEl = document.createElement('trello-card'); | |
// pass in the data about the card | |
cardEl.card = cardData; | |
cardEl.labeltext = true; | |
cardEl.colorblind = true; | |
// insert our card element into the DOM | |
document.getElementById('card-container').appendChild(cardEl); |
📚 Learn more in our card component guide
Made with 💖 by Trello in NYC and around the world.