SaleMove is a platform that enables companies to have meaningful conversations with their customers. Our APIs allow you to provide online personalized human interaction to your customers and most qualified prospects.

As an introduction to the APIs, this guide teaches you how to:

  1. Set up SaleMove on your site, and
  2. Create a seamless way for your customers to talk with your business while browsing your site.

Installing SaleMove JavaScript (JS) API onto a site

Setting up SaleMove on your site is very simple. If you have an account provisioned by us, all you need to do is add the following <script> element to anywhere in your site’s source.

<script src="https://api.salemove.com/salemove_integration.js"></script>

And just like that, you can access our JS API as shown below. This guide uses ES6 syntax here and in following examples.

sm.getApi({version: 'v1'}).then((salemove) => {
  // JS API available
});

sm.getApi returns a Promise of the JS API. The Promise is resolved as soon as everything is ready, but it allows your code to start working with the API even before it is fully loaded. The Promise is resolved with a Salemove class instance (yes, we know that JS doesn’t really have classes).

Note that in production usage the script should be loaded asynchronously. You can do that by adding the async attribute to the <script> element and wrapping any calls to sm.getApi within the onload callback of that script. Or you can insert the script dynamically.

Enabling seamless video Engagement

As mentioned above, SaleMove APIs were created to allow you to provide your customers meaningful interactions with real humans. To demonstrate one way in which the APIs can help you achieve that goal, this guide shows you how to create a simple “Talk to a human” button that automatically connects a customer with a representative staffing the site.

Start by creating the button.

<div class="talk-to-human">
  Talk to a human!
</div>

Talk to a human!

Now wire that button to start a video conversation when clicked.

const button = document.querySelector('.talk-to-human');
button.addEventListener('click', () => {
  sm.getApi({version: 'v1'}).then((salemove) => {
    salemove.requestEngagement('video');
  });
});

There’s a couple things happening here:

  • The code uses document.querySelector to find the button on the page;
  • It uses addEventListener to listen to click events on the button;
  • It uses sm.getApi to get an instance of the JS API, as also shown above; and
  • It calls Salemove#requestEngagement to indicate that the user wants to talk to somebody, anybody, over video.

And to round things out, you need to add a place in the page where the customer representative’s video is shown. Change the HTML around the button you created before to accommodate for this.

<sm-engaged-operator></sm-engaged-operator>
<div class="talk-to-human">
  Talk to a human!
</div>

Notice the sm-engaged-operator element. It’s a custom HTML element, or a widget, that is automatically populated with the customer representative’s video stream when an Engagement starts. For more information, see SaleMove Widgets.

“An Engagement? What’s an Engagement?” you ask. Well, take a step back for a moment to learn about terminology. You can see the terms Visitor, Operator, and Engagement used all throughout our APIs. Operators are the representatives of your business, while Visitors are your customers who are visiting your site. Engagement is what we call an interaction between an Operator and a Visitor.

Right, now go ahead and click that button that you just created and see what happens. Moments after clicking the button, you should be talking face-to-face, as it were, to someone from your business as seen in the video below.

Providing user feedback

You might have noticed in the video above that the User Experience (UX) of the button was less than ideal. The button proudly proclaimed “Talk to a human!” and beckoned the user to click it even while the user was already talking to a human. In addition, the user was given no feedback after they pressed the button.

We believe that good UX is an integral part of an overall great Customer Experience (CX). To improve the UX of the initial result, the rest of the guide explains how to deal with some of its flaws and how to provide more feedback to your users.

Change the markup to include:

  • An Operator image to show before the video loads; and
  • A loading indicator to show while the Engagement is being established.
<div class="operator-container">
  <img src="operator.jpg" alt="A human">
  <sm-engaged-operator></sm-engaged-operator>
</div>
<div class="talk-to-human">
  <div class="button">
    Talk to a human!
  </div>
  <div class="loader">
    <div class="pulse"></div>
  </div>
</div>

Also change the button’s click listener. Make it trigger a loading animation when the button is clicked and then make it hide the button when the Engagement starts.

const button = document.querySelector('.talk-to-human');
button.addEventListener('click', () => {
  sm.getApi({version: 'v1'}).then((salemove) => {
    const request = salemove.requestEngagement('video');
    button.classList.add('loading');
    request.engagementPromise.then((engagement) => {
      button.classList.remove('loading');
      button.classList.add('hidden');
    });
  });
});

This is what the result should look like with some CSS applied to it.

You can find the CSS and the rest of the code used for the video in our sample code repository.

What’s next?

This guide only barely touches the surface of what’s possible with our APIs. Do you want to allow your customers to chat via text? Do you want to allow your customers to queue up for talking with your business? To find out how to do all of this and more, check out our JS API and REST API documentation.