Instead of using the “Virtual Agent Button” provided with Virtual Agent, it is possible to create different widgets that use the Virtual Agent.

Here is a widget that displays the widget on page load.

Widget

HTML

<div class="panel panel- b">
  <div class="panel-heading">
    <h2 class="h4 panel-title" aria-label=""><span ng-if="c.options.glyph" aria-label=" glyph"><fa name="</h2>
  </div>
  <div class="panel-body" >
    <iframe class="virtualAgent" src="$sn-va-web-client-app.do?sysparm_skip_load_history=true"></iframe>
  </div>
</div>

CSS (Adjust to your design style)

h2.panel-title {
  span {
    margin-right: 2px;
  }
}
.virtualAgent {
  height:600px;
  width:330px;
  border-width: 1px;
  border-color: #F1F1F1;
  border-style: solid;
}

Client Script

function() {
  /* widget controller */
  var c = this;
}

Server Script

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

})();