Options
All
  • Public
  • Public/Protected
  • All
Menu

Otis SDK

Integrating with the Otis website plugin

The Otis SDK allows interaction with the Openbay Otis application.

Installation

The SDK will automatically be available once you add the Otis script to your website. Note: you must have an active Otis subscription to use the Otis application and this SDK.

Usage

The Otis SDK can be accessed on the window through the Otis global. The methods and properties on the Otis object allow you to listen for events emitted by Otis and trigger actions in the application in order to customize the user experience. The full documentation for the Otis global starts here (or click the "Otis" link in the sidebar).

Listening for events

Otis.events

Methods:

Events:

  • "init" (InitEventData) - Otis is now ready to accept actions/commands
  • "message" (MessageEventData) - a message has been added to the thread, from either the user or the bot
  • "expand" (ExpandEventData) - the conversation window has been expanded
  • "contract" (ContractEventData) - the conversation window has been closed
  • "quote" (QuoteEventData) - a mechanical services quote or a tire quote has been generated for the user
  • "appointment" (AppointmentEventData) - an appointment has been scheduled by the user
  • "contact" (ContactEventData) - contact information has been given by the user

Triggering actions

IMPORTANT!

If you want to trigger one of these actions on (or soon after) page load, be sure to wait for Otis to be ready first by listening for the "init" event. For example:

(with jQuery)

<script>
  // By wrapping this function in `$(...)`, jQuery will wait to execute it until
  // the document is loaded and ready (and you can be sure that `Otis.events.on`
  // will be available to use).
  $(function() {
    Otis.events.on("init", function() { // Once Otis is ready to accept commands...
      Otis.appointments.promptUser(); // Prompt the user to schedule an appointment.
    });
  });
</script>

(without jQuery)

<script>
  var attachInitListener = function() {
    Otis.events.on("init", function() { // Once Otis is ready to accept commands...
      Otis.appointments.promptUser(); // Prompt the user to schedule an appointment.
    });
  };

  // Once the document is loaded and ready, `Otis.events.on` will be available,
  // so we'll wait until then to attach the listener from above.
  if (document.readyState === 'complete') {
    attachInitListener();
  } else {
    document.addEventListener('readystatechange', function() {
      if (document.readyState === 'complete') attachInitListener();
    });
  }
</script>

Otis.appointments

Otis.contacts

Otis.messages

Otis.quotes

  • Otis.quotes.promptUser(...) - open the chat window and prompt the user to select services and/or tires and get a quote for their selection

Otis.ui

Examples

Note: These examples are not exhaustive, and are intended to reflect real-world usage but are not guaranteed to work perfectly for your use case. See each method's documentation for more specific and up-to-date examples.

<html>
  <head>
    <!-- ...snip... -->
    <script src="/v3/sp/example-auto-care-springfield-ma/otis" async></script>
  </head>

  <body>
    <!-- ...snip... -->

    <button id="schedule-appt">Schedule an appointment</button>

    <!-- ...snip... -->

    <label>Ask a question: <input id="ask-a-question" type="text"></label>
    <button id="ask-a-question-btn">Submit</button>

    <!-- ...snip... -->

    <script>
      // Whenever the "Schedule an appointment" button is clicked, expand the
      // Otis chat window (if not already expanded) and prompt the user to
      // schedule an appointment:
      document.getElementById('schedule-appt').addEventListener('click', function() {
        Otis.appointments.promptUser();
      });

      // Use the "Ask a question" text box above to send a message from the user
      // straight into Otis:
      document.getElementById('ask-a-question-btn').addEventListener('click', function() {
        var question = document.getElementById('ask-a-question').value;
        Otis.messages.sendAsUser(question);
      });

      // Whenever Otis generates a quote for the user, log some details about
      // the quote to the console:
      Otis.events.on('quote', function(quoteData) {
        console.log('First name of user:', quoteData.contactInfo.firstName || '(not given)');
        console.log('Names of services selected:', quoteData.services.join(', '));
        console.log('Tire styles selected:', quoteData.tires.join(', '));
        if (quoteData.instant) {
          console.log('Price quoted (in cents):', quoteData.totalCents);
        } else {
          console.log('Unable to quote instantly for the selected services/tires; user will receive quote by email');
        }
      });

      // Use your Google Analytics account to send an event logging the first
      // time the chat window is opened by the user after page load:
      Otis.events.once('expand', function() {
        ga('send', 'event', {
          eventCategory: 'MyExampleSite',
          eventAction: 'render',
          eventLabel: 'Otis plugin conversion',
        });
      });

      // ...etc.
    </script>
  </body>
<html>