Hi there,

Noticed the presentation of the Virtual Agent widget on the HI Service Portal? A nice 'feature bubble' is presented when hovering over the Virtual Agent icon, the hover showing Topics the Virtual Agent can help you with. A nice small addition, which makes the Virtual Agent more attractive. Unfortunately, not available in New York on customer instances or personal developer instances. Who knows, maybe Orlando.

So let's give it a go and see if we can create our own

HI service Portal

When hovering over the Virtual Agent icon, this is how the feature bubble looks like:

Custom Service Portal widget

Our starting point will be our previous Virtual Agent SlideNav Service Portal widget which we've set up a few weeks ago.

Basically, with this custom Service Portal widget the Virtual Agent is not presented through a pop-up though through a SlideNav from the right instead.

Body HTML Template

1) Adding a div element for the bubble

Within the conversation-button-container, add:

2) Adding ng mouse elements to display/hide the bubble

On the button tab, add:

ng-mouseenter="c.showConversationBubble()" ng-mouseleave="c.hideConversationBubble()" ng-mousedown="c.showConversationWindow()"

3) Full code:

<!-- Virtual Agent button -->
<div ng-if="user.logged_in" class="conversation-button-container">
  <button data-toggle="modal" data-target="#vaModal" class="help-button" style="background-color: {{::c.options.button_color}}" ng-attr-tabindex="0" ng-mouseenter="c.showConversationBubble()" ng-mouseleave="c.hideConversationBubble()" ng-mousedown="c.showConversationWindow()">
    <div class="hover-overlay"></div>
    <span aria-hidden="true" ng-class="'help-icon icon-open sn-va-widget-icon'" style="background-image: url('{{::c.options.background_image}}')"></span>
  </button>  
  <!-- Conversation bubble-->
  <div ng-if="c.enableConversationBubble" class="conversation-bubble">
    <font class="conversation_bubble_question">{{::data.conversationBubbleQuestion}}</font><br />
    <font class="conversation_bubble_answer">{{c.conversationBubbleAnswer}}</font>
  </div>
</div>

<!-- Modal -->
<div class="modal right fade" id="vaModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <iframe class="agent" ng-src="{{c.widget_source}}"></iframe>
  </div>
</div>

CSS

1) Adding styling for the bubble:

// Conversation Bubble
.conversation-bubble {
  border: 1px solid #d4d4d4;
  border-radius: $button-dimensions;
  display: block;
  width:285px;
  height: $button-dimensions;
  box-shadow: 0px 2px 11px #ababab;
  -moz-box-shadow: 0px 2px 11px #ababab;
  -o-box-shadow: 0px 2px 11px #ababab;
  padding: 8px 12px;
}

2) Adding styling for the bubble question:

.conversation_bubble_question {
  font-weight: bold;
}

3) Adding styling for the bubble answer:

.conversation_bubble_answer {
  font-style: oblique;
}

4) Full code:

$window-width: 375px;
$button-dimensions: 60px;

// Conversation Bubble
.conversation-bubble {
  border: 1px solid #d4d4d4;
  border-radius: $button-dimensions;
  display: block;
  width:285px;
  height: $button-dimensions;
  box-shadow: 0px 2px 11px #ababab;
  -moz-box-shadow: 0px 2px 11px #ababab;
  -o-box-shadow: 0px 2px 11px #ababab;
  padding: 8px 12px;
}

.conversation_bubble_question {
  font-weight: bold;
}

.conversation_bubble_answer {
  font-style: oblique;
}

// Modal
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: $window-width;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.right .modal-body {
  padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
  right: -$window-width;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}

// Virtual Agent button
.sn-card-component_records {
  display: block !important;
}

.conversation-button-container {
  position: fixed;
  right: 30px;
  bottom: 15px;
  z-index: 20;
}

.help-button {
  position: relative;
  width: $button-dimensions;
  color: #fff;
  float: right;
  border: none;
  height: $button-dimensions;
  border-radius: $button-dimensions;
  box-shadow: 0px 2px 11px #ababab;
  -moz-box-shadow: 0px 2px 11px #ababab;
  -o-box-shadow: 0px 2px 11px #ababab;
  padding: 0;

  &::before {
    content: "";
    width: $button-dimensions;
    height: $button-dimensions;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }

  &:hover::before {
    background-color: rgba(0,0,0,0.2);
  }

  .help-icon {
    pointer-events: none;
    position: relative;
  }

  .sn-va-widget-icon {
    height: 32px;
    top: 1px;
    left: 12px;
    width: 36px;
    display: block
  }
}

// Agent Frame
.agent {
  border: 0px;
  height: 100vh;
  width: 100%;
}

Server Script

Using the Server Script is new if we look at our previous version of the Virtual Agent Service Portal SlideNav widget. All Server Script is supposed to retrieve the Virtual Agent topics which will be displayed within the feature bubble.

1) Full code:

(function() {

    data.conversationBubbleQuestion = gs.getMessage(gs.getProperty('qt_va_conversation_bubble_question'));

    var topicArr = [];

    var grTopic = new GlideRecord('sys_cs_topic');
grTopic.addEncodedQuery('active=true^design_category!=5628e7f27373230025d032e954f6a7de^ORdesign_category=NULL^design_category!=23242db273603300c1dc32e954f6a79f^ORdesign_category=^name!=system^nameNOT LIKE_');
    grTopic._query();

    while(grTopic._next()) {
        topicArr.push(gs.getMessage(grTopic.getDisplayValue()));
    }
    topicArr.join();

    data.topicArr = topicArr;

})();

Client Controller

Within the Client Controller, we need to add controllers that will be used called upon within the Body HTML Template.

1) Full code:

function() {

    var c = this;

    var topicArr = c.data.topicArr;
    c.widget_source = '';

    c.showConversationBubble = function() {
        if(!c.conversationBubbleAnswer) {
            var topicStr = topicArr[Math.floor(Math.random() * topicArr.length)];
            c.conversationBubbleAnswer = topicStr;
        }
        c.enableConversationBubble = true;
    }
    c.hideConversationBubble = function() {
        c.enableConversationBubble = false;
        c.expiredConversationBubble = true;
        c.conversationBubbleAnswer = '';
    }

    c.showConversationWindow = function() {
        c.widget_source = c.options.url;
    }

}

Option schema

The Option schema will be untouched. Though, just in case you don't have the code for this the full code below.

1) Full code:

[ {
  "name" : "background_image",
  "section" : "Presentation",
  "default_value" : "/images/sn-va-sp-widget/sn-va-sp-widget-icon.svg",
  "label" : "Background imeage",
  "type" : "string"
}, {
  "name" : "button_color",
  "section" : "Presentation",
  "default_value" : "#8D8DE0",
  "label" : "Button color",
  "type" : "string"
}, {
  "name" : "url",
  "section" : "Behavior",
  "default_value" : "$sn-va-web-client-app.do?sysparm_skip_load_history=true",
  "label" : "URL",
  "type" : "string"
} ]

Result

With our previous Service Portal widget in mind, we didn't had to add that much code. Basically just a div which presents the feature bubble, adding Server Script to collect the topic names, and adding Client Controller which is called upon in the Body HTML Template to show/hide the div.

The result of this all:

Note: Attached to this article is an XML export of this Service Portal widget.

Future enhancement

Having this custom Service Portal widget makes the presentation of the Virtual Agent widget more attractive. Though still… a nice enhancement we came up with would be to have the feature bubble pop-up after N seconds. In the coming days/weeks we will work on this and share an updated version of this Virtual Agent Service Portal widget on the Community.

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

	If this post helped you in any way, I would appreciate it if you hit bookmark or mark it as helpful.Interested in more articles, blogs, videos, and Share projects on Virtual Agent I published?- Virtual Agent

Kind regards,

Mark

---

LinkedIn