How to Embed Trello Boards and Cards in WordPress?

Do you have large team-based projects to manage, and you want to use Trello to its maximum potential? Are you planning to integrate your Trello boards directly to your website? If so, you’ve come to the right place! In this guide, we’ll show you 3 different methods to embed Trello boards and cards in WordPress.

Why embed Trello boards and cards in WordPress?

Trello is one of the most popular visual project management tools out there. Almost every collaborative project or project team loves Trello because of its design and the ability to easily set up short term and daily tasks. Simply build your board, add your cards, and set up your planned task lists. Besides, you can also enjoy additional features when setting up your task boards, such as rule-based triggers for your tasks, calendar commands, custom card, board buttons, and much more. And of course, you can also embed Trello boards on your site.

So, what advantages does embedding Trello in WordPress have? While the mobile app and the web browser viewer for Trello is quite sufficient, there are a couple of advantages to integrating Trello to your website. For one, there’s productivity. With your team being able to access your Trello boards quickly, they can work better. You can provide multiple teams with access to specific public boards without having to worry about them confusing between different boards or having to hassle to look for them. Stick them to the cards and boards relevant to them, and you’ll make their life much easier.

Additionally, you can display cards on pages and posts to give information to fellow site managers or other customers. Managing a large scale project running off your website? Simply embed your Trello boards and cards and let your team co-operate with each other with much better efficiency. And all without the need to invite multiple users directly to your Trello boards.

How to embed Trello boards and cards in WordPress?

In this guide, we’ll show you 3 methods to embed Trello boards and cards in WordPress:

  1. With an embed script
  2. Using iFrame
  3. With a plugin

Let’s have a closer look at each one of them.

1. Connect Trello and WordPress with an embed script

Trello lets you embed a little snapshot of your boards and cards using a javascript code. But, this javascript code can be a bit limiting. For one, it doesn’t show a lot of information, nor is it very easily customizable. Also, the embed isn’t interactable, and clicks on the embed take you directly to the board.

However, there’s a fair number of advantages of using this script over other methods. First, you can embed your private boards and provide a direct link to them with only minimal information to identify them. Besides, the little snapshot works, especially for cards, so you can just add a little card embed for any of your purposes.

A) Grabbing your Trello Board/Cards link

One way to embed this on your website is by adding code to your pages/posts. But first, you have to get your Trello Board/Card URL. To get your Trello board URL, open it, and on your right sidebar, you will be able to see a More button next to the 3 dots on the top right. Click it, go to Link to this board and you’ll get your Trello board’s link/URL.

embed trello boards and cards in wordpress - trello link

Alternatively, if you want to get the link to your individual Trello card, simply open the card first. Then, click Share on the bottom of the card and you’ll see the link under the Link to this card section.

To add code to your WordPress pages and posts, you can use the Embed code free plugin. This tool essentially allows you to add scripts to either the footer or header of your pages/posts. This is one of the easiest ways of embedding Trello boards and cards in your WordPress sites, but you’re not exactly limited to this either. You can also use plugins such as Enhanced Text Widgets and directly place your scripts in customized widgets instead.

So now, let’s go ahead and install the Embed Code plugin. To do so, open your Dashboard Sidebar, click on Plugins > Add new. Then, use the search bar on the far right to search for Embed Code. Click Install and once the button changes to Activate, press it again. Now, the plugin is activated and ready to go.

B) Embedding cards with the Embed script

Now, all you have to do is paste the following script onto your pages/posts.

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

Simply change {url to card} for your Trello card’s link. To do that, simply follow the steps described above. For example, to embed our Trello link our script is:

<blockquote class="trello-card">
<a href="https://trello.com/c/z****LZj/8-166-2020-07-02">Trello Card</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

Now, to embed your Trello cards and boards, you can use the embed code plugin. Once you install the plugin, under the post/page editor, you’ll see a meta editor section labeled “Embed code.” You’ll see the Head code and Footer code boxes. So, you can place your script onto any of the two fields. For our demo, we’ll use the Footer code box.

Simply paste the customized Script and once you save/publish your page or post, the Trello Card will be embedded.

C) Embedding boards with the Embed script

The process to embed boards to your WordPress pages/posts is identical to the process for cards. You just need to use a different code for Boards instead:

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

Simply paste your Trello Board’s link into {url to board}. This should look something like this:

<blockquote class="trello-board-compact">
<a href="https://trello.com/b/g***h3Ec">Trello Board</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

Then, go to the page or post you want to add the Trello board to and paste the code onto the head or footer code section. Save the changes, and that’s it! You’ve embedded a Trello board on your site.

PRO TIP

Embedding Trello boards and cards using a script is a good option for some, but it lacks some features that you might need. For one, it’s not an interactive embed, and all you see is a basic Trello Board/Card with minimal detail. Clicking on the embed takes you to the actual Trello board instead, so it’s only useful to add an instant link to your Trello boards/Cards with minimal details to show.

2) Integrate Trello with WordPress using iFrame

Considering the limitations of the embed script method, using an iFrame can be a much better option. Especially when you want to display the Trello board/card on your website.

You can embed a Trello board/card using an iFrame link as long as your board is public. You can change your board’s visibility using the Visibility setting next to your Board title on the Topbar. Simply change it from Private or Team to Public, and once you agree to the prompt, your board should be ready to be iFrame linked.

Now, to find the link for your Trello board, go to the right sidebar and click the More button next to the 3 dots. Then, go to Link to this board and you’ll get the board’s URL.

embed trello boards and cards in wordpress - trello link

Alternatively, to get the link to an individual card, open the card, click Share and you’ll see the link under Link to this card.

Using iFrames with Trello links

After you get your link, add .HTML to the end of the link and save it. For example, for our board link, we’d add .HTML to the end:

https://trello.com/b/g****Ec.html

Then, all you need to do is use the following iFrame link inside an HTML block in WordPress.

<iframe src="https://trello.com/b/g******c.html">

Simply change the link inside the src attribute to your Trello board/card’s link with a .HTML in the end, and once you save your post/page, the embed should be displayed on your site.

For this, you’ll need to use the HTML block using the Visual editor and then paste your iFrame link. For a more clear Trello iFrame window, we’ll add a few more attributes to the link.

Once you’re done, your embed should look like this.

embed trello boards and cards in wordpress - iframe preview

PRO TIP

Embedding Trello boards and cards using iFrame is a great option. It’s user-friendly and it’s an interactive embed that shows the card or board information without redirecting you to the actual Trello board.

3) Embed Trello Boards and Cards in WordPress using a plugin

embed trello boards and cards in wordpress - plugin title

One of the easiest and beginner-friendly options to embed Trello onto your WordPress websites is to use WooTrello. Now, this is less of a display option and more of a WooCommerce Checkout hook that you can integrate with Trello. This plugin lets you integrate your WooCommerde Thank you page with your Trello board. This way, you can create a Trello board automatically every time your customer places a new order. So, you can streamline your tasks and details using order tasks created automatically, complete with Billing details, Date, and other additional order details.

Of course, the plugin comes with some advantages such as crystal clear interface and easy integration using WooCommerce and checkout hooks. Additionally, you can also enable one-click authentication for your Trello view. WooTrello is designed to support WooCommerce and help you run your store smoothly. So, if you’re running a business, you can allow the plugin to create a new Trello task after every new order or order update.

Installing the WooTrello plugin

To start with our third method to integrate Trello boards with WordPress, you need to install the plugin. To do so, open your WordPress Admin Dashboard, and go to Plugins > Add New. Then, use the search bar on the far right to search for WooTrello. Next, click on Install and then activate it.

embed trello boards and cards in wordpress - plugin install

Using the WooTrello plugin

Once you install and activate the plugin, it will automatically take you to its setup screen. Alternatively, you can open the plugin by clicking on WooTrello on the Admin sidebar.

Then, the plugin might ask you permission for providing you feature update notifications and opt into their diagnostic tracking services. If you want to share your non-sensitive usage data, click on Allow and continue. Alternatively, you can press Skip.

Grabbing your Trello Access token

Now, for the integration, you need to sync your Trello board with your WordPress installation using the Trello API. Click on the Trello Access Code link on the far right above the Trello Access code field.

You will log in to your Trello account and WooTrello will ask you for permission to access your account information.

embed trello boards and cards in wordpress - plugin allow

Agree to it by clicking on Allow, and you will see a token for the Trello access.

Copy this code and open the window/tab where you have your Plugin page open. Then, paste this token onto the Post Trello Access code here field and click Save Access code.

Integrating your Trello boards and your Checkout page using WooTrello

To enable your Trello board integration, tick the Enable/Disable box. Then, use the drop-down Trello boards option to select one of your Trello boards and then use the Select Trello list to choose one of them.

Next, add a tick to all the order details that you display on your Trello card. After you do so, click Save New Checkout page order settings.

After that, the WooTrello and WooCommerce page checkout integration should be complete. After this, every time a customer completes an order on your online store, the plugin will automatically create a Trello task according to your saved settings.

embed trello boards and cards in wordpress - plugin demo

Conclusion

All in all, Trello is an excellent tool to organize your projects and tasks into boards and cards. So, embedding Trello boards and cards in WordPress can help you and your team be more productive.

In this tutorial, we’ve shown you 3 methods to embed Trello boards and cards on your site. All of them are beginner-friendly and have some pros and cons. Considering the flexibility it provides and how easy it is to set up, we recommend using the iFrame method. It will allow you to add an interactive board or card embed.

Our guide was quite hefty and had some coding bits that WordPress beginners might find confusing. So, if you have any questions, go ahead and let us know in the comment section below.

Finally, for more information about how to embed different kinds of content on your website, check out our guide on how to embed Google sheets in WordPress.