Take your cards with you across the web
Your cards don’t have to stay on your board. Embed or natively render Trello cards across multiple platforms.
Your cards don’t have to stay on your board. Embed or natively render Trello cards across multiple platforms.
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.