Skip to main content
Sign in

EliseAI Website Widget Setup

  • Updated

Set up your EliseAI website widget to help prospects connect with your communities. 

Navigate to each section of this article with the links below: 

Overview

Your EliseAI website widget is a customizable chat tool that helps prospects connect with your communities. You can embed the website widget directly on your property websites. 

07 Expanded View.png

Prospects can use the website widget to: 

  • Chat with your AI Assistant.
  • Start SMS/email conversations with your AI Assistant.
  • View leasing office hours and contact info.
  • Book tours through a self scheduler.
  • Apply to a community.
  • Calculate Move-In Costs.

Once you add your widget, it appears on both the desktop and mobile versions of your website. Note that the two versions of the widget differ in appearance and flow. 

If you encounter issues with your website widget, see EliseAI Website Widget - Troubleshooting for guidance. You may also contact support for assistance. 

Follow the steps in each section below to set up your website widget. 

  1. Widget Setup
  2. Funnel Prospects to EliseAI
  3. Customize Your Widget

 

1. Widget Setup

Follow the steps below to install the widget on a community's website. 

NOTE: If RentCafe hosts your website, follow steps 1–4 below, then see the RentCafe Website section for additional steps.

 

Add HTML Code

  1. Click Settings in your AI Portal's left sidebar, then click Website Widget in the Settings dropdown menu. 01 Widget Page.png
  2. Select a community in the page's left sidebar to set up the community's widget. 

  3. Scroll down and to the right to view the widget code snippet within a gray box. 02 Code.png

    NOTE: Each community has a different code snippet, even if it uses your organization's default widget settings. Adding a community's widget code to the wrong website will cause the widget to fail. 
  4. Click Copy at the bottom right of the code snippet box.
  5. Paste the code into your property website's HTML code before the </body> closing tag.

 

Configure URL

Once you add the widget code to your website, configure its URL on the AI Portal:  

  1. Click Settings in your AI Portal's left sidebar.
  2. Click Building in the settings dropdown menu.
  3. Locate the website's URL in the page's Website column. 03 Website Settings.png
  4. Add or adjust your URL, if needed. This can work in one of two ways, depending on your site setup.
  5. If your website serves only one community:
    • Add the website's main URL. For instance, www.communitysite.com.
    • The widget will display on the site's main page as well as any child page, such as www.communitysite.com/gallery.
  6. If your website serves multiple communities:
    • Add the URL of the specific child page where the community's content begins.
    • For instance, if your main site is www.communitysite.com and it serves multiple communities, add the url for the community's child page: for instance, www.communitysite.com/building1.
    • This ensures that your widget displays on the correct page.
    • Subsequent pages, such as www.communitysite.com/building1/apply, will also display the widget. 

Once configured, your EliseAI website widget appears on the bottom right of your website.

 

RentCafe Website Widget Setup

Follow these steps to install the EliseAI widget on a RentCafe-hosted website:

  1. Complete Steps 1–4 in the Add HTML Code section if you have not already done so.
  2. In RentCafe Site Manager, navigate to Marketing > Analytics Tracking in the left sidebar.
  3. Click Add New Item on the right side of the page.
  4. 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 EliseAI 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"
  5. Click Save.

Once configured, your EliseAI website widget appears on the bottom right of your website.

 

2. Funnel Prospects to EliseAI

Double-Booked tour slots may occur if your community's website lists a second means of booking a tour or getting in touch in addition to the EliseAI website widget. For instance, your website may include a Schedule a Tour link that directs prospects to a separate tour calendar. 

If your community's website fits this description, please follow these steps to avoid the issue:

  1. Change your website's Schedule a Tour button to open the EliseAI scheduler. Edit the relevant button's code to match the snippet below:

    <button onclick="window.eliseAi.onOpenSST()">Schedule A Tour</button>

  2. Change your website's Contact Us button to open the EliseAI contact form. Edit the relevant button's code to match the snippet below:

    <button onclick="window.eliseAi.onOpenEmailUsWindow()">Contact Us</button>

These updates funnel all tour bookings and inquiries to EliseAI, which can help you avoid double-booked tour slots. 

Note that these instructions use Calls to Action. See this article's Calls to Action section for more information.

 

3. Customize Your Widget

You can customize widget settings for all communities you can access on EliseAI. 

To access your widget page, click Settings in your AI Portal's left sidebar, then click Website Widget in the Settings dropdown menu. 

Click Default Settings in the page's left sidebar to adjust default widget settings for your whole organization.

Default Settings.png

Select a community in the page's left sidebar to adjust widget settings for that community only. You must toggle community's Use Default Settings switch to Off before making updates. 

Default Settings Again.png

 

Customize Widget Design

Follow these steps to customize widget design. The widget updates automatically on your community's website after you customize design, and you do not need to add or change the widget code. 

  1. Select a widget style in the For Desktop/Tablet views section:
    • Mini: This style creates a widget with clickable rectangular buttons for each selected tab, maintaining transparency between buttons to blend with your website's background. 05 Mini.png
    • Users can click the down-facing arrow in the top right corner to minimize the widget into small circular buttons.                06 Buttons.png
    • Expanded: This style features the same clickable rectangular buttons, but with a larger solid background in your chosen branding colors.                                                                                                  07 Expanded View.png
    • Users can click the X in the bottom right corner to minimize the widget into small circular buttons.
  2. Select four widget colors in the Brand Color section. All color selections must be ADA-compliant. If they do not meet compliance, a built-in checker displays a red warning message. You cannot save your settings until you meet compliance.08 Brand Color.png
    • Brand color: The main color of the Expanded widget, and the color of the Chat with us tab on both the Expanded and Mini widgets.
    • Secondary color: The color of the remaining widget tabs and minimized circular buttons.
    • Text Color Over Brand Color: The color of any text that appears over your brand color.
    • Text Color Over Secondary Color: The color of any text that appears over your secondary color.
  3. Toggle widget features ON or OFF in the Features section. You can control Desktop and Mobile widget features with separate toggles.  09 Features.png
    • Chat with us - AI Chat: Prospects can ask your AI Assistant questions about the community. Your AI Assistant can also help prospects book a tour.
      • NOTE: You widget does not display unless you enable this feature.
    • Email an agent: Prospects can start an email conversation with your AI Assistant by filling out contact information.
    • Call us: A form that displays your community's leasing phone number and office hours.
    • Text us: Prospects can enter their phone number to text with your AI Assistant.
    • Book a Tour: This launches a self-scheduler tab where prospects can book tours. Your AI Assistant will follow up and confirm the tour details with the prospect. See Calendar and Tours Settings for information on setting up tours.
    • Apply Now: Sends the prospect a link to the community's application form.
    • Calculate Price: A dynamic pricing calculator prospects can use to calculate fees and move-in costs. See the Fee Transparency Suite article for more information.
  4. Use the Advanced Features section to configure advanced features. 10 Advanced Features.png
    • Auto Open Chat: Check this box to automatically launch the Chat with us tab when your property website page loads.
      • This only affects the initial page load. If a user navigates to another page on your site, the chat does not auto-open again.
    • Require Chat Consent: Check this box to require prospects to agree to your privacy policy before chatting.
      • Enter a URL for your privacy policy in the Privacy Policy URL box. Or, leave this field blank to display EliseAI's default privacy policy.
    • Hide Mobile Features: Check this box to collapse the chat, email, phone, text, and book a tour buttons into a single button on mobile view. This can help save screen space.
  5. Click Save Settings at the bottom right of the page to save your widget settings.

 

Customize Widget Placement

Follow these steps to customize widget placement on your website. Note that this process requires manually adjusting your website's widget code. 

Copy and paste the following code directly after the building string in your website's widget code. 

,
mobileStyles: {bottom: '0'},
position: {
    bottom: 0,
    right: 0,
   }
  });
</script>

Edit and format the resulting widget code to match the example below: 

<script type="module">
  import MEChat from 'https://cdn.skypack.dev/@meetelise/chat';
  MEChat.start({
    organization: "test-company",
    building: "58afc7f0-91f5-11ed-b585-03a77e397d47",
    mobileStyles: { bottom: '0' },
    position: {
      bottom: 0,
      right: 0,
    }
  });
</script>

Customize widget placement by adjusting the values within the code: 

  • “mobileStyles: {bottom: 0}” - In this section of the code, the '0' value means the widget menu appears at the very bottom of your website's mobile version. Increase this value to move the widget higher on the website.
  • “position: {bottom: 0, left: 0,}” - In this section of the code, the 0 values mean the widget appears at the very bottom-right of your website's Desktop or Tablet version. Increase these values to move the widget higher or to the left. 

 

Calls to Action

You can use Calls to Action to make any linked text or button on your website open an EliseAI widget tab.

There are four call to action options available: 

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

You can set up calls to action in the following ways: 

  1. If you want a piece of text to launch a widget tab when clicked, use an <a> tag link. In the example below, you can swap out onOpenChat for any of the calls to action listed above.
    • Example: <a href="javacript:void(0)" onclick="window.eliseAi.onOpenChat()" >Chat with us</a>
    • In this example, a user can click "Chat with us" on your website to open the Chat with us widget tab.
  2. If you want a button to launch a widget tab when clicked, use a button onclick link. In the example below, you can swap out onOpenSST for any of the calls to action listed above.
    • Example: <button onclick="window.eliseAi.onOpenSST()">Book a tour</button>
    • In this example, a user can click the "Book a tour" button on your website to open the Book a tour widget tab. 

You can change a linked text or button label as needed. These do not need to match the widget tab names. 

 

Related to

Related articles