Client Library
Color Theme Compliance (Beta)
UI Functions


In card descriptions and comments, there may be URLs that your Power-Up could make look a lot better and more readable. With format-url you will be provided the URLs and can tell Trello when you have something better to be displayed.

For example, here we replace a URL for a page to Crater Lake National Park with the park name itself, and a friendly icon.

Comment Unfurling

In the comments on a card, you can pass in the following options to allow Trello to provide a more robust experience: subtext, image, and actions. For example, here the Dropbox Power-Up provides a preview image, information about a links' last edit as subtext, and the option to "Download" as one of its actions.

Example Code

  'format-url': function (t, options) {
    // options.url has the url that we are being asked to format
    return {
      icon: GRAY_ICON, // don't use a colored icon here
      text: '👉 ' + options.url + ' 👈'
      subtext: 'This will show us some text.',
      image: {
        url: '', // thumbnail url
        size: 'contain' // background-size value that could be 'contain', 'original' or 'cover'
      actions: [{
        text: 'Download',
        callback: (t) => {
          // you can do things like t.popup etc.
          console.log('Action clicked');
      thumbnail: COLOR_ICON // Deprecated - OK to use color icon here

    // if we don't actually have any valuable information about the url
    // we can let Trello know like so:
    // throw t.NotHandled();

thumbnail option is deprecated

Although the capability handler will continued to accept a thumbnail option for backwards-compatibility's sake, we highly recommend moving to only sending the image option.

Rate this page: