SaleMove Widgets

SaleMove currently supports 2 widgets provided as custom HTML elements (HTML Custom Element support will be polyfilled by SaleMove, if needed): <sm-engaged-operator> and <sm-engaged-visitor>.

The following sections describe the internal structure of the widgets. This is provided so that the widgets could be styled with CSS loaded onto the same page. Note that the structure is illustrative and therefore usage of the Child Combinator/Selector (the > operator) and the Adjacent Sibling Combinator/Selector (the + operator) is not supported.

sm-engaged-operator widget

During an engagement the <sm-engaged-operator> element will be populated with, depending on the media used, the Operator profile picture, the Operator’s name, the audio indicator, and the video stream from the Operator’s camera.

<sm-engaged-operator>
  <!-- Depending on Operator media, .sm-engaged-operator will have one of the following class names: -->
  <!-- sm-engaged-operator-video - Operator has video enabled -->
  <!-- sm-engaged-operator-audio - Operator has audio but no video -->
  <!-- sm-engaged-operator-text - Operator does not have audio nor video-->
  <div class="sm-engaged-operator sm-engaged-operator-video">
    <video class="sm-engaged-operator-media"></video>

    <!-- Media overlay -->
    <!-- Media overlay should be visible when no video stream has been muted -->
    <div class="sm-engaged-operator-overlay-container">
      <!-- background-image is inlined only when operator has both audio and video muted -->
      <!-- With audio stream but no video stream, this element has no background-image set -->
      <!-- With visible video stream, this element does not exist in DOM -->
      <div class="sm-engaged-operator-overlay"></div>
    </div> <!-- sm-engaged-operator-overlay-container -->

    <div class="sm-engaged-operator-volume-container">
      <div class="sm-engaged-operator-volume-meter">
        <div class="sm-engaged-operator-volume"></div>
        <div class="sm-engaged-operator-volume"></div>

        <!-- Inactive volume meter indicator -->
        <div class="sm-engaged-operator-volume"></div>

        <!-- Active volume meter indicator -->
        <div class="sm-engaged-operator-volume sm-engaged-operator-volume-active"></div>

      </div>
    </div> <!-- sm-engaged-operator-volume-container -->

    <div class="sm-engaged-operator-name">Operator name</div>
  </div>
</sm-engaged-operator>

sm-engaged-visitor widget

During an engagement the <sm-engaged-visitor> element will be populated with, depending on the media used, audio and video buttons, an audio indicator, and a video stream from the Visitor's camera.

The audio and video buttons handle both media upgrade requests and on/off toggling of already established media. When the Visitor is using 'text' media, clicking the audio button will trigger a WIDGET_MEDIA_UPGRADE_REQUEST event with ['audio', 'phone'] or ['phone'] as the requested medias, depending on the Visitor's and Operator's browser capabilities. Similarly, when the Visitor is using either 'text' or 'audio' media, clicking the video button will trigger the upgrade request event with ['video'] as the requested medias. The WIDGET_MEDIA_UPGRADE_REQUEST event must be listened to and handled by the application for media upgrades through the widget to work. See the event's documentation for more details.

When the Visitor is using 'phone' media the audio button will be disabled.

<sm-engaged-visitor>
  <!-- Depending on Visitor media, .sm-engaged-visitor will have one of the following class names: -->
  <!-- sm-engaged-visitor-video - visitor has video enabled -->
  <!-- sm-engaged-visitor-audio - visitor has audio but no video -->
  <!-- sm-engaged-visitor-text - visitor does not have audio nor video-->
  <div class="sm-engaged-visitor sm-engaged-visitor-video">
    <video class="sm-engaged-visitor-media"></video>

    <!-- Media overlay -->
    <!-- Media overlay should be visible when no video stream has been muted -->
    <div class="sm-engaged-visitor-overlay-container">
    <!-- background-image is inlined only when Visitor has both audio and video muted -->
      <!-- With audio stream but no video stream, this element has no background-image set -->
      <!-- With visible video stream, this element does not exist in DOM -->
      <div class="sm-engaged-visitor-overlay"></div>
    </div> <!-- sm-engaged-visitor-overlay-container -->

    <div class="sm-engaged-visitor-volume-container">
      <div class="sm-engaged-visitor-volume-meter">
        <div class="sm-engaged-visitor-volume"></div>
        <div class="sm-engaged-visitor-volume"></div>

        <!-- Inactive volume meter indicator -->
        <div class="sm-engaged-visitor-volume"></div>

        <!-- Active volume meter indicator -->
        <div class="sm-engaged-visitor-volume sm-engaged-visitor-volume-active"></div>

      </div>
    </div> <!-- sm-engaged-visitor-volume-container -->

    <div>
      <div>
        <!-- Button to turn audio on/off -->
        <div class="sm-audio-button">
          <!-- Has 'disabled' suffix when audio is off -->
          <span class="sm-ico-audio-disabled"></span>
        </div>

        <!-- Button to turn video on/off -->
        <div class="sm-video-button">
          <!-- Has 'disabled' suffix when video is off -->
          <span class="sm-ico-video-disabled"></span>
        </div>
      </div>
    </div>
  </div>
</sm-engaged-visitor>

    Quickly fuzzy find classes, mixins, methods, file:

    Control the navigation frame:

    You can focus and blur the search input: