Add Custom Button to Copy Permalink/Shortcode in Atlassian Confluence to top of Every Page
William Yeack

⁠|Add Custom Button to Copy Permalink/Shortcode in Atlassian Confluence to top of Every Page 

Whenever a page in Atlassian Confluence is moved or renamed, its canonical URL is updated.  This can quickly lead to broken links after a change has been made.  To solve this issue, Atlassian Confluence has paired each Confluence Page with a permalink (aka shortlink) which will always stay the same - even after a page has been renamed or moved.  For instance, the following canonical URL is (at the time of writing this) associated with this shortlink:

https://support.member.buzz/display/organizers/Custom+Domains

https://support.member.buzz/x/egEi 

However, getting to this link can be buried under several dropdowns, and, if you have a public facing Confluence Space like we have with Member.buzz Support, it can be difficult to have something visible to visitors.

⁠To solve this, we wrote a little JavaScript that is included in the HTML of our Confluence Pages:

<script type="text/javascript">
function CopyShortcodeText(text)
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}

setTimeout(() =>
{
// Get shortcode from existing HTML.
var shortcode = $("head > link[rel=shortlink]").attr("href");

// Create new element.
var $permalinkElement = $("<li style='visibility: visible !important;'><span class='permalink' title='Copy the permanent to this page, which will never change even if the page is renamed or reorganized.'><span>Copy Permalink</span></span></li>");

// Add click handler.
$permalinkElement.click(function()
{
CopyShortcodeText(shortcode);
var $this = $(this);
$this.children().html("<span>Copied</span>");
setTimeout(() =>
{
// Reset state.
$this.children().html("<span>Copy Permalink</span>");
}, 5000);
});
$("#page-metadata-banner .banner").append($permalinkElement);
}, 1000);
</script>​

Most of this script should work for most instances - the one part that you may want to change is the $("#page-metadata-banner .banner") selector - this works for our theme (provided by Refined), but you will want to find some element to add your new button to on your page.  Here is the result:

⁠Comment below if you have found any other creative solutions to this problem!

Comments

To add a comment, please login or register.