Adding a call to action graphic & link to public task boards

We’ve all seen the public sharing feature on Plutio task boards - the Plutio roadmap is an example of a shared task board where anyone with the link can view it, even if they don’t have a Plutio account.

This is great for product roadmaps, or even just for sharing a read only view of your task board with a client that you don’t want to let inside Plutio (it happens!). Not sure how to share a task board publicly? This help article will sort you out.

But, wouldn’t it be neat if you could use your shared task board to cross promote something?

A call to action down in the corner encouraging anyone who views the task board to do something or visit a link? Well thanks to the magic of Cloudflare and the Add HTML App, you can do just that!

Here’s an example of a shared task board, the roadmap for the Wordpress plugin Plutio Project Cards, which is using a call to action in the bottom right to promote the upcoming Plutio Widgets service. The CTA stays in view as you navigate around the shared task board.

You could use this to upsell a service, link to onboarding documentation, or just to promote your brand with a logo and link to your homepage. The possibilities are endless!

Here’s how to set this up yourself

For obvious security reasons Plutio doesn’t allow us to interfere with the code that runs the Plutio app in the browser. But, with a little help from Cloudflare, we can tag our own code onto the end of Plutio as it loads. This lets us add our own CTA (or other things!).

The process is pretty simple, with just a tiny bit of code required (which you can copy and paste below) and a few clicks. There a few prerequisites though:

• First off, you need to have the Plutio Whitelabel addon.
• Second, you need to have your custom domain set up, and that custom domain needs to be running through Cloudflare. The free account on Cloudflare is fine.

Assuming you meet the above requirements, there’s just a few steps to set it up.

1. Share your task board with a public link that anyone can view. This help article will walk you through it if you’re not sure how to do that.
2. Install the Add HTML app on Cloudflare.
3. Add the code to display your Call to Action.
4. Restrict the Add HTML app to just the URL of your task board so that it doesn’t slap this CTA over your entire website (that would probably not be what you want!)

And that’s all there is to it! Read on for the step by step guide in detail:

Step 1: Sharing the task board:

Share your task board from within Plutio. This help article walks you through it if you’re not sure how to do that. Make a note of the url to your task board, you’ll need it later.

Step 2 & 3: Install the Add HTML app on Cloudflare and add your code:

Login in to Cloudflare and select the domain name that your custom Plutio domain runs on. Once you’re in, choose the blue Apps tab from the top menu to get started.

Select, or search for, the Add HTML app in the list of apps that show up. Click the Preview on your site button to start setting it up.

Now you can paste your HTML code into the HTML Code box to create our Call to Action. To recreate our example of the Plutio Widgets CTA you can use the code below.

To use your own image simply change the url to point to your image location (upload it to your own website). You’ll also want to change the website that the CTA links to by editing the href=’”” section.

<div style="max-width: 400px;width:70%;right:25px;position:fixed;bottom:10px;z-index:99999;"><a href="https://plutiowidgets.com"><img src="https://reposecreative.co.uk/wp-content/uploads/2019/07/plutiowidgets-CTA.png"></a></div>

Step 4: Restrict the Add HTML app to just the URL of your task board

Nearly there!

Next we just need to limit our HTML app so that it only runs on our taskboard, otherwise it would show up on every single page of your website, and that’s probably not what you’re after!

Set the Pick a location to be Body, and the Place it option to be before this location. Then in the On these pages section paste in the url to your shared task board that you got in step 1, followed by the Add button. This will mean that our new code will only run on that url.

And that’s it! Your app should look something like this when it’s all been configured:

Hit the green Save button, wait a few minutes, then go and view your task board using the public link. It should now have your CTA displayed in all its glory!

Want more CTAs on other task boards?

You can add additional HTML blocks and restrict them to the task board url that you want them displayed on. If you wanted to, each shared board could have it’s own unique CTA, or you could use the same one on them all! It’s up to you!