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="">
          </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>

View fullsize

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