Virtual Agent SideNav Service Portal widget

Hi there,

While researching for a little different look and feel for the Virtual Agent Service Portal widget, I came up with a new idea:
- Presenting the widget on the right side of the screen, full-height;
- Presenting the widget in a modal like way.

In my opinion, this gives a little nicer look and feel. Also looking at the modal behavior, you could simply click next to the widget, and it should be hidden. No need to tick that X icon.

How to

What I came up with, a custom Service Portal widget, which you can apply in the same way as the out-of-the-box Virtual Agent Service Portal widget. Simply user the Page designer to add the widget to the main page of the Service Portal, or add the widget to the header (or footer). The hardest part of the widget was not the Virtual Agent part itself… though the modal! Luckily… I described the modal already in an article last week (Service Portal Modal SlideNav).

The Service Portal Body HTML template consists of the Virtual Agent icon which is floating on the bottom right of the screen. onClick of the icon, the modal will appear on the right side of the screen, fading in. The modal only containing an iframe that has the Virtual Agent widget as source ($sn-va-web-client-app.do).

The CSS part of the Virtual Agent widget is almost entirely copied from the out-of-the-box Virtual Agent Service Portal Widget. Some instance options are added so one could change the presentation and behavior of the widget a little bit.

Result

Let's just make it visible!

Note: Tested on Madrid and New York

Artifacts

If interested in setting-up this Service Portal widget yourself, below the artifacts. In the Platform UI navigate to "Service Portal > Widgets". Create a new widget with below Body HTML template and CSS.

Body HTML template

<!-- Virtual Agent button -->
<div ng-if="user.logged_in" class="conversation-button-container">
  <button data-toggle="modal" data-target="#vaModal" class="help-button" style="background-color: {{::c.options.button_color}}" ng-attr-tabindex="0">
    <div class="hover-overlay"></div>
    <span aria-hidden="true" ng-class="'help-icon icon-open sn-va-widget-icon'" style="background-image: url('{{::c.options.background_image}}')"></span>
  </button>  
</div>

<!-- Modal -->
<div class="modal right fade" id="vaModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <iframe class="virtual_agent" style="border:0px; height:100%; width:100%" src="{{::c.options.url}}"></iframe>
  </div>
</div>

CSS

$window-width: 375px;
$button-dimensions: 60px;

// Modal
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: $window-width;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.right .modal-body {
  padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
  right: -$window-width;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}

// Virtual Agent button
.sn-card-component_records {
  display: block !important;
}

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

.help-button {
  position: relative;
  width: $button-dimensions;
  color: #fff;
  float: right;
  border: none;
  height: $button-dimensions;
  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;

  &::before {
    content: "";
    width: $button-dimensions;
    height: $button-dimensions;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }

  &:hover::before {
    background-color: rgba(0,0,0,0.2);
  }

  .help-icon {
    pointer-events: none;
    position: relative;
  }

  .sn-va-widget-icon {
    height: 32px;
    top: 1px;
    left: 12px;
    width: 36px;
    display: block
  }
}

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

Kind regards,
Mark

---

LinkedIn