3 Methods to connect Trello to a WordPress website

When having an online business, or a company website that works on collecting clients’ leads, then you need to organize your work with an automatic behavior that saves money, time, and effort and may reduce conversion loss. One of the most widely used visual project management applications is Trello.

What is Trello?

Trello is a visual project management and task-tracking application that gives company team members the ability to manage any kind of project. Add paperwork, a to-do list, or even automation: Make everything specific to how your team handles it best.

Why use Trello App?

Because of its aesthetics and simplicity in setting up daily and short-term assignments, Trello is a favorite among almost all collaborative projects and project teams. Build your board, including your cards, and organize your scheduled work lists. When setting up your task boards, you can also take advantage of features like rule-based task triggers, calendar commands, personalized cards, board buttons, and much more. Naturally, you can also incorporate Trello boards into your website.

WordPress integration with Trello benefits

There are benefits to integrating Trello with your website, even though the mobile app and web browser viewer are more than adequate. There is productivity, to start. Your team will manage more effectively if they can immediately access your Trello boards. Access to particular public boards can be granted to many teams without having to worry about them mistaking different boards or having to go through the trouble of looking for them. You can greatly simplify their lives by sticking them to the cards and boards that are permitted to them.

You may also add cards on pages and posts to share information with other site administrators or users. managing a significant project that is linked to your website? Without having to explicitly invite numerous individuals to your Trello boards, just embed your Trello boards and cards to enable your team to collaborate far more effectively.

How to add Trello cards and boards to a WordPress website?

Three techniques for embedding Trello boards and cards in WordPress are as listed inthis article:

1- Use a Wootrello plugin to embed Trello Boards and Cards

Utilizing WooTrello plugin is one of the simplest and most user-friendly ways to use Trello boards and cards on your WordPress websites. This is more of a WooCommerce Checkout hook that you can link with Trello than it is a display option. With the help of this plugin, you can link your Trello board and WooCommerce thank you page. This will enable you to automatically build a Trello board each time a new order is placed by a customer. Therefore, you may streamline your tasks and data by using order tasks that are automatically created and include extra order details such as dates and billing information.

Wootrello benefits

Of course, the plugin has several benefits, like a very user-friendly interface and simple connection with WooCommerce and checkout hooks. For your Trello view, you may also enable one-click authentication. WooTrello is made to work with WooCommerce and assist you in managing your store effectively. You can therefore permit the plugin to create a new Trello task after each new order or order modification if you run a business.

The WooTrello plugin installation

Installing the plugin is required before using our third technique to link Trello boards with WordPress. To do this:

1. Navigate to Plugins > Add New on your WordPress Admin Dashboard.
2. Then, look for WooTrello using the search box on the far right.
3. After that, select Install and activate it.

WooTrello activation

• The plugin will automatically bring you to its setup screen after installation and activation. You can also access it by selecting WooTrello from the Admin sidebar.
• The plugin may then request your email address to send you feature update notifications and enroll you in their diagnostic tracking services.
• Click Allow and proceed if you want to share your non-sensitive usage information. You can also choose to click Skip.

Get your Trello Access token for integration

Utilizing the Trello API, you must sync your WordPress installation with your Trello board in order to complete the integration.

• On the far right, just above the Trello Access code area, select the Trello Access Code link.
• After logging into your Trello account, WooTrello will request your email to access your account data.
• You can accept it by selecting Allow, at which point a token for Trello access will appear.
• Open the window or tab where your Plugin page is open and paste this code there.
• After that, click Save Access code after pasting this token into the Post Trello Access code here section.

Use WooTrello to integrate your Trello boards with your checkout page

• Check the Enable/Disable box to make your Trello board integration active.
• Then, choose one of your Trello boards using the Select Trello list after using the drop-down Trello boards option to do so.
• Put a checkmark next to each order information that you have listed on your Trello card.
• Click Save New Checkout page order settings when finished.

The integration between WooTrello and WooCommerce’s page checkout should then be finished. Now, the plugin will automatically create a Trello task each time a customer completes a purchase on your online store in accordance with your stored parameters.

Bonus: HTML-based Trello board embed

Using a little HTML, you can also show out your Trello board on your website. Because it isn’t interactive, this approach isn’t the best, but it is also rather simple to use.

Simply copy and paste the following HTML code into your WordPress website to add a Trello board:

<blockquote class="trello-board-compact">

<a href="{url to board}">Trello Board</a>

</blockquote>

<script src="https://p.trellocdn.com/embed.min.js"></script>

The script will now locate the card and replace it with an embedded version every time the page where you placed the code loads. Visit this website for further details if you’re interested.

 2- Use an iFrame to integrate Trello with WordPress.

Given the drawbacks of the embed script technique, using an iFrame may be a much better choice. Particularly if you want to show the Trello board or card on your website.

• If your Trello board is public, you can embed a Trello board or card using an iFrame link.
• Use the Visibility setting next to your board’s title in the top toolbar,
• you can modify the visibility of your board.
• When you accept the prompt, all you have to do is change it from Private or Team to Public, and your board will be prepared for iFrame linking.
• Go to the right sidebar and click the More button next to the 3 dots to discover the connection to your Trello board.
• Once you have the board’s URL, go to the Link to this board.

As an alternative

• you can open the card, click Share,
• and then find the link under the URL to this card to acquire the link to a specific card.

Linking to Trello in iFrames

Once you have your link, save it by appending.HTML to the end of the link. For instance, to the end of our board link, we would add.HTML:

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

The only thing left to do is insert the following iFrame URL into a WordPress HTML block.

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

• Once you save your post or page, the embed should appear on your website.
• All you need to do is modify the link inside the src attribute to the link for your Trello board or card, with a.HTML at the end.
• You must put your iFrame URL into the HTML block using the Visual editor for this. We will increase the link’s characteristics to create a clearer Trello iFrame window.

TIP

Using iFrame to embed Trello boards and cards is a fantastic choice. It’s easy to use and has an interactive embed that displays information from cards or boards without taking you to the actual Trello board.

3- Use a Java script code to connect WordPress and Trello

Using javascript code, Trello enables you to insert a small screenshot of your boards and cards. This code does have certain restrictions, though. For starters, it isn’t particularly adjustable and doesn’t provide a lot of information. Additionally, clicking on the embed takes you immediately to the board without allowing interaction.

Connecting trello to WordPress by Javascript benefits

Even so, there are a number of benefits to employing this script as opposed to alternative strategies. First, with simply a brief description to identify them, you can embed your private message boards and provide a direct link to them. The little image is also particularly useful for cards.

A) Get the URL to your Trello Board or Cards

Including code in your pages or posts is one approach to embed something on your website.

• You must first obtain the URL for your Trello Board or Card.
• Open your Trello board, and you will see a More button next to the three dots in the top right corner.
• Click that to retrieve your board’s URL.
• You’ll find your Trello board’s link/URL when you click it and select Link to this board.

Use any Embed code free plugin to add code to your WordPress pages and posts. With this tool, you can essentially add scripts to the header or footer of your pages or articles. Although it’s one of the simplest methods, there are other ways to integrate Trello boards and cards into WordPress sites. To directly insert your scripts in customised widgets, you can also utilise plugins like Enhanced Text Widgets.

Let’s install the Embed Code plugin

Right away:

Open your Dashboard Sidebar and select Plugins > Add new from the menu.

Then, look for Embed Code using the search box on the far right.

After the button changes to Activate, click Activate. The plugin is now active and ready to use.

B) Using the Embed script to embed cards

All that is left to do is insert the script below into your sites or posts.

<blockquote class="trello-card">

<a href="{url to card}">Trello Card</a>

</blockquote>

<script src="https://p.trellocdn.com/embed.min.js"></script>

Just edit the link to your Trello card to read {url to card}.” Simply follow the directions listed above to accomplish that. For instance, our script is as follows to embed our Trello card:

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

Use the embed code plugin to embed your Trello cards and boards.

• Once the plugin is installed, a meta editor area with the label “Embed code” will be shown under the post/page editor.
• The Head code and Footer code fields are visible.
• You can therefore enter your script into either of the two fields.

We’ll use the Footer code box for our demonstration.

• Simply paste the modified Script, and the Trello Card will be inserted after you save/publish your page or post.

C) Using the Embed script to embed boards

The steps for embedding boards into your WordPress articles and pages are the same as those for embedding cards. Simply substitute the following code for Boards:

<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 enter the link of your Trello Board there under {url to board} This should resemble something like:

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

the code into the header or footer code section of the page or article you want to include the Trello board in. Once you save the modifications, you’re done! On your website, you’ve included a Trello board.

TIP

For some people, using a script to embed Trello boards and cards is a good choice, but it is missing some functionality that you might require. For beginners, it isn’t an interactive embed; all that is displayed is a plain Trello Board or Card with little to no content. It’s only good to provide a quick link to your Trello boards or cards with the bare minimum of information revealed because clicking on the embed brings you to the actual Trello board.

How to use WordPress’s Trello boards and cards to their full potential?

The first step is just to embed your Trello boards into your WordPress website.

Use the tool at this point to organise your chores and increase your productivity.

For good reason, Trello is one of the most well-liked management tools, but merely including them on your website is insufficient. Here are some suggestions to help you organise your cards and boards more effectively and increase your team’s productivity.

Sort the tasks into categories:

It’s preferable to categorize the tasks than to have a long list of them. The duties must first be categorized. This depends on your company and the board’s users. For instance, you can categorise activities into Backlog, Selected, In Progress, Testing, and Done if you’re planning work for a team of developers (Live).

Add labels:

One of the simplest ways to arrange jobs is with labels. You can personalise the labels and add colours in addition to using them to prioritise jobs or assign them to various teams. In this manner, the tasks are swiftly and clearly communicated to your staff.

Use power-ups:

Power-ups give your Trello boards extra features. To have all the necessary information in one location, you can connect your projects to Google Drive, Calendar, Slack, Maps, and many other programmes.

Maintain the board’s accuracy:

Only current cards and boards are useful. Therefore, we advise that you designate one person to oversee the team’s updating of the cards and proper label usage.

Assign team members and due dates: Although this may seem simple, it is crucial. There should be at least one person in charge of each task, along with a deadline.

There are a lot more things you can do to get the most out of it; these are just the fundamentals to get you started.

Trello plans

Trello has two premium editions with prices that start at 12.5 USD per user each month, despite the fact that it provides many fantastic features for free. One of our favourite features, besides the additional options and more complex functions, is Advanced Checklists. This is ideal for complex projects since it enables you to assign team members and due dates to each checklist item. Check out Trello’s pricing website for more details about their various plans.

Conclusion

Trello is a great tool for grouping your tasks and projects into boards and cards overall. So, you should embed Trello boards and cards in WordPress if you want to increase your team’s productivity.

Three different ways to embed Trello boards and cards on your website have been demonstrated in this post. Each of them has advantages and disadvantages and is suitable for beginners. We advise employing the iFrame technique due to its adaptability and simplicity of setup. You can integrate an interactive board or card with it.

Check out our article on how to embed Google Sheets in WordPress for more information on how to embed various types of connection on your website using zapier.