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

@Mark Roethof  - any way to do this without the custom widget?  Orlando added the integrated chat setup into portal.

Only the cosmetic part would be achievable by influencing the CSS. See the last Virtual Agent Academy which I presented for this:
Virtual Agent Academy June 30: Simple Widget Branding and Customization

A bubble could be achieved through the CSS also. You just need a little bit of CSS knowledge.

Having also text presented which is queried Server Side, having the bubble appear after N seconds: no go. For this you would need to clone or create your own widget.

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn
Community article list

Bummer!  Hopefully, they'll release the bubble in a future patch.

Thanks for the pointer to the webinar. I was able to create a new icon with a non-dynamic bubble and your webinar helped. We just want to bring people’s attention to it, so don’t need the server script for topics. Thanks!

Hey Kim,

Would be you able to help me to create this new icon with non-dynamic bubble? I tried in La Jolla theme.But I don't see the red bg for this chat icon.

Hello @Kim Sullivan   

Would you be willing to share your css changes you made to achieve the new button look (with the text)?  I assume the wording is a background image, but to get it to display correctly requires a bunch of other css overrides.  I would appreciate it!  Thanks.  Dan  

Happy to!  And yes, the image (riva_bubble.png) is just something I whipped up in SnagIt.  Its actually the text and the red chat circle all in one image - it replaces the default chat image. Updated screen shot below as well.

.sp-ac-root button.sp-ac-btn.closed .sp-ac-btn-icon {
  background-image: url(riva_bubble.png);
  background-position: center 0px;
  background-size: 248px 61px;
  background-color: transparent;
  position: fixed;
  right: 15px;
  bottom: 5px;

  height: 60px;
  width: 252px;
  
  border-radius: 15px;
}

.sp-ac-root button.sp-ac-btn {
   box-shadow: none;
}

Thanks!  I appreciate it. 🙂

Hi,

We really want to to use the bubble for our Virtual Agent so we turned off our VA for Service Portal and downloaded the update set and applied the widget to our portal home page.  (I will probably end up putting it in a footer)  Now I cannot seem to get my the background image to load on the VA button or in the chat header.

Also, is it possible to change the background color of the chat bubble for the virtual agent and the the user.

Thanks!

Hi, can this be achieved without modifying the CSS on the widget on the service portal?

Hello Mark and all,

I am currently attempting to implement your SlideNav and have some questions as I need to make some changes if this is going to work in my environment. I will start by saying the major issue I am having with the OOB widget and what shifted me towards your widget is that upon refreshing the portal the chat window does not automatically close so we are getting bogus/faulted interactions unless the system logs the user out completely. Basically, unless the chat bubble is closed before leaving the portal and there is an active user session VA automatically starts an interaction upon returning to the portal. Your widget resolves that concern and gives me the balloon tips which I love but does not stay pinned. Kodi on the KB of SN works the way that I would like minus not using the chat history for a current question/session. I attempted to go down the rabbit hole of Prevent modal window from closing when clicking outside - Support and Troubleshooting (servicenow.co... for your widget but is not working the way I would like. Since I am using your code I and a not the best coder I wanted to reach out for possible assistance and/or guidance. Is it possible to treat this as a sort of sidebar and actually pin the chat window? The main issue/concern is that if you click on a link from VA then the user loses the steps and have to keep clicking back and forth to open the chat window. I hope this makes sense and look forward to hearing from you.

Thanks,

John

Using the articles below I was able to come up with my own custom widget incorporating the features of each minus the slidenav as I wasn't a fan of the functionality compared to the OOB widget and the window focus. I was able to include some additional functionality like automatically opening the chat window if there is an open interaction.

https://www.servicenow.com/community/virtual-agent-nlu-articles/virtual-agent-feature-bubble-2-auto-... 

https://www.servicenow.com/community/virtual-agent-nlu-articles/virtual-agent-feature-bubble/ta-p/23... 

https://www.servicenow.com/community/virtual-agent-nlu-articles/virtual-agent-sidenav-service-portal... 

https://www.servicenow.com/community/virtual-agent-nlu-articles/toggling-virtual-agent-chat-client-u...

In case there are others out there that want to do the same here is my code:

Body HTML

<div class="conversation-button-container">
  <div class="conversation-region fade"
       ng-class="{'open': $ctrl.isWindowVisible}">
    <div class="sn-connect sn-connect-floating">
      <div class="sn-connect-floating-wrapper loaded">
        <div class="conversation-container">
          <iframe title="${Chat Support}" class = "chat-frame" scrolling="no"  horizontalscrolling="no" verticalscrolling="no" frameborder="none" ng-src="{{$ctrl.vaSource}}">
          </iframe>
        </div>
      </div>
    </div>
  </div>
  <button aria-label="{{$ctrl.helpButtonAriaLabel}}"
          class="help-button"
          ng-attr-tabindex="0"
          ng-class="{'state-open': $ctrl.isWindowVisible, 'state-unread': $ctrl.hasUnreadMessages}"
          ng-click="$ctrl.toggleWindow()"
          ng-style="{'background-color': $ctrl.options.button_color}"
          ng-mouseleave="$ctrl.hideConversationBubble()"
          ng-mousedown="$ctrl.showConversationWindow()"
          ng-class1="{'state-open': $ctrl.showConversationBubble}"
          ng-attr-tabindex="0">
          <!-- ng-mouseenter="$ctrl.showConversationBubble()" -->
    <div class="hover-overlay"></div>
    <span aria-hidden="true" ng-class="$ctrl.isWindowVisible ? 'help-icon icon-close icon-cross' : 'help-icon icon-open sn-va-widget-icon'"></span>
  </button>
  <!-- Conversation bubble-->
  <!-- <div ng-if="(!$ctrl.firstPress || ($ctrl.timeoutConversationBubble && !$ctrl.expiredConversationBubble))" class="conversation-bubble"> -->
   <div ng-if="($ctrl.enableConversationBubble && !$ctrl.firstPress) || ($ctrl.timeoutConversationBubble && !$ctrl.expiredConversationBubble)" class="conversation-bubble">
    <font class="conversation_bubble_question">{{::data.conversationBubbleQuestion}}</font><br />
    <font class="conversation_bubble_answer">{{$ctrl.conversationBubbleAnswer}}</font>
  </div>
</div>

CSS

$color-darker: #485563;
$color-white: #ffffff;

$window-width: 375px;
$window-height: 600px;
$button-dimensions: 60px;
$button-height: 60px;
$bottom-margin: 15px;
$bottom-width: 375px;

$sn-chatbot-animation-speed: 300ms;

// Conversation Bubble
.conversation-bubble {
  border: 1px solid #d4d4d4;
  background-color: #62baa2;
  border-radius: $button-dimensions;
  display: inline-block;
  width: 325px;
  height: 70px;
  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;
}

// OVERRIDE TO DISPLAY RECORD CARDS
.sn-card-component_records {
  display: block !important;
}

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

  .conversation-region {
    position: relative;
    opacity: 0;
    visibility: hidden;


    &.open {
      transition: $sn-chatbot-animation-speed ease-in opacity;
      opacity: 1;
      visibility: visible;

    }
  }


  .help-button {
    position: relative;
    width: 60px;
    color: #fff;
    float: right;
    border: none;
    height: 60px;
    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;
    background-color: #8D8DE0;

    &::before {
      content: "";
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    &:hover::before {
    	background-color: rgba(0,0,0,0.2);
    }

    &:focus {
      outline: thin dotted;
      outline-color: gray;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: 2px;
    }

    &.state-unread {
      & > span:after {
        content: ' ';
        position: absolute;
        top: -17px;
        right: -14px;
        width: 16px;
        height: 16px;
        background-color: #ed6e5c;
        border-radius: 25px;
      }
    }
    
    .help-icon {
      pointer-events: none;
      position: relative;
    }
    
    .sn-va-widget-icon {
    	background-image: url('/images/sn-va-sp-widget/sn-va-sp-widget-icon.svg');
      height: 32px;
      top: 1px;
      left: 12px;
      width: 36px;
      display: block;
    }

    .icon-close {
      font-size: 20px;

    }

  }
}

// window sizing
.sn-connect-floating {
  position: relative;
  bottom: 15px;
  right: 0;
  display: none;

  .sn-connect-floating-wrapper {
    width: $window-width; 
    transition:
    border-bottom: 1px solid #bdc0c4;
    margin-right: 0;
    right: 0;
    box-shadow: 0px 2px 11px #ababab !important;
    -moz-box-shadow: 0px 2px 11px #ababab !important;
    -o-box-shadow: 0px 2px 11px #ababab !important;
    transition: max-height 0s $sn-chatbot-animation-speed;
    display: none;
    border-radius: 10px;
    overflow: hidden;

    .conversation-container {
      height: 100%;
      display: none;

      .chat-frame {
        max-height: $window-height;
        height: calc(100vh - $button-height - ($bottom-margin * 3));
        width: $window-width;
        margin-bottom: -5px;
        border: none;
        overflow: hidden;
        background-color: #fff;
      }

      // Immediate div is autogenerated from serviceportal
      & > div {
        height: 100%;
      }
    }
  }
}

// Mobile SCSS
@media (max-width: 425px) {  
  .sn-connect-floating {
    .sn-connect-floating-wrapper {
      position: fixed;
      max-height: 100%;
      width: 100%;
      left: 0;
      right: 0;
      bottom: calc($button-height + 20px);
      top: 0;
      border-radius: 0px !important;

      .conversation-container {
        position: absolute;
        max-height: 100%;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        .chat-frame {
          max-height: initial !important;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
      }
    }
  }
}

Server Script

(function() {

    var instanceGR = $sp.getInstanceRecord();
    options.va_url_params = options.va_url_params || "";
    options.button_color = options.button_color || "red";
    data.conversationBubbleTimeout = 500;
    //data.conversationBubbleQuestion = gs.getMessage(gs.getProperty('qt_va_conversation_bubble_question')); // original code
    data.conversationBubbleQuestion = gs.getMessage("Hi {0}, I am your Virtual Assistant! Can I be of assistance? An example would be:", [gs.getUser().getFirstName()]);
    data.toggle_chat_time = 500;

    var topicArr = [];

    var grTopic = new GlideRecord('sys_cs_topic');
    grTopic.addEncodedQuery('active=true^published=true^discoverable=true^design_category!=b1dfd7c254103300fa9b212481c502cb^ORdesign_category=NULL^design_category!=NULL');
    grTopic._query();

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

    data.topicArr = topicArr;
    //start of added code
    var interaction = new GlideAggregate('interaction');
    var user = gs.getUserDisplayName();
    interaction.addActiveQuery();
    interaction.addQuery('opened_for.name', '=', user);
    interaction.addAggregate('COUNT');
    interaction.query();
    var interactionCount = 0;
    if (interaction.next()) {
        interactionCount = interaction.getAggregate('COUNT');
    }
    data.interaction_count = interactionCount;

    //end of added code
})();

Client Controller

function link($log, $scope, $element, $document, spModal, $q, $timeout, $window) {
    'use strict';

    /* widget controller */
    var $ctrl = this;
    var topicArr = $ctrl.data.topicArr;
    var interaction_count = $ctrl.data.interaction_count;
    $ctrl.data.interaction_count = interaction_count;
    $ctrl.widget_source = '';
    var $spContainer = $document.find('.sp-page-root');
    var $widgetParent = $element.parent();
    var START_SUPPORT_CONVERSATION = "${Start Support Conversation}";
    var CLOSE_SUPPORT_CONVERSATION = "${Close Support Conversation}";

    $ctrl.isWindowVisible = false;
    $ctrl.hasUnreadMessages = false;
    $ctrl.firstPress = false;
    $ctrl.vaSource = '';
    $ctrl.helpButtonAriaLabel = START_SUPPORT_CONVERSATION;

    //added code starts here
    $ctrl.showConversationBubble = function() {
        if (!$ctrl.conversationBubbleAnswer) {
            var topicStr = topicArr[Math.floor(Math.random() * topicArr.length)];
            $ctrl.conversationBubbleAnswer = topicStr;
        }
        $ctrl.enableConversationBubble = true;
    };
    $ctrl.hideConversationBubble = function() {
        $ctrl.enableConversationBubble = false;
        $ctrl.expiredConversationBubble = true;
        $ctrl.conversationBubbleAnswer = '';
    };

    $ctrl.showConversationWindow = function() {
        if ($ctrl.data.interaction == true) {
            $ctrl.widget_source = $ctrl.options.url;
        }
    };
    //added code ends here
    $ctrl.toggleWindow = function() {
        if ($ctrl.isWindowVisible) {
            $ctrl.isWindowVisible = false;
            $ctrl.helpButtonAriaLabel = START_SUPPORT_CONVERSATION;
            $timeout(function() {
                if (!$ctrl.isWindowVisible) {
                    $element.find('.conversation-container').css("display", "none");
                    $element.find('.sn-connect-floating').css("display", "none");
                    $element.find('.sn-connect-floating-wrapper').css("display", "none");

                    // ios overlay hacky fix.
                    $document.find('.touch_scroll').css("-webkit-overflow-scrolling", "touch");
                }
            }, 300);
        } else {
            if (!$ctrl.firstPress) {
                $ctrl.firstPress = true;
                $ctrl.vaSource = '/$sn-va-web-client-app.do?sysparm_nostack=true&sysparm_stack=no';
                if ($ctrl.options.va_url_params) {
                    $ctrl.vaSource = $ctrl.vaSource + '&' + $ctrl.options.va_url_params;
                }
            }
            $ctrl.isWindowVisible = true;
            $ctrl.hasUnreadMessages = false;
            $ctrl.helpButtonAriaLabel = CLOSE_SUPPORT_CONVERSATION;
            $element.find('.conversation-container').css("display", "block");
            $element.find('.sn-connect-floating').css("display", "block");
            $element.find('.sn-connect-floating-wrapper').css("display", "block");

            // ios overlay hacky fix.
            $document.find('.touch_scroll').css("-webkit-overflow-scrolling", "auto");
        }
    };

    $window.addEventListener("message", function(e) {
        if (e.data === 'sn-va-web-client-app-new-message' && $ctrl.isWindowVisible === false) {
            $ctrl.hasUnreadMessages = true;
        } else if (e.data === 'sn-va-web-client-app-trigger-login') {
            $window.location.reload(true);
        }
    });

    $element.find('.help-button').on("mouseup", function(e) {
        e.target.blur();
        e.stopPropagation();
    });

    $element.find('.help-icon').on("mouseup", function(e) {
        e.target.blur();
        e.stopPropagation();
    });

    $ctrl.openWindow = function() {
        $ctrl.isWindowVisible = true;
        // delay before clearing unread message indicator
        // in-case user opens and closes quickly
        $timeout(function() {
            if ($ctrl.isWindowVisible) {
                $ctrl.hasUnreadMessages = false;
            }
        }, 500);
    };

    var _closeWindow = function() {

        $ctrl.isWindowVisible = false;
        $ctrl.hasActiveConversation = false;
    };
}

Link

function link(scope) {

    var $ctrl = scope.$ctrl,

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


    $timeout(function() {
        var interaction_count = $ctrl.data.interaction_count;
        $ctrl.data.interaction_count = '';
        if (interaction_count < 1 && !$ctrl.isWindowVisible) {
            var topicStr = $ctrl.data.topicArr[Math.floor(Math.random() * $ctrl.data.topicArr.length)];
            $ctrl.conversationBubbleAnswer = topicStr;
            $ctrl.timeoutConversationBubble = true;
        }
        if (interaction_count > 0 && !$ctrl.isWindowVisible) {
            $ctrl.toggleWindow();
        }
    }, $ctrl.data.toggle_chat_time && $ctrl.data.conversationBubbleTimeout);
}

Option Schema

[ {
  "name" : "background_image",
  "section" : "Presentation",
  "default_value" : "/images/sn-va-sp-widget/sn-va-sp-widget-icon.svg",
  "label" : "Background image",
  "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",
  "label" : "URL",
  "type" : "string"
} ]