Virtual Agent button

[Cheryl Pledger]

We were asked to add text to the virtual agent button for accessibility purposes.  We’re able to change the width and color but can’t figure out how to get text in there.

Here’s what we have now:

What we trying to do is something like this:

Does anyone know if this is possible, and if so, how?

[Sujatha V M]

@Cheryl Pledger  In the out of the box widget "Virtual Agent Service Portal Widget", in Body HTML add the below line, 

<div class="myChatBubble" ng-if="!$ctrl.isWindowVisible">${Contact Us}</div>

<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>
  <div class="myChatBubble" ng-if="!$ctrl.isWindowVisible">${Contact Us}</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-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>

In the CSS, call the class "myChatBubble" and define the parameters

// OVERRIDE TO DISPLAY RECORD CARDS

div.myChatBubble {
  border: 1px solid #d4d4d4;
  border-radius: $button-dimensions;
  display: inline-block;
  position: absolute;
  font-weight: bold;
  font-size: 14px;
  font-family: arial;
  color: #000000;
  right:25px;
  width:150px;
  background-color: #D8BFD8;
  height: $button-dimensions;
  padding: 20px 30px 20px 15px;
  }

Result: 

 Note: You can modify the positioning of the text and box accordingly. 

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