Warning

This starter kit is currently out of date and doesn't follow Salable best practices. We're actively in the process of updating it.

What am I looking at?

You're looking at the easiest way to build and monetise a Trello power-up (with the help of the Salable).

To best utilise this boilerplate, you should have some experience with the basics of Trello Power-Up development.

How does it work?

Contained in this repository is a boilerplate Trello Power-Up that gives users with the See Message capability, the ability to click a button on a card and see a message. This functionality is intentionally basic so as to best show the core flow of working with Salable, whilst not overcomplicating the example with Trello specifics.

This is all configurable so you can build whatever power-up you're thinking of and monetise it however you would like.

How do I get started?

1. Create a Power-Up on the Trello Power-Up Admin. Use either a hosted or development URL for the iframe connector. See Developing Locally for instructions.
2. Make sure to add the card-buttons and on-enable capabilities to your new Power-Up.
3. Create a Salable account if you don't already have one.
4. Create a Salable API key.
5. Create a new product on Salable. You can call this whatever you want.
6. Add a See Message capability to the product you just created.
7. Create a plan, priced however you like, that gives the user the See Message capability you created in the previous step.
8. Clone this repository.
9. Add your Salable API Key and product UUID on lines 18/19 of js/client.js.
10. Add your Salable API key and product UUID to the pricing.html config.
11. Add your Trello API key to the script in index.html.
12. Ensure you have added your new Power-Up to your Trello board.
13. Build and monetise your idea!

If you'd prefer a more in-depth introduction, refer to our Creating and Monetising a Trello Power-Up Using Salable guide.

Developing locally

Developing the power-up on your local machine is often much easier than repeatedly deploying to some hosted environment such as GitHub Pages or Netlify.

This can be done easily with tooling such as localtunnel or a paid Ngrok account!

1. Install localtunnel.
2. Run npm install.
3. Run npm run dev to start the template server.
4. Start localtunnel, specifying the same port: lt --port 8080.
5. Visit the URL provided to you by localtunnel in your browser of choice.
6. Get your remote public IP and paste it into the input on your localtunnel site. (curl ipv4.icanhazip.com is a simple way to get your current IP)
7. Update the power-up URL and your "Allowed Origins" on the Power-Up Admin Portal to include your new localtunnel address.
8. Start developing!