CASE STUDY 1:🌀 What is the ServiceNow Portal?

🌐 Overview

The ServiceNow Portal, commonly known as the Service Portal, is a user-friendly, customizable front-end interface that allows users to interact with ServiceNow services without needing to access the backend directly.

It functions like a website within your ServiceNow instance, designed for:

• Employees requesting services
• IT agents fulfilling tickets
• Developers building UI elements

🧱 Basic Concepts of the Service Portal

🏠 1. What Is a Portal?

A portal is a self-service interface that displays services, knowledge articles, request forms, and more in a modern and responsive layout. It provides a seamless entry point for users to access key ServiceNow functionality.

"Think of it as the front door to ServiceNow for end users."

It uses widgets, pages, menus, and themes to create a branded experience.

📋 2. Key Features

• Search and browse Knowledge, Catalog, and Communities
• Chat with Virtual Agent
• Access to Service Catalog
• Knowledge Base browsing
• Track requests and incidents
• Customizable themes and branding

🚀 Intermediate Concepts

🧱 3. Portal Components

You can create multiple portals (HR, IT, CSM) to serve different audiences.

🎯 4. Popular Out-of-Box Portals

• Employee Center / Employee Center Pro
• IT Service Portal
• HR Portal
• Customer Service Portal
• Facilities Request Portal

🧠 Advanced Concepts

⚙️ 5. Widget Development

Widgets are small components built using AngularJS, HTML, and JavaScript. They are the building blocks of the portal UI.

You can create or customize widgets using the Widget Editor.

function($scope, spUtil) {
  $scope.greeting = "Hello, ServiceNow!";
}
  

🔁 6. Dynamic Behavior with APIs

Enhance widgets using Service Portal APIs like:

• spUtil
• spModal
• spContext

These allow for real-time interactivity such as modals, notifications, and dynamic field changes.

🌍 7. Multi-language & Accessibility Support

• Support for multiple languages using i18n
• WCAG-compliant accessibility using ARIA roles, semantic tags, and alt text

CASE STUDY 2: Customizing the Virtual Agent Chat Button in the Service Portal

One effective way to align the Virtual Agent experience with your organization's branding is by customizing the chat button that appears in the Service Portal. I recently guided one of our developers through this task and realized there are multiple approaches to achieve the desired look. Here’s a simplified guide to help you make these updates.

🔧 Update the Background Color

To begin, you can change the default background color (typically Polaris Purple) to match your brand palette.

1. Open the theme that your Service Portal is using (e.g., for Employee Center, this would be the EC Theme).
2. Locate the CSS Variables section and scroll to the bottom, or use the search function to find the SCSS variable: $sp-agent-chat-bg.
3. Set this variable to your preferred background color.

💬 Customize the Chat Icons

Another way to personalize the experience is by changing the default chat icon. You can customize both the icon that appears when the chat window is closed and the one displayed when it’s open.

✏️ Update the Closed Chat Icon

This is the icon visible before a user opens the chat window:

1. Go to System UI > Images.
2. Create a new image record for your custom chat icon.
3. Assign it a name (no spaces) and include the file extension.
4. Upload an image with a transparent background to avoid overlapping with the background color.
5. Copy the image name — you’ll need this for configuration.

Once uploaded, return to your portal theme settings to apply the new icon.

✏️ Update the Open Chat Icon

This is the icon that appears when the chat window is active. Depending on how much customization your instance allows, you can either replace it via similar steps or use alternate methods for more control.

✅ Final Thoughts

The Virtual Agent plays a key role in driving user engagement and promoting self-service through the Service Portal. As you adapt the portal or Employee Center to reflect your organization’s look and feel, don't overlook this critical component. Customizing the chat button helps ensure that the Virtual Agent feels like a natural, integrated part of your user experience.

CASE STUDY 3: ✅ Best Practices

• ✅ Keep the layout simple and user-friendly
• ✅ Stick to your organization's branding guidelines
• ✅ Make sure it's mobile responsive
• ✅ Test frequently using different roles
• ✅ Use caching and lazy loading for performance

🧩 Real-World Use Cases

• HR Portal – Submit leave requests, update personal info, view policies
• IT Help Desk – Report issues, request software/hardware, track tickets
• Student Portal – Apply for ID cards, access academic services

🎬 Conclusion

The ServiceNow Portal is a powerful, customizable layer that bridges the user experience and the power of the ServiceNow platform. Whether you're just getting started or building custom components, the portal helps deliver a seamless, branded, and engaging self-service experience for your users.