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: Allows an image to be uploaded within the preset chat bubble space. 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: Select or Upload Image

If you selected Default:

• Click the orange Upload button to browse and 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 two options:

1. Use a default icon provided by LeaseHawk.

• Click the dropdown menu and click on any icon under the Static Icons or Animated Icons sections.

• Icons under the Static Icons section do not have any animation, whereas the icons under the Animated Icons section each have their own unique animation and movement

2. Use an image from your computer files.

• Click the orange Upload button to browse and upload an image. Images with a transparent background are recommended for the custom option.

• To see each of your uploaded images, click on the dropdown menu and view them under the Uploaded Icons section. From this menu, you may click on any of your previously uploaded images to quickly preview and change your chatbot button.

‍

If you have selected a Custom icon, you may adjust the FAB Icon Border Radius. Click on the sliding scale and drag it to adjust the border radius. To create an icon that is circular, drag the scale all the way to the right to set the radius to 50%.

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. We recommend using a height and width of 100 x 100 pixels (1:1 ratio) if you choose a default icon provided by LeaseHawk.

And last, choose an Animation. There are three animations to choose from: Bounce, Rotate, and Shake X-Axis. Click the orange Preview button to watch the animation you selected. If you do not want an animation, click the Animation dropdown menu, and select None.

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 your ACE chatbot icon is sized correctly.