Embedding Cards

Need to show a rich, always up to date Trello card somewhere outside of Trello? We've got you covered.

There are two modes for embedded Trello cards. The default, interactive mode, which depending on the viewing members permissions will allow folks to vote on, watch / unwatch, join / leave, and even comment on the card:

All hands on deck!

As well as the non-interactive, compact mode:

All hands on deck!

The easiest way to embed a Trello card on your site is to include the following code in your sites HTML:

1
2
<blockquote class="trello-card">
  <a href="{url to card}">Trello Card</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

Want to use the compact version of the card? Easy, just switch the class of the blockquote to "trello-card-compact" like so:

1
2
<blockquote class="trello-card-compact">
  <a href="{url to card}">Trello Card</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

Now when the page loads, the script will find that card, and replace it with a fancy embedded version.

On Demand Embedding

If you need a little more control over when Trello's embed script goes and find's cards to embed on the page, or where it should look, you can call it from within your own script after it has loaded. Let's say you are loading in some HTML for cards dynamically.

1
2
window.TrelloCards.load(document, { compact: false, allAnchors: false });

The first argument is the DOM node to search within. The second argument is an options object. You can specify that you'd like cards to be embedded in compact mode, as well as if the embed script should search all anchor tags, or just ones in the blockquote with the trello-card or trello-card-compact classes.

Create Embedded Cards Programmatically

In addition to having the embed script check the DOM for cards to be embedded, you can have it create new ones from thin air.

1
2
window.TrelloCards.create('593acdfa05f7adbfabb18314', el, {
  compact: false,
  onLoad: function(evt) {
    // Callback after the card has loaded
    // Can be used to resize the parent container
    var iframe = evt.path[0];
    var el = document.getElementById('card-container');
    el.style.height = iframe.clientHeight;
    el.style.width = iframe.clientWidth;
  },
  onResize: function(dim) {
    // Callback after the card resizes when the comments
    // section is expanded or collapsed
    var el = document.getElementById('card-container');
    el.style.height = dim.height;
  }
});

Here, the first argument is the id of the card, or its url. The second argument is the DOM node to add the embedded card to as a child. And lastly you can provide an options object to specify if the card should be in compact mode.

Example

Compact Card

Trello Card

And here is the code for the above:

1
2
<blockquote class="trello-card-compact">
  <a href="https://trello.com/c/R7iN6PjX/1589-new-in-app-feedback-channel">Trello Card</a>
</blockquote>

Full Card

Trello Card

And here is the code for the above:

1
2
<blockquote class="trello-card">
  <a href="https://trello.com/c/R7iN6PjX/1589-new-in-app-feedback-channel">Trello Card</a>
</blockquote>
<script>
  if (window.TrelloCards) {
    setTimeout(() => window.TrelloCards.load(), 1000);
  }
</script>
<script src="https://p.trellocdn.com/embed.min.js"></script>