Your browser does not support JavaScript!

How-To Guide: Customize the ACE Chatbot Button

Follow the instructions below to customize the ACE™ Virtual Leasing Assistant chatbot button on your property website.

Last Update:
May 4, 2021
ACE
How-To Guide

Custom Floating Action Button

Prospects interact with ACE on your website by clicking the Floating Action Button (FAB), as shown below.

This button can be positioned in various locations on your website’s landing page, but for optimal identification of this call-to-action feature, LeaseHawk recommends customizing the icon by following the steps outlined below.

How to Customize the Floating Action Button

Step 1: Login

Log into the LeaseHawk Admin Center. If you do not have permissions to access the LeaseHawk Admin Center, please contact your LeaseHawk Client Success Manager or email support@leasehawk.com to request access.

Click on the Chatbot Style dashboard from the left menu. Then, scroll down to Floating Action Button Icon Type.

Step 2: Choose Default or Custom Icon Type

Select Default or Custom icon type.

  • Default: Keeps the standard icon as set by LeaseHawk or allows an image to be uploaded to the preset space within the chat bubble. The size and shape of the image cannot be changed, but the bubble color can be customized.
  • Custom: Allows an image to be uploaded and sized.

Step 3: Upload Image

If you selected Default:

  • Click the orange Browse button to upload an image from your computer files. Or, you may keep the standard icon set by LeaseHawk and skip this step.
  • Next, select the Floating Action Button Color. Use the window to the left to preview your icon and color selection until you are satisfied with the result.

If you selected Custom, you have three options:

  1. Use the default custom logo (ACE logo) that appears when you select Custom.

  1. Use an image from your computer files.
  • Click the orange Browse button to upload an image. Images with a transparent background are recommended for the custom option.

  1. Use an image from the LeaseHawk Chat Icon Library.
  • In the Library, right-click on the image you'd like to use and select Download to save the image your computer.
  • In the Admin Center, click the orange Browse button to upload the image.

Next, enter your preferred FAB Height and FAB Width. Use the window to the left to preview your icon and size selection until you are satisfied with the result.

All common image file types are supported for Default and Custom icons, including animated GIF and JPG, PNG, and SVG files. The image file cannot exceed 2MB in size.

Step 4: Save and Publish

Click the orange Save button in the upper right-hand of the page. A pop-up box will appear, select Publish, or if you need to edit, select Cancel.

Step 5: Check Your Work

Visit your property website and confirm that the FAB image is sized correctly.

Additional Customizations

In addition to uploading GIFs or other moving images to use as your chatbot icon, animation can be added to static icons.

Add Animation to Your Chatbot Icon

Watch a Demo

Instructions

Step 1: Select the Animation Type

Select the animation type you would like, Bounce or Shake, and copy the code snippet as seen below.

Bounce Animation:

Shake Animation:

Step 2: Paste Code Snippet

Paste the code snippet under the chatbot script on your property websites. After your website is published, your chatbot will animate on page load after an approximate two second delay.

Example: