Embedding Custom JavaScript to the SSP

Introduced in 8.7

You can easily customize your Self Service Portal with external functionality, such as YouTube videos, chats, Twitter feeds, Google maps, or Facebook pages. 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.

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 to the Scripts folder under the folder where your Self Service Portal files are located: [PhysicalPathToSSP]\Scripts\.

    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 service 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 Scripts 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.

JavaScript
// ========== 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.