format-url

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

1
2
window.TrelloPowerUp.initialize({
  '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: 'https://example.com/image.png', // 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();
  }
});