Trello Developers

Cards

How to embed Trello cards around the web

The Basics

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:

As well as the non-interactive, compact mode:

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

<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:

<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.

Embedding more than one card on a page?

If you are embedding multiple cards on a single page, you only need to include the script tag once. It's probably easiest to include it at the bottom of the <body>, but exactly where you put it doesn't really matter.

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.

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.

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

Trello Card

Cards


How to embed Trello cards around the web

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.