Your browser does not support JavaScript!

Setup Instructions: ACE Chatbot

Follow the instructions below to complete your ACE chatbot setup.

Last Update:
August 10, 2022
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 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>

5. Exclude Chatbot on Specific Pages

Use the instructions below when you want to exclude the chatbot on a few pages when applied globally. If you only want to include the chatbot on a few pages, then it is best to insert the original chatbot script on the individual pages instead of applying it globally.

  1. Take the example script below and add your chatbot ID.
  1. Add the page paths you want to exclude the chatbot on in this section of the script

         if (window.location.pathname == "/somePath" || "/someOtherPath/1") { ...

  • You can define multiple pages by separating them with ||
  • If you need to exclude all pages within a path or with a similar name you can use .includes("/path")
    if ( window.location.pathname == "/" || window.location.pathname.includes("/demo")) {
  • Make sure your page paths are wrapped in "quotes"
  • Do not include the base domain when defining your excluded pages. https://domain/pagepath/1
  1. Replace the original chatbot script with the new script on your website. Apply this globally.

Code-Snippet Example: