Web Chat Setup

Add a chat widget to your hotel website so visitors can talk to Jack directly.

The web chat widget lets guests start a conversation from your website. It connects directly to your Jack server — no third-party accounts or API keys needed.

Overview

Setting up web chat takes three steps:

  1. Configure the widget in the dashboard
  2. Copy the embed code to your website
  3. Add a chat button

Step 1: Configure in the Dashboard

  1. Go to Engine > Apps > Web Chat
  2. Customize the widget appearance:
    • Primary Color — Button and header color
    • Button Icon — Chat bubble, bell, dots, or headset
    • Bot Name — Display name in the chat header
    • Welcome Message — Initial greeting shown to visitors
    • Allowed Domains — Restrict which websites can use the widget (optional)
  3. Click Save and toggle Enabled

When you save, Jack generates a unique widget key and shows you the embed code to copy.

Step 2: Add the Embed Code

Copy the embed code from the dashboard and paste it before the closing </body> tag on any page where you want the chat widget. It looks like this: 

<script src="https://your-jack-server.com/widget.js" data-butler-key="wc_..."></script>

The data-butler-key is unique to your property and authenticates the widget. Don't change it — use the exact code from the dashboard.

Step 3: Add a Chat Button

Any element with the data-butler-chat attribute becomes a chat trigger. Jack provides two built-in presets:

Floating Bubble (default)

<button data-butler-chat>Chat</button>

Renders a fixed-position circle in the bottom-right corner of the page with a chat icon. Always visible as guests browse. This is the most common option.

Inline Button

<button data-butler-chat="inline">Chat with us</button>

Renders a styled pill button that flows in the page layout. Place it in a header, hero section, contact page, or anywhere you want a natural call-to-action. The button text is whatever you put inside the element.

Tip: You can use both presets on the same page. Both toggle the same chat panel.

Customizing Appearance

Widget color, icon, bot name, and branding are all managed in the dashboard under Engine > Apps > Web Chat. Changes apply immediately — no need to update the embed code.

CSS overrides for inline buttons

The inline button has sensible defaults, but you can override them in your own stylesheet: 

.butler-chat-inline {
  background: #2c1810;
  border-radius: 6px;
  font-family: Georgia, serif;
}

Your CSS takes precedence over the widget's built-in styles, so you can match the button to your hotel's brand.

Full Example

<!DOCTYPE html>
<html>
<body>
  <header>
    <nav>
      <!-- Inline chat button in your nav bar -->
      <button data-butler-chat="inline">Chat with us</button>
    </nav>
  </header>

  <main>
    <!-- Your page content -->
  </main>

  <!-- Floating bubble (always visible) -->
  <button data-butler-chat>Chat</button>

  <!-- Widget script (before closing body) -->
  <script src="https://your-jack-server.com/widget.js"
          data-butler-key="YOUR_KEY"></script>
</body>
</html>

Scroll Behavior

By default, the floating bubble hides when the user scrolls down and reappears when they scroll back up. This keeps the bubble out of the way while guests are reading content.

Disable scroll hide

If you want the bubble to stay visible at all times, add this CSS to your website: 

.butler-chat-trigger.butler-hidden {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

How It Works

  • The script loads asynchronously and creates the chat panel
  • It finds all [data-butler-chat] elements and binds click handlers
  • Clicking any trigger toggles the chat panel open/closed
  • Messages are sent over WebSocket to your Jack server in real-time
  • Conversations appear in your dashboard alongside WhatsApp, SMS, and email

Guest Identity

Web chat guests are session-based by default. If a guest provides their email or phone number during the conversation, Jack links them to any existing guest profile across other channels.

Costs

  • Web Chat widget Free — included with Jack

No per-message fees. The widget connects directly to your self-hosted Jack server.

Troubleshooting

Widget doesn't load

  • Check the script src URL points to your Jack server
  • Verify your Jack server is running and accessible from the browser
  • Check the browser console for errors

Chat button doesn't appear

  • Ensure your element has the data-butler-chat attribute
  • For the bubble preset, the button may be hidden behind other fixed elements — check z-index

Messages not sending

  • Verify the data-butler-key matches the key in your dashboard
  • Check that WebSocket connections are not blocked by a firewall or proxy
  • If using a reverse proxy, ensure it supports WebSocket upgrades