Blog

Virtual Agent Info Bubble

Add an informational bubble next to the Virtual Agent widget

Instructions

  1. Install Plugin, Virtual Agent Portal Widgets (if not already installed)

  2. Left Navigator Bar > Service Portal > Widgets

  3. Clone the Virtual Agent Service Portal Widget

  4. Add CSS

/* Bubble Info */
div.myBubble {
  margin-top:0px;
  width: 200px;
  display: inline-block;
  font-weight: 500;
  font-size: 18px;
  background-color: #FFF;
  color: #F63440;
  border: 2px solid #F63440;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding:5px;
  margin-right:20px;
}
div.myBubble:before {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  top:20px;
  left:200px;
  border: 10px solid transparent;
  border-left-color: #F63440;
}

5. Adjust 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 class = "chat-frame" scrolling="no"  horizontalscrolling="no" verticalscrolling="no" frameborder="none" ng-src="{{$ctrl.vaSource}}">
          </iframe>
        </div>
      </div>
    </div>
  </div>
  <div class="myBubble" ng-if="!$ctrl.isWindowVisible">${How can we help you today?}</div>
  <button aria-label="${Start Support Conversation}" 
          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-attr-tabindex="0">
    <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>  
</div>

6. Go to your Service Portal
7. CTRL-Right Click > Page Designer
7. Add new widget to any container