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.
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!
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:
Assuming you meet the above requirements, there’s just a few steps to set it up.
And that’s all there is to it! Read on for the step by step guide in detail:
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.
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>
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!
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!