The Otis SDK allows interaction with the Openbay Otis application.
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.
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).
Otis.events
Methods:
Otis.events.on(...)
- listen for an event and execute a function whenever the given event is emittedOtis.events.once(...)
- like on
, but only execute the given function the next time the given event is emitted (only once)Otis.events.off(...)
- remove an event listenerEvents:
"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 userIf 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.appointments.promptUser(...)
- open the chat window and prompt the user to schedule an appointmentOtis.contacts
Otis.contacts.promptUser(...)
- open the chat window and prompt the user to fill out a contact formOtis.messages
Otis.messages.sendAsUser(...)
- send a message to the bot as if the user typed itOtis.messages.sendAsBot(...)
- send a message to the user as if the bot typed itOtis.quotes
Otis.quotes.promptUser(...)
- open the chat window and prompt the user to select services and/or tires and get a quote for their selectionOtis.quotes.promptUserWithCategory(...)
- open the chat window and prompt the user to select services within a given service category.Otis.ui
Otis.ui.openChatWindow(...)
- open the chat window if it is not already open, and optionally execute a function once it has expandedOtis.ui.closeChatWindow(...)
- close the chat window if it is not already closed, and optionally execute a function once it has contractedNote: 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>