Follow this guide to start building an integration with Trello using client.js. We'll only be using javascript and you should be able to run this locally via a static HTML page.

The client.js library was created to make it easier to use the Trello REST API with web applications. There's nothing magic about it, but it can make things a little bit faster through some convenient methods.

There are two steps to using the client.js library. The first is to get your Application Key. This Key identifies your Application to the API and is needed for any authenticated or unauthenticated API Calls.

Get your Application Key.

Now we can include jQuery and the client.js library on the page. Before the body tag, add the following and replace the {APIKey} with the API key you just retrieved:

1
2
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://api.trello.com/1/client.js?key={APIKey}"></script>

Now that you have included these two dependencies, you will have access to a global Trello object that has many helper methods. Next up, we'll authenticate our user so that we can access data in Trello on their behalf.

Authenticate Your User

Using the Trello object, we need to authenticate the user. This is done with the Trello.authenticate method. This method will automatically trigger Trello's authorization flow and return back an authentication token. This token will be specific to your API key and the user who is executing the flow.

It's important to understand that the authentication token gives your application the ability to make calls on behalf of your user, from their context. This token grants access to the authenticated user's boards, lists, cards, and other settings, depending on the permissions requested in the authenticate method.

We now have the ability to access our user's Trello data. The functionality provided via client.js makes use of callbacks for success and failure. We can create some basic methods to get started.

First, let's define what happens when authentication has finished using success and failure callbacks.

1
2
var authenticationSuccess = function() {
  console.log('Successful authentication');
};

var authenticationFailure = function() {
  console.log('Failed authentication');
};

Now let's attempt authentication and authorization in one step:

1
2
window.Trello.authorize({
  type: 'popup',
  name: 'Getting Started Application',
  scope: {
    read: 'true',
    write: 'true' },
  expiration: 'never',
  success: authenticationSuccess,
  error: authenticationFailure
});

If authentication was successful, the Trello object will now store and use our valid Authentication Token for all future calls. Handy!

Create Cards and Update Information

We are now ready to make any API call that we would like using the context of both our application (defined by our API key), and a user (defined by the authentication token).

One of the trickier parts of using the Trello API for simple use cases is finding a List ID that belongs to a user. There are a few ways of doing this depending on your skillsets. One such way is to use the Chrome Dev Tools to watch network traffic from the official client.

To try to make this easy, we'll be dumping the JSON from a known Card. Open the official Trello web client and find a Card from a list that you want to use as your target.

It should have a short URL that looks like: https://trello.com/c/DcqBrqdx/1-target-card

Take that URL and add .json to the end as follows: https://trello.com/c/DcqBrqdx/1-target-card.json

Within the raw JSON dump you get when pulling up this new URL, you will see a field called idList. We're about to use this to create a new Card in the same list.

Creating a Card is one of the simplest API calls you can make. We just create a Card object that contains the parameters we want to set, and then POST it to the API.

1
2
var myList = 'INSERT YOUR IDLIST HERE';

var creationSuccess = function (data) {
  console.log('Card created successfully.');
  console.log(JSON.stringify(data, null, 2));
};

var newCard = {
  name: 'New Test Card',
  desc: 'This is the description of our new card.',
  // Place this card at the top of our list
  idList: myList,
  pos: 'top'
};

window.Trello.post('/cards/', newCard, creationSuccess);

Now that we have created a card and retrieved its ID via the log, we're going to make an update to this card. To do so, we will PUT a new name for it.

1
2
window.Trello.put('/cards/[ID]', {name: 'New Test Card'});