Skip to main content
Trello Integration

Marker.io with Trello for Website Issue Tracking

Joe Scanlon avatar
Written by Joe Scanlon
Updated over 4 months ago

Easily track website issues directly within Trello by integrating Marker.io. This guide will walk you through the setup process, from connecting your Trello account to reporting and managing issues. Whether you’re a developer or a non-technical user, this guide will help you get the most out of the integration.


Set up a Trello Integration

Create a Project in Marker.io:

  • Log in to your Marker.io dashboard.

  • Click Create a project.

  • Fill out the form with:

    • Project Name

    • Website URL where you’ll collect issues.

    • Select your integration: Choose Trello.

    • Select the Trello board where issues should be sent.

If this is your first time connecting, you need to authorize marker.io to use your Trello account.


Configure forms

Marker.io automatically pulls in your Trello fields, such as labels, due dates, and priorities. You can customize which fields are visible in the widget. For example, set the default label to "Dev Team" to ensure that all issues are immediately assigned to your development team.

Note: Marker.io has two types of forms:

  • Member Form: Used by team members.

  • Guest Form: Used by external users or public reporters.

For more details, see our User Roles Guide.


Install the Widget on Your Website

The final step is to install the Marker.io widget on your website. Here are the available options:

  • Manual JavaScript Installation (recommended).

  • WordPress Plugin.

  • NPM Package.

  • Invite a Developer: Send a one-click request to your developer to handle installation.

Once installed, refresh your website to verify that the widget appears.


How It Works: Reporting Issues via Marker.io


Collecting Issues

Website visitors can report issues directly through the Marker.io widget, without leaving the page they’re on. Each issue report includes technical details automatically captured by Marker.io, such as:

  • Page URL

  • Browser

  • Screen size

  • Operating system

For example, if a visitor notices that the "Contact Us" button is broken, they can click the widget, take a screenshot, and submit the issue along with relevant details. Screenshots can be annotated, and the issue form can be customized according to your needs. We recommend keeping the form simple for non-technical reporters.


Reviewing Issues in Trello

Once an issue is submitted, it will automatically appear in your Trello project with:

  • The screenshot.

  • Relevant technical data (e.g., browser type, page URL).

  • Comments and labels set according to your preferences.

You can then assign, prioritize, and track the issue within Trello.


Communicating with Reporters

Each Trello card created via Marker.io includes a link back to the issue Page, allowing you to communicate directly with the reporter. Any updates or replies are automatically synced back to Trello.


Synchronizing Issue Statuses

When an issue’s status is updated to “Done” in Trello, Marker.io marks the issue as resolved. The reporter will receive an email notification confirming that the issue is resolved.


FAQs

Is Marker.io secure?

We take your data and the security of our systems very seriously, using the most advanced security to connect with your account. See the latest version of our security policy at: https://marker.io/security.

What permissions are required to integrate with Trello?

To integrate Marker.io with Trello, admin permissions are required. This ensures that all boards, cards, and custom fields are properly synced.

Key reasons for needing admin permissions:

  • Real-time status synchronization.

  • Accurate mapping of issues to Trello boards and cards.

  • Integration with all Trello boards, even newly created ones.

Note: Marker.io does not store or share any of your Trello data beyond what is needed for the integration.

I can't connect my Trello account to Marker.io

Try these steps:

  1. Log in to Trello: Open Trello in another tab to ensure you’re logged in.

  2. Reset Password: If the issue persists, reset your Trello password.

  3. Still Stuck? Contact us via the chat option in the bottom right corner of your screen.

How Do I Add Custom Fields in Marker.io via Trello Integration?

  1. Ensure you’re on a Trello paid plan that supports custom fields.

  2. Add the custom fields within Trello.

  3. In Marker.io:

    • Go to Widget Settings > Guest Form (or Member Form).

    • Unhide the relevant field by clicking the eye icon.

    • Save your form.

Marker.io Stopped Syncing tickets to Trello?

If your Marker.io issues have suddenly stopped syncing to Trello, there are usually two common reasons. Follow these steps to diagnose and resolve the problem.

1. Reconnect Your Trello Account

If your issues are no longer appearing in Trello, it could be due to a change in your Trello account credentials (such as an updated password). This can disrupt the connection between Marker.io and Trello.

Steps to Reconnect:

  1. Log in to your Marker.io account.

  2. Click Resync Account to re-establish the connection.

Tip: Once reconnected, try submitting a new issue to check if it appears in your Trello board.

2. Check if Your Trello Board is Set to Read-Only

In some cases, your Trello board might have become read-only due to plan limitations. This typically happens if you've exceeded the limits of your Trello subscription, such as the number of users, available storage space, or other plan-specific constraints.

How to Check and Resolve:

  1. Confirm Plan Limits: Log in to Trello and verify if you’ve reached the user or storage limits of your current plan.

  2. Upgrade Your Plan: If you’ve exceeded your limits, consider upgrading to a higher-tier Trello plan that offers more flexibility.

Common Signs of a Read-Only Board:

  • You can still view issues but can’t edit or add new ones.

  • An alert in Trello warns that you’ve exceeded your current plan’s limits.


Need Help?

If you have any questions, comments, or corrections, chat with us at the bottom right of our web page.

Did this answer your question?