Skip to main content
Sign in

EliseChat Website Widget - Setup and Customization

  • Updated

What is the EliseChat website widget?

Setting up EliseChat

Customizing the EliseChat website widget

Widget custom positioning on the desktop and mobile sites

Call to Action functions (launch specific Elise widget tabs from links/buttons on your property site)

What is the EliseChat website widget?

The EliseChat website widget is a customizable chat tool that can be embedded into community websites to facilitate interactions between prospects and leasing offices. It allows users to view leasing office hours and contact information, start SMS or email conversations, and book tours through a self-scheduler.

If you have already set up your EliseChat website widget, but are encountering issues, see our article "EliseChat Website Widget - Troubleshooting" for guidance.

 

Setting up EliseChat

You can install the EliseChat website widget on your community website by adding the relevant EliseChat code snippet to the site's HTML code, and following the steps below (if RentCafe hosts your website, please scroll further down for a separate install guide):

  1. Log in to the Elise AI Portal at http://app.meetelise.com
  2. Navigate to Settings > Website Widget, and select the community you need the code for from the list on the left.
  3. Once selected, you will see customization options for the widget. Guidance on how to get the best from customizing your widget can be found later in this article.
  4. Below the customization details, you will see the widget code snippet within the grey box.
    NOTE: Each community has a unique code snippet, even if you've chosen to use the default settings. Installing a code for a different community will cause the widget functionality to fail
  5. Click “Copy” at the bottom right of the code snippet box, and paste the code into your community site's HTML code before the </body> closing tag.
  6. Finally, make sure that the URL of the main page of your community site is correct in Elise > Settings > Building > your community > Website.
    NOTE: There are 2 ways this can work. Please follow the example below that suits your community site setup:
    • If your community website only serves 1 community:
      Add the URL as the main URL for the site, such as http://www.mycommunitywebsite.com. The widget will then be able to generate on the main page, and also generate on any child page of the site such as http://www.mycommunitywebsite.com/gallery
    • If your community site serves multiple properties:
      Adding the main website URL will disrupt widget functionality. Instead, use the specific child page where the property's content begins. For example, if your main site is http://www.mycommunitywebsite.com and covers multiple properties, the widget for Building 1 should be linked to a URL such as http://www.mycommunitywebsite.com/building1.This ensures the widget correctly associates the content with the intended property. Subsequent pages, such as http://www.mycommunitywebsite.com/building1/gallery, will also generate the widget as expected.

 

 

 

RentCafe Websites

To install the EliseChat widget on a website hosted by RentCafe:

  1. In Site Manager, navigate to Marketing > Analytics Tracking in the left sidebar
  2. Click Add New Item on the right side of the page
  3. Fill out the Add External Tracking form
    •  What would you like to track?
      • Other Remarketing Campaign
    • Where should your tracking code be on the page?
      • Between the <body> tags, closer to the closing <body> tag
    • What pages would you like to track?
      • All pages
    • Paste your code here
      • Paste in the EliseChat Widget code in this box
    • Please enter a description of the item you want to track
      • EliseAI - [the date]
        • For example: "EliseAI - 3/30/25"
  4. Click Save

Once configured, your EliseChat website widget should appear on the bottom right portion of your website.

 

Customizing the EliseChat website widget

In Elise > Settings > Website Widget > Default Settings, you can configure widget settings for all properties in your organization (based on your role permissions), ensuring consistency. Alternatively, to customize widgets individually (e.g., for branding), select the relevant property from the list on the left of the Website Widget page.

Changes made within EliseChat Website Widget do not require updating the widget code on your site. However, if adjusting the widget’s position, you must update the installed code. (Refer to the section further below for instructions on repositioning the widget.)

To customize your widget design and features:

  1. Log in to your dashboard at http://app.meetelise.com
  2. Navigate to Settings > Website Widget
  3. Default Settings or Individual Property Settings -
     
    • To update organization-level settings: Click on “Default Settings” on the left of the tab. Any changes made here will apply to any buildings within your organization that have “Use Default Settings” toggles ON, because they do NOT have any specific building webchat configurations. Specific buildings must be updated individually unless they use the default settings
    • To update building-level settings: Choose the relevant property from the list on the left of the tab. If this property is already using default settings, you will need to toggle OFF “Use Default Settings”. This will clear all current settings, and you can then choose your customizations.

  4. Select a Style (for Desktop/Tablet views) -

    • Mini: This style creates a widget with clickable rectangular buttons for each selected section, maintaining transparency between buttons to blend with your property's website background. Users can minimize the widget into small circular buttons with icons representing each tab's function by clicking the downward-facing arrow in the top right corner.
    • Expanded: This style features the same clickable rectangular buttons but with a larger solid background in your chosen branding colors. Users can minimize the widget into small circular buttons with icons representing each tab's function by clicking the 'X' in the bottom right corner.

  5. Colors -

    Here, you can customize four widget colors to align with your branding. All selections must be ADA-compliant. If they do not meet compliance, a built-in checker will display a red warning message, and you won’t be able to save changes until compliance is met.

    Choose colors by clicking the color circle to use the palette, or by entering a specific branding color code after the # symbol:
    • Brand color: This color will be the main large color on the Expanded widget, as well on the “Chat with Us” tab on the widget.
    • Secondary color: This color applies to additional tab buttons on your widget and the circular buttons when minimized. It allows properties with multiple branding colors to incorporate both. You may also set it to match the Brand Color.
    • Text Color Over Brand Color: This color will be for the text that will be written over your chosen brand color.
    • Text Color Over Secondary Color: This color will be for the text that will be written over your chosen secondary color.

  6. Features -

    Here you can toggle ON or OFF which tabs of the widget you wish your website visitors to have access to. This can be controlled for both the Desktop/Tablet and Mobile views with separate toggles.
    NOTE: If you do not toggle ON “Chat with us” for the widget, your widget will not display. The other features will not affect the widget in the same way.
    • Chat with us - AI Chat: Prospects can ask our AI questions using knowledge related to this specific community, and/or book a tour.
    • Email an agent: A “Contact us” form where your prospect can provide relevant information enabling your AI assistant to respond to them via email.
    • Call us: Displays your community phone number and office hours.
    • Text us: Shows an option for the prospect to enter their phone number to text with your AI Assistant.
    • Book a Tour: This launches a self-scheduler tab, where prospects can book their tour depending on the tour type preferences you have chosen in Elise > Calendars and Tours. Your AI Assistant will follow-up and confirm the tour details with the prospect.

  7. Advanced features -  

    • Auto Open Chat: The “Chat with us” tab of the widget will automatically launch when your property website page loads. This only affects the initial page load, so if the user navigates to another page on your site, the chat will not auto-open again.
    • Require Chat Consent: If checked, this will prompt the prospect to read and agree to your privacy policy before chatting. Selecting this feature will open up the Privacy Policy URL box below these settings. Here you will enter the URL for your privacy policy. If you leave this input blank, we will display EliseAI's default privacy policy.
    • Hide Mobile Features: This option collapses the chat, email, phone, text, and Book a tour buttons into a single button on mobile views only. This can help save screen space on loading.
  8. Save Settings - Once you are satisfied with your customizations, remember to scroll to the bottom of the page (below the widget code snippet) and click Save Settings. 

To customize your widget placement position on the desktop/tablet, and mobile, versions of your property site:

  1. The main bulk of the widget code will be the same as your standard widget code, however you will also need to manually add the additional position coding to the widget code after the Building ID, looking something like this:
  2. After the building ID in your standard widget code (which you can find at Elise > Settings > Website Widget), you must add the following to the code to make position changes (including the comma at the top):
    ,
    mobileStyles: {bottom: '0'},
    position: {
    bottom: 0,
    left: 0,
    },
    });
    </script>
  3. Once you have added this to your widget code, you can then adjust the numbers to suit where on your website you want the widget to appear. There are 2 sets of numbers for 2 different website formats:
    • “mobileStyles: {bottom: 0}” - In this section of the code, the 0 means the widget menu will appear at the very bottom of the website on a mobile device. If you want the widget menu to display higher, you can increase the number until the widget is in the position you desire.
    • “position: {bottom: 0, left: 0,}” - In this section of the code, the 0s mean the widget will appear at the very bottom-right of the website on a Desktop/Tablet. If you want the widget to display higher and/or further to the left, you can increase the numbers until the widget is in the position you desire.

Separate Call to Actions

In addition to the above customizations, you can also open any of the widget tabs via the functions given in the window.eliseAi namespace. This enables you to make any linked text or active button on your website force the widget tab of your choice to pop up when clicked.

The separate call to action options are:

  1. onOpenChat - This will open the “Chat with us” widget tab
  2. onOpenEmailUsWindow - This will open the “Email an agent” widget tab
  3. onOpenCallUsWindow - This will open the “Call or Text Us” widget tab
  4. onOpenSST - This will open the “Book a tour” widget tab

There are two ways you can set up these call to action options:

  1. If you want a piece of text to be clickable to launch a widget tab, you would use an <a> tag link. In the example below, you can exchange “onOpenChat” for any of the above listed call to action options to launch the widget tab you require.
    • Example:
      <a href="javacript:void(0)" onclick="window.eliseAi.onOpenChat()"
      >Chat with us</a>
    • The user would click “Chat with us” and the “Chat with us” widget tab would pop up.
  2. Alternatively, if you want to use a button on your website to launch a widget tab, you would use a “button onclick” link. Again, you can exchange “onOpenSST” in the example below for any of the above listed call to action options to launch the widget tab you require.
    • Example:
      <button onclick="window.eliseAi.onOpenSST()">Book a tour</button>
    • The user would click the ‘Book a tour” button on your property site, and the “Book a tour” widget tab would pop up.
  1. The linked text or button label does not need to match the widget tab name and can be customized as needed.

If you have completed all expected steps in this article, are experiencing issues with the widget, and have had no success following the steps in our EliseChat website widget troubleshooting article, please submit a support request at https://support.meetelise.com/hc/en-us/requests/new, or by emailing support@meetelise.com.

Related to

Related articles