Last updated Dec 16, 2019

Embedding Boards

Need to show a rich, easy to identify Trello board somewhere outside of Trello? We've got you covered.

Currently, we only support a compact, non-interactive mode for boards:

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

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

Embedding more than one board on a page?

If you are embedding multiple boards or 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 boards 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 boards dynamically.

1
2
window.TrelloBoards.load(document, { 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 the embed script to search all anchor tags, or just ones in the blockquote with the trello-board-compact classes.

Create Embedded Boards Programmatically

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

1
2
window.TrelloBoards.create("4d5ea62fd76aa1136000000c", el);

Here, the first argument is the id of the board, or its url. The second argument is the DOM node to add the embedded board to as a child.

Rate this page: