Virtual Agent Implementation Lab

Client Configuration 2.1

Web Client Branding 10-15m

Lab Objectives
You will achieve the following objectives:
• Configure Virtual Agent with Picxel’s company logo and avatar
• Set the Virtual Agent color schemes

Lab Dependency: Requires the completion of Lab 2.0

Required Resource(s): Picxel logo.png, Picxel avatar.png

Scenario

Picxel would like to integrate Virtual Agent into their existing ServiceNow solution. Part of a
successful Virtual Agent experience has to do with the personality of the Virtual Agent. In this
lab, you will set up the branding for the Virtual Agent.

Branding Virtual Agent

A. Get Required Lab Resources

1. In the Application Navigator, navigate to Self-Service > Knowledge.

2. Open the Virtual Agent Implementation knowledge base.

3. Open the Virtual Agent Lab Files knowledge article.

4. Download the Pixcel avatar and Pixcel logo attachments.

B. Create an Additional Branding Configuration
ServiceNow enables customers to create any number of branding configurations (referred to
as branding keys) to support the various organizations or users that interact with the instance.
This means that each service portal running on the platform can use its own uniquely branded
Virtual Agent client interface.

Configure Chat Bot Profile

1. Navigate to User Administration > Users.

2. Click New.

3. Complete the User – New Record form as follows:

User ID: itsm.bot
First name: ITSM
Last name: Bot

4. Click Submit.
5. In the All menu filter, type live_profile.list and press enter.

6. On the Live Profiles page, click New.

Result: The Live Profile – New Record form appears.

7. In the Live Profile – New Record form, perform the following:

• In the Name field, type ITSM Virtual Agent.
• On the Document field, click the magnifying glass icon. This action takes a bit of
time to process. It opens the Select the document dialog
• In this dialog, specify the following:
o In the Table name field, select User [sys_user] from the drop-down list.
o In the Document field, enter ITSM and select ITSM Bot.
o Then click OK, which returns you to the Live Profile – New Record form.
8. Back in the Live Profile – New Record form, click on Click to add… next to Photo.

9. In the Choose an Image dialog, choose the Pixel avatar.png image file you previously
downloaded and click OK.

10. Back in the Live Profile form, confirm that you have the correct values shown on the
left of the form, and then click Update.
C. Configure Branding
1. Navigate to Conversational Interfaces > Home, find the Brand your bot card, and
click on View brand settings.

2. In the Branding window, click New.

3. Complete the form as follows:
Branding name: Picxel
Chat Header: Picxel IT Support
Bot Profile: ITSM Virtual Agent
Chat Header Logo: click Attach image to upload the Picxel logo.png file

4. Click Save.

5. Scroll down to supply the following entries:

Chat Header Background: #6CD8FB
Chat Header Font: #ffffff
Result: The Branding window should show this example of the Bot.

6. Click Save again and navigate back to the Conversational Interfaces > Home.
7. Using the PIXCEL tabbed window, navigate to Service Portal > Agent Chat.

8. On the Service Portal Agent Chat Configurations page, open the Employee Portal
record.

9. In the Server script field, add a new line to existing code starting at the end of line 3,
as seen in red below. Note: Line 3 must end with a comma.

chat_queue: $sp.getValue('chat_queue'),
branding_key: "picxel"

10. Click Update.

Lab Verification
1. Navigate to Service Portal > Service Portal Home.

2. Click on the Virtual Agent chat icon in the lower right and validate that the Virtual
Agent branding dialog looks like the image below, and then close the tabbed
window.

Congratulations on completing the lab!