Your browser does not support JavaScript!

Setup Instructions: ACE Chatbot

Follow the instructions below to complete your ACE chatbot setup.

Last Update:
December 10, 2020
ACE
Implementation

Install the ACE Chatbot on Your Property Website

These instructions provide an overview of how to install the ACE chatbot on your property website. The ACE chatbot interface is encapsulated in a JavaScript file that calls a service on LeaseHawk’s servers. You can implement this JavaScript with Google Tag Manager or directly on your website.

Option 1: Install the ACE Chatbot with Google Tag Manager

  1. Log into your Google Tag Manager account.
  1. Select the Tags page in the left-side menu.
  1. Select New to add a new tag.
  1. Give your tag a name. For example, you can name it: ACE Chatbot.
  1. In the Tag Configuration box, click on Choose a tag type to begin setup.
  1. Select Custom HTML.
  1. Copy the code snippet below, and paste it into the HTML box in Google Tag Manager.
  1. After you have pasted the code snippet, find the placeholder for ChatbotID and insert your ACE Chatbot ID for the correct property provided by LeaseHawk. If you are having trouble finding your Chatbot ID, please email support@leasehawk.com.
  1. Optionally, you may further customize how the ACE chatbot appears on your website by editing the code snippet. See the section, "Additional Options" below for  code customizations that you can add in your code snippet.
  1. Next, check the checkbox for Support document.write
  1. Select the Triggering box, and choose your trigger. We recommend setting your script to fire on all pages of your website by select the + at the top of the page, then click Page View > All Page Views.
  1. Click Save to add the tag to your workspace.
  1. Once your tag has been added to your workspace, click Publish at the top of the page to activate the script on your website.

Option 2: Install the ACE Chatbot Directly on Your Property Website

  1. Add the code snippet below to the <head> of your website.
  1. Locate the "ChatbotID" placeholder in the code snippet, and replace it with your ACE Chatbot ID for the correct property provided by LeaseHawk. If you are having trouble finding your Chatbot ID, please email support@leasehawk.com.
  1. Optionally, you may further customize how the ACE chatbot appears on your website by editing the code snippet. See the section, "Additional Options" below for  code customizations that you can add in your code snippet.

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"
  1. data-height="700px"

Code-Snippet Example:

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"
  1. data-position-right="99px" or data-position-left="99px"

Code-Snippet Example:

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"
  1. data-open-position-right="99px" or data-open-position-left="99px"

Code-Snippet Example:

4. Open/Close Chatbot Externally


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

window.ace.toggle()
window.ace.open()
window.ace.close()

For Example: 

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