|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:
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.
var $tempInput = $("<textarea>");
// 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.
var $this = $(this);
// Reset state.
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!