Embedding Custom JavaScript to the Self Service Portal

On-prem only

Updated in 2024.2

You can easily customize your Self Service Portal with external functionality, such as YouTube videos, chats, Twitter feeds, Google maps, or Google Analytics. You just need to upload your custom JavaScript to the portal's JavaScript library, and your custom dynamic content will run on Self Service Portal pages.

FOR CLOUD CUSTOMERS: Please note that embedding custom JavaScript is only available for on-premises deployments. Contact our Support Team for assistance with this step.

To add a custom JavaScript to Self Service Portal pages:

1. Create your embeddable JavaScript code and save it as a .js file. The name must start with add_, such as add_[ScriptName].js. For example, add_AlloyYouTube.js.

2. Place your .js file under the folder where your Self Service Portal files are located: [PhysicalPathToSSP\remix\client\.

   INFO: For instructions on how to view [PhysicalPathToSSP], the physical path of Self Service Portal files, see Physical Path to Self Service Portal Files.

3. Restart the Self Service Portal to apply your changes.

   TIP: You can use the Web Configuration tool to restart the Self Service Portal. Right-click the web application to restart and choose Restart Portal from the pop-up menu.

You can add as many JavaScript files as you need. The Self Service Portal will run all add_[ScriptName].js files from the client folder in alphabetical order.

Example: Embed YouTube videos to the Home page

When added, custom JavaScript will run on all Self Service Portal pages. In order to accommodate your custom content, the Home page layout features header and footer containers:

• customHeaderDashboard — this is the Id of the header container, at the top of the Home page,
• customFooterDashboard — this is the Id of the footer container, at the bottom of the Home page.

You can use these out-of-the-box Ids in your custom JavaScript to display the content on the Home page. For example, you can use the following JavaScript to embed two YouTube videos to the Home page's header.

In this example we will use our own videos from Alloy Software official YouTube channel.

// ========== Preferences ==========

var container = document.getElementById("customHeaderDashboard");

var videos = [

	{ id: "DYCvL8UuTWA" },

	{ id: "VMT6Nlcjo40" },

];

var height = "180px";

if (container) {

	renderVideos(container, videos, height);

}

// ========== Core function ==========

function renderVideos(container, videos, height) {

	var videoContainer = document.createElement("div");

	videoContainer.style.display = "flex";

	videoContainer.style.justifyContent = "space-around";

	videoContainer.style.height = height;

	videoContainer.style.paddingTop = "20px";

	container.prepend(videoContainer);

	for (var i = 0; i < videos.length; i++) {

		var video = videos[i];

		// Placeholder for youtube video

		var youtube = document.createElement("div");

		youtube.setAttribute("id", video.id);

		// Based on the YouTube ID, we can easily find the thumbnail image

		var img = document.createElement("img");

		img.setAttribute("src", "http://i.ytimg.com/vi/" + youtube.id + "/mqdefault.jpg");

		img.style.height = "100%";

		img.style.cursor = "pointer";

		// Overlay the Play icon to make it look like a video player

		var circle = document.createElement("div");

		circle.setAttribute("class", "circle");

		youtube.appendChild(img);

		youtube.appendChild(circle);

		// Attach an onclick event to the YouTube Thumbnail

		youtube.onclick = function () {

			// Create an iFrame with autoplay set to true

			var iframe = document.createElement("iframe");

			iframe.setAttribute("src",

				"https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");

			// The height and width of the iFrame should be the same as parent

			iframe.style.width = this.style.width;

			iframe.style.height = this.style.height;

			// Replace the YouTube thumbnail with YouTube HTML5 Player

			this.parentNode.replaceChild(iframe, this);

		};

		videoContainer.appendChild(youtube);

	}

}

See the screenshot below to view how the YouTube videos from our example are embedded in the Home page.

Related Information:

Integrations: Google Analytics Integration