Small usability enhancements can make a big difference to the user experience. One example is allowing users to copy a direct link to a content item with a single click, making it easy to share articles, news items, events or knowledge base content via Teams, Slack, email or messaging apps.
Rather than embedding JavaScript into every Presentation Template or Menu Component, we can separate the solution into two parts:
-
A reusable HTML Component containing the CSS and JavaScript.
-
A small piece of HTML added wherever the functionality is required.
This keeps the implementation clean, reusable and easy to maintain.
Why an HTML Component?
The HTML Component contains all of the behaviour and styling. Once created, it only needs to be included once on the page and can then be used from anywhere that renders WCM content, including:
-
Presentation Templates
-
Menu Components
-
List Presentation Designs
-
Search result presentations
-
Navigator Components
If you later decide to change the styling, tooltip behaviour or JavaScript, you simply update the HTML Component rather than every template that uses it.
Part 1 - Create the HTML Component
Create an HTML Component containing the CSS and JavaScript shown below.
<style>
.dx-copy-tooltip {
position: fixed;
z-index: 99999;
transform: translateX(-50%);
background: #212529;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.dx-copy-tooltip.show {
opacity: 1;
}
.dx-copy-tooltip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #212529;
}
</style>
<script>
function [Plugin:ScriptPortletNamespace]copyLink(link, path) {
const url = new URL(path, window.location.origin).href;
navigator.clipboard.writeText(url).then(function () {
// Remove an existing copy tooltip
const existing = document.querySelector(".dx-copy-tooltip");
if (existing) {
existing.remove();
}
// Create tooltip
const tooltip = document.createElement("span");
tooltip.className = "dx-copy-tooltip";
tooltip.textContent = "Copied!";
document.body.appendChild(tooltip);
// Position it above the clicked link
const rect = link.getBoundingClientRect();
tooltip.style.left = (rect.left + rect.width / 2) + "px";
tooltip.style.top = (rect.top - tooltip.offsetHeight - 8) + "px";
// Show the tooltip
tooltip.classList.add("show");
// Remove after a short delay
setTimeout(function () {
tooltip.classList.remove("show");
setTimeout(function () {
tooltip.remove();
}, 200);
}, 1500);
}).catch(function (err) {
console.error("Failed to copy link:", err);
});
}
</script>
The JavaScript itself is completely generic. The only piece of WCM-specific functionality is the namespaced function name, making it suitable for use from any WCM rendering component.
Part 2 - Reference the Component
Once the HTML Component has been included on the page, invoking it is simply a matter of calling the JavaScript function and passing it the current content path.
The WCM tag:
[Property field="name" format="path"]
is evaluated when the Presentation or Menu Component etc. is rendered, giving the JavaScript the path of the current content item.
<a href="#!"
class="text-primary text-decoration-none position-relative"
title="Copy link"
onclick="[Plugin:ScriptPortletNamespace]copyLink(
this,
'/wps/wcm/connect[Property field="name" format="path"]'
); return false;">
<span class="fa-stack" style="pointer-events:none">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-link fa-stack-1x fa-inverse"></i>
</span>
</a>
Notice how the WCM tag is used purely to supply data to the JavaScript. WCM provides the content context, while the browser handles the interaction by constructing the URL, copying it to the clipboard and displaying the confirmation tooltip.
Note: This example uses a Font Awesome icon. If your site uses a different icon library, simply replace the <i> elements with the appropriate markup.
The Result
The implementation is split into two reusable layers:
-
The HTML Component provides the styling and JavaScript behaviour.
-
The Presentation or Menu Component etc. simply decides if, or where, the Copy Link action should be displayed and passes the current content path to the JavaScript function.
This keeps your rendering components lightweight while allowing the same functionality to be reused consistently across your site.
Here’s how it looks:
A Reusable Pattern
Although this example implements a Copy Link action, the same pattern can be used to build a library of reusable HTML Components. By keeping the JavaScript in a single HTML Component and using WCM tags to provide contextual information, you can easily add modern browser capabilities to your HCL DX site.
Possible extensions include:
-
Native Share using the Web Share API for supported browsers and mobile devices.
-
Generate QR Codes for sharing content across devices.
-
Copy Markdown Links for documentation, forums and knowledge bases.
-
Copy HTML Links for rich text editors and email content.
-
Recently Viewed Content using the browser’s local storage to help users quickly return to content they’ve already visited.
Once you start thinking of HTML Components as reusable client-side widgets rather than simply fragments of HTML, they become a powerful mechanism for enriching HCL DX sites. WCM provides the content context, the browser provides the functionality, and the HTML Component brings the two together in a reusable, maintainable way.