Your browser does not support JavaScript!

Set Up Instructions: ACE AI Chatbot

Follow the instructions below to complete your ACE AI chatbot setup.

Last Update:
May 13, 2020
ACE AI
Implementation

Summary

This document provides an overview of how to implement the ACE AI chatbot on a website. The ACE AI chatbot interface is encapsulated in a JavaScript file that calls a service on LeaseHawk’s servers. Implementing this JavaScript in a web page is relatively straight forward. The process is:

  1. Get your chatbot ID from your success manager.
  2. Add your chatbot ID to the code snippet.
  3. Add the code snippet to the head of your websites.

Code Snippet

Add the code snippet below to the head of your websites:

<script type="text/javascript"

       id="ace-chat-script"

       data-site-id="ChatbotID"

       src="https://ace-chat.leasehawk.com/dist/js/ace.js">      

</script>

 

Example Code:

<!DOCTYPE html>

<html>

<head>

         <script type="text/javascript"

                   id="ace-chat-script"

                   data-site-id="7192"

                  src="https://ace-chat.leasehawk.com/dist/js/ace.js">    

           </script>

</head>

<body>

</body

</html>

Additional Options

1. Change Height and/or Width of the Chatbot Window

Add the following attributes to the chatbot snippet and update the number of pixels to position the floating action button.

  1. data-width="400px"
  2. data-height="700px"

Example

         <script type="text/javascript"

                   id="ace-chat-script"

                   data-width="375px"

                   data-height="650px"

                   data-site-id="7192"

                  src="https://ace-chat.leasehawk.com/dist/js/ace.js">    

           </script>

2. Position Chatbot Floating Action Button

Add the following attributes to the chatbot snippet and update the number of pixels to position the floating action button.

  1. data-position-bottom="99px" or data-position-top="99px"
  2. data-position-right="99px" or data-position-left="99px"

Example

         <script type="text/javascript"

                   id="ace-chat-script"

                   data-site-id="7192"

                  data-position-bottom="35px"

                  data-position-right="30px"

                  src="https://ace-chat.leasehawk.com/dist/js/ace.js">    

           </script>

3. Position Chatbot Open Window

Add the following attributes to the chatbot snippet and update the number of pixels to position the floating action button.

  1. data-open-position-bottom="99px" or data-open-position-top="99px"
  2. data-open-position-right="99px" or data-open-position-left="99px"

Example

         <script type="text/javascript"

                   id="ace-chat-script"

                   data-site-id="7192"

                  data-open-position-bottom="35px"

                  data-open-position-right="30px"

                  src="https://ace-chat.leasehawk.com/dist/js/ace.js">    

           </script>


4. Open/Close Chatbot Externally

Use the following JavaScript function to toggle the chatbot open and closed

window.ace.toggle()

Example: 

<button onclick="window.ace.toggle()">Toggle Chatbot</button>