Blog

Building a Service Portal

By following these steps and adding a few minor enhancements, you can build an awesome Service Portal!

BASE HOME PAGE (Madrid)
Example Home Pages
Instructions1. Plugins

  1. Install Plugin: Service Portal for Enterprise Service Management

  2. Install Plugin: Service Portal La Jolla Branding (Optional)

2. LOGO and BackGround Image

  1. Left Navigation Bar > Service Portal > Service Portal Configuration

  2. Click Branding Editor

  3. Choose your logo and background image

    • Background Image: Approximately 2300 x 1200, 1150 x 600, or images with similar percentages.

    • Logo 950 x150, or images with similar percentages.

Portal with new Logo and Background

3. HOME PAGE SEARCH TEXT

Can’t read the homepage search text that easily with the background that was added.

I like to add a slight white opacity background and some drop shadow to make the text stand out. Sometimes it makes sense to add some border radius to the search box too.

add CSS Properties

You can create a CSS stylesheet for a entire site. However if you are just altering one page, this quick method works.

  1. Ctrl-Right click the Service Portal page

  2. Select “Page in Designer”

  3. In Page Designer, select the “Page” button in top-right corner

  4. Add Page Specific CSS

Here is the CSS I used

/* Home Page Search Opacity Background */
#homepage-search > div {
    background-color: rgba(237,241,242, 0.5);
    border-radius: 8px;
}
/* Home Page Search Text Drop Shadow */
#homepage-search {
    text-shadow: -2px 2px 8px #03244d;
}
/* Search Box Width */
#homepage-search {
  padding: 50px 0px 50px 0px !important;
  margin: 20px 0px 25px 0px;
}

Portal with CSS

4. Transparent Menu Bar

Another cool idea is make the menu bar transparent. Your CSS may vary from this, but you get the idea.

/* Transparent Menu Bar */
.navbar-inverse.navbar {
    background-color: transparent;
    border-bottom: 0px;
    position: absolute;
    width: 99%;
    z-index: 200;
}
/* Menu Item Background */
#sp-nav-bar {
    background-color: rgba(46, 46, 46, .80);
    border-radius: 0 0 0 8px;
    padding-right: 8px;
    margin-right: 0 !important;
}
div.ng-scope.hidden-xs.cbe98a8d2cb20020000f8d856634c9c63 {
    margin-top: -70px;
  	padding-top:150px;
}
/* Logo Background */
div.navbar-header {
  background-color: rgba(46, 46, 46, .80);
  border-radius: 0 0 8px 0;
}

Portal with Menu Bar Transparent Background

5. Menu ITEMSTop Menu Adjustments

  1. Go to Left Navigation Bar > Service Portal > Menus

  2. Click the one with SP Header Menu as the title

  3. Deactivate the System Status Menu (Unless you are implementing Outage Management too)

  4. I like to change the “Requests” menu to “Open Tickets”.

  5. Add a Closed Tickets Menu item. Read this article: Closed Tickets Menu Item

Turn off Cart and Wishlist

I think the cart and wishlist adds confusion. So I turn it off most of the time.

  1. Go to Left Navigation Bar > Service Portal > Menus

  2. Click the one with SP Header Menu as the title

  3. Adjust the Additional Options, JSON Format

{
	"enable_cart": {
		"displayValue": "false",
		"value": false
	},
      "enable_wishlist": {
        "displayValue": "false",
          "value": false
      }
}

Portal with New Menu Items

6. Custom Font

I wrote a few articles about custom fonts. Review these articles out and add a new font.

7. Bootstrap Colors

Add some site colors

  1. Go to Service Portal > Service Portal Configuration

  2. Click Branding Editor

  3. Adjust Colors

8. ICON Links

Adjust the “Icon Links”, the links in the middle of the form

  1. Remove the Community Link

  2. Adjust the bootstrap colors, CTRL-Right Click, Instance Options

  3. Adjust the Templates, CTRL-Right Click, Template: Color Box

9. Bottom Content

Adjust the bottom content of the home page by using the Page Designer

Portal with Custom Fonts, Bootstrap Colors and bottom content

10. Virtual Agent

Depending on licensing, you can install the virtual agent.

  1. Install Plugin, Virtual Agent Portal Widgets

  2. Page Designer > Add Virtual Agent Service Portal Widget

  3. Read how to add an informational bubble next to the virtual agent: Virtual Agent Info Bubble

Portal with Virtual Agent