In this blog we will understand how we can customize our Self Service Portal using Virtual Agent Branding.
Virtual Agent Branding is configured in the Virtual Agent Administration Console under Self Service Portal/Configuration.
The interfaces required are defined in the XML section. An example interface definition is provided (disabled) with the shipping product. The shipping example is called Language – Global. It is shown below,
The self service interface is an HTML paged called arhome.html. When arhome.html is opened the settings in the <interface> item that meets certain criteria are provided to arhome.html and adjustments made to the HTML page when it is displayed.
The configuration for an “interface” SSP option includes the following XML elements:
- <code> - Allows you to specify a language code that these settings apply to. The code of the user’s browser is read and then the list of “interfaces” is searched for a matching code. Global can be used as a default code if you are not creating language specific pages or you want a default page in case a user’s specific code is not defined.
- <name> - Only used for your reference.
- <company> - A user’s company specific interface will be looked for first. This also can be set to Global.
- <list> - This contains the list of HTML elements and other HTML items you want to modify.
For <list> items four basic types of settings are possible:
- Predefined tags for specific items.
- HTML element 508 compliant changes
- HTML element changes.
- CSS changes.
A sample interface configuration will be seen below,
You will see the items either have just a keyword in the <> markers, start with “<item id=” or start with “<css id=”.
The items that are just a keyword in the <> markers are pre-defined and will replace certain text in the SSP interface or are configuration settings that can be determined by branding.
When branding, the most typical change will be to change the logo and banner colors from the default BMC logo and banner.
The standard BMC branded banner will have the product name at the left, a blue banner, and a logout button and BMC logo on the right.
An example branding exercise would be to move the logo to the left where the product name resides, change the banner color, and remove the image of the logout button.
In the example above we did the following:
- Removed the logo from the right.
- Put a custom logo on the left.
- Removed the BMC banner background image.
- Set the background color of the banner to light grey.
- Removed the BMC background image from the logout button.
- Change the logout button text color to blue.
The settings to do this are:
<name>My Company Brand</name>
<item id='#label_productname'><img alt='BMC Software Logo' src='resources/img/logo.png'></item>
<item id='#logo'> </item>
<css id='#banner'>background-color:#d3d3d3;border-bottom:1px solid #000000;background-image:url('');</css>
This covers the most common need and elements for branding. Below gives an example interface configuration with many more items.
<item id='rla_opt'>Chat with a live agent</item>
<item id='login_text'>My Login</item>
<item id='logout_opt'>log me out</item>
<item id='lcquestion'>What is your question</item>
<item id='hours_opt'>When are you open</item>
<item id='email_opt'>Send Mail</item>
<item id='showlog_text'>Show me log</item>
<item id='send_opt'>Send Chat</item>
<item id='closepopup_opt'>Close Window</item>
<item id='ext_auth'>The following services require additional authentication. Please provide
redentials to use these services.</item>
<item id='ext_auth_opt'>Other Logins</item>
<item id='autologin_loginerr'>The system has attempted to log you in with invalid information.
lease contact your administrator.</item>
<xtimestamphtml><span style='font-size: x-small;color:red;'>[[TIMESTAMP]]</span></timestamphtml>
<alertmsg>You have a new message</alertmsg>
<loginerror>Invalid Login. Please try again...</loginerror>
<css id='#logotable'>background-color:#FFFFFF;border-bottom:1px solid #000000;</css>
<css id='#tablemain'>border-top: 2px solid #eeeeee;</css>
Here is an example of the Interface with other tags which will help us customize the Self Service Portal.
In the example below we will see an interface created as "My BMC Brand"
Click Modify and add elements for branding click save. Make sure Servlets are refreshed
After the above settings are in place the SSP will look as below compared to Out of box as per the elements changed,
In the example above compared examples we did the following:
- Added bmcsoftware logo on the right.
- Added a new banner on the left.
- Set the background color of the banner to light grey from blue.
- Removed the BMC background image from the logout button.
- Change the logout button text color to blue
- Change the Question types onto the portal
Changing the Default and Initial Greeting
1.) Changing the initial customer greeting can be done from here.
2.) To change the default image of Jenn we will follow below steps,
Images are located at location: XXXXX\Program Files\Apache Software Foundation\Tomcat\webapps\eschat\resources\img
The default image configured in arhome.html is "wait.gif"
All we will do here is copy the image we want to configure in the "img path" and rename it as wait.gif by making a copy of the original "wait.gif" file. It is shown below. (Note we are following this step to avoid making direct change in arhome.html file as a best practice with out of box)
Once replaced make sure to restart tomcat and clear the browser cache.
Below is an example after changing the initial greeting and default image
Any HTML element contained on the arhome.html page can be manipulated be the interface configuration option. This functionality is provided to allow branding and language enablement of the SSP interface but should only be done if you are proficient in HTML and CSS.
If you are familiar with HTML and CSS and have a strong background in understanding of HTML and CSS you can open the arhome.html page in a text editor and inspect all the HTML elements. We recommend this is done by making a copy of the arhome.html page on a local system for inspection as to not accidently modify the arhome.html page.
The arhome.html page can be found in the tomcat webapps folder or eschat once the eschat.war file has been deployed.
Brand mapping is an option that allows you to create a few interfaces options and then map multiple companies to one of these options. This is useful when you may have many companies defined but only have the need for few branding options.
As with the interfaces option this is a Self Service Configuration setting. It’s XML section name is brand_mappings and you may have 0, 1, or more of these defined.
An example XML configuration for a mapping is as below
The element definitions are:
- <branded_mapping> - Individual mapping wrapper and contains the rest of the XML elements.
- <branded_company> - Name of the company to map a list of branded companies to.
- <separator> - To try to be as flexible as possible we allow for the definition of the company separator. This will be discussed in more detail below.
- <company_list> - This is the list of companies either all on separate lines or separated by the value(s) presented in <separator>.
If the separator element is left empty then each company name is expected to be on separate lines. No spaces , tabs, or other characters can be on each line.
If the separator field is set it may be set to a single character like a coma or semicolon
Below is an example, we will see creating BMC Interface Option and mapping multiple Companies.
In the above screen as we see BMC is the company which is containing the rest of the customized XML elements in the Interface Section “My Brand BMC” (we created earlier above) and hence BMC is our <branded_company>
Calbro Services and Invention Services are the companies which I want to brand against BMC, and hence these two are under the company list.
Once the above settings are in place and saved after refreshing servlets, Users belonging to Company “Calbro Services” and “Invention Services” will see the branded Self Service Portal which has been configured for company BMC as above.
Users belonging to other companies will use the default design of Self Service Portal as those companies are not branded .
In the screenshot below you see Mary is part of Calbro Services and hence once she logs in, she is able to view the branding. Similarly all other users who are a part in the list below and also the users who are a part of Invention Inc will observe the same.
To get more information on how to Rebrand MyIT portal please refer below link from BMC Documentation Portal space.
Known Issues and Workaround
I hope you find this blog useful. Please comment on this blog with your suggestions to make the blog more productive and appreciate your general comments as well on this blog.
You can find more content like this about BMC Remedy products on the BMC Remedy Pulse Blogs page.
At BMC we always strive to make our customers realize more value from our Products and be successful.
You can now also connect with us via chat session to get quick information on how to type question. For details, please refer Connect with BMC Support Team over Chat sessions.
You can also join the Customer Support Community to learn about and provide feedback on ways Customer Support can enable your success.