Detailed Setup Instructions

Embeddable Chatbot

Overview

You can embed a HostBuddy chatbot on your website to provide real-time support for guests inquiring about your properties. The embeddable feature is accessible as a code snippet that you can add to your site.

Embed the Chatbot

Log in to your HostBuddy account.

In the main menu, navigate to the Properties section.

Locate the property you want to embed the chatbot for. Click the three dots to the right of the pen icon, and then click Get Chat Link or Embed. NOTE: You must unlock a property to use this functionality, otherwise this option will not appear in the menu.

Option 1: Window Embed:

Appearance Customization

You can customize the appearance of the chat window by setting the following parameters in the configuration script. All values are optional (meaning: if you don't specify a parameter, a default value will be used).

The bot image (bot_img) is the "sender" image that appears next to each bot message. It is also optional - if you don't include anything here, then no image will be displayed.

Available Options:

  • userMsgBubbleColor: Color of user message bubbles

  • userMsgTextColor: Color of user message text

  • botMsgBubbleColor: Color of bot message bubbles

  • botMsgTextColor: Color of bot message text

  • chatWindowBackgroundColor: Main chat window background

  • inputBoxBackgroundColor: Color of message input box

  • inputBarTextColor: Color of text in input bar

  • sendButtonColor: Color of the send button

  • sendButtonTextColor: Color of text on send button

  • chatbot_key: Your unique chatbot key

  • bot_img: URL to an image that appears next to bot messages

Example Style Configurations

1. Basic Setup (Default Appearance):

window.chatWindowOptions = {
    chatbot_key: 'bba6436a6e08', // This is the chatbot key for your selected property. It is always required.
};

2. Custom Colors:

window.chatWindowOptions = {
    chatbot_key: 'bba6436a6e08',
    userMsgBubbleColor: '#e3f2fd',
    botMsgBubbleColor: '#f5f5f5',
    chatWindowBackgroundColor: '#ffffff'
  };

3. Full Customization:

window.chatWindowOptions = {
    chatbot_key: 'bba6436a6e08',
    userMsgBubbleColor: '#dcf8c6',
    userMsgTextColor: '#000000',
    botMsgBubbleColor: '#ffffff',
    botMsgTextColor: '#000000',
    chatWindowBackgroundColor: '#e5ddd5',
    inputBoxBackgroundColor: '#ffffff',
    inputBarTextColor: '#000000',
    sendButtonColor: '#0084ff',
    sendButtonTextColor: '#ffffff',
    bot_img: 'https://example.com/bot-avatar.png'  // Optional bot image URL
  };

Option 2: Widget Embed

Appearance Customization

You can customize the appearance of both the chat widget (when minimized) and the chat window (when opened) by setting the respective parameters in the configuration script.

Available Options:

  • Required configuration:

    • chatbot_key: Your unique chatbot key

  • Widget appearance:

    • buttonImg: URL to an image to be displayed on the minimized chat widget (optional)

    • buttonBackgroundColor: Color of the minimized chat widget

    • buttonTextColor: Color of text on the minimized chat widget

    • buttonText: Text displayed on the minimized chat widget

    • headerText: Text displayed in the chat window header

  • Window dimensions:

    • width: Width of the chat window when opened

    • height: Height of the chat window when opened

  • Chat window customization:

    • userMsgBubbleColor: Color of user message bubbles

    • userMsgTextColor: Color of user message text

    • botMsgBubbleColor: Color of bot message bubbles

    • botMsgTextColor: Color of bot message text

    • chatWindowBackgroundColor: Main chat window background

    • inputBoxBackgroundColor: Color of message input box

    • inputBarTextColor: Color of text in input bar

    • sendButtonColor: Color of the send button

    • sendButtonTextColor: Color of text on send button

    • chatWindowHeaderBackground: Background color of the chat window header bar

    • chatWindowHeaderTextColor: Color of the text in the chat window header bar

    • bot_img: URL of an image to be displayed next to each bot message (optional)

You can share a URL to a HostBuddy chat window for a property with guests or others, which is hosted on the HostBuddy AI site. This is useful for guests who might not have access to usual communication channels. Guests or others can visit this URL to access the chat window and ask HostBuddy questions about the property.

Chatbot Key

All of the above functionality depends on a unique chatbot_key for each property. Your property's chatbot_key is dynamically populated into the embeddable code snippet when you go to view it using the steps above.

On the properties page: if you click the three dots on the right for a property then select Regenerate Chat Link, this will generate a new chatbot_key for the selected property, which replaces the old one. IMPORTANT: Be careful, since this action will invalidate any previously copied embed code and any previously used chat link for this property (only), since they point to the old chatbot_key. This is useful for redacting chat links that you provided to previous guests.