Virtual Agent feature bubble (2), auto display after N seconds

Hi there,

A few weeks ago we've setup a custom Virtual Agent Service Portal widget with a feature bubble. A feature bubble similar to the one 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.

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.

Current custom Service Portal widget

Our starting point will be our previous Virtual Agent SlideNav Service Portal widget which we've setup and enhanced 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. On top of this presentation, a feature bubble is shown when hovering over the Virtual Agent icon.

Implementing 'timeout'

Body HTML Template

1) Expanding ng-if for the conversation-bubble

Within the ng-if online 8, add:

|| (c.timeoutConversationBubble && !c.expiredConversationBubble)

2) Full code:

(added an image because not all code is rendered well on the HTML field)

CSS

No changes.

1) 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

Adding a timeout property

1) Adding data.conversationBubbleTimeout, which will be used within the Link

data.conversationBubbleTimeout = gs.getProperty('qt_va_conversation_bubble_timeout');

2) Adding System Property

Name: qt_va_conversation_bubble_timeoutDescription: N milliseconds after which the Conversation bubble will appearType: String

Value: 30000

3) Full code:

(function() {

    data.conversationBubbleTimeout = gs.getProperty('qt_va_conversation_bubble_timeout');
    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

No changes.

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;
    }

}

Link

Using the Link is new if we look at our previous version of the Virtual Agent Service Portal SlideNav widget. All Link code is supposed to support the timeout for after how many milliseconds the feature bubble will we displayed.

1) Full code:

function link(scope) { 

    var c = scope.c,

    $timeout = $injector.get('$timeout');

    $timeout(function(){
        var topicStr = c.data.topicArr[Math.floor(Math.random() * c.data.topicArr.length)];
        c.conversationBubbleAnswer = topicStr;

        c.timeoutConversationBubble = true;
    }, c.data.conversationBubbleTimeout);

}

Option schema

No change.

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

The feature bubble now pops-up after the number of milliseconds set in the System Property or when hovering over the Virtual Agent icon. The auto popup only works once (and when the browser is refreshed), so no annoying constant pop-ups.

Share

An Update Set with this Service Portal widget can be downloaded from Share:

- Virtual Agent Service Portal widget (with SideNav & feature bubble)

---

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

---

Labels: