FloatMessage

Chat Widget

Add a live chat widget to your website so visitors can communicate with you in real time. The chat widget renders inside Shadow DOM and works on any platform.

Getting Started

  1. Go to Dashboard → Live Chat → Settings
  2. Toggle Enable Live Chat on
  3. Customize your welcome message, colors, and position
  4. Save settings
  5. Add the embed script to your website with your user ID

Embed Code

Add the data-user attribute to enable chat alongside your floating messages:

<script
  src="https://floatmessage.com/embed/floatmessage.js"
  data-id="YOUR_MESSAGE_ID"
  data-user="YOUR_USER_ID"
></script>

The data-id attribute is required by the embed script. To use chat without floating messages, you can set data-id to any valid message ID.

Features

Real-Time Messaging

Messages appear instantly via polling. No page refresh needed.

Visitor Tracking

Each visitor gets a persistent token. See their country, city, and page URL.

Notification Badge

A pulsing red badge with unread count appears on the chat bubble when new messages arrive and the panel is closed.

Typing Indicator

Animated bouncing dots show while waiting for a reply, giving visitors a real-time feel.

Admin Takeover

When you reply manually from the dashboard, AI auto-reply automatically stops for that conversation.

Open by Default

Chat panel opens automatically on page load. Great for support pages where you want to engage visitors immediately.

JavaScript API

Programmatically show, hide, open, or close the chat widget from your own JavaScript code.

Appearance

Customize in Dashboard → Chat Settings → Appearance:

  • Primary Color — Sets the chat bubble, header, and send button color
  • Position — Bottom Right or Bottom Left
  • Custom Position — Override the preset with exact pixel coordinates (X from left, Y from bottom)
  • Welcome Message — Shown when visitor opens the chat
  • Offline Message — Shown when you are away

Custom Position

If the preset positions don't fit your layout, set exact pixel coordinates. Enter X (distance from left edge) and Y (distance from bottom edge) in pixels. The chat panel automatically aligns based on which half of the screen the bubble is on.

Example: X = 100, Y = 50 places the chat bubble 100px from the left and 50px from the bottom of the viewport.

Open by Default

Enable Open by Default in Dashboard → Chat Settings → Visibility & Conditions to have the chat panel open automatically when the page loads, instead of just showing the bubble. This is useful for support pages or landing pages where you want to start the conversation immediately.

Tip: Combine with Show Delay to open the chat panel after a few seconds, giving visitors time to see the page before the chat appears.

Notification Badge

When new messages arrive from the owner or AI while the chat panel is closed, a red pulsing badge appears on the chat bubble showing the number of unread messages. The badge automatically clears when the visitor opens the chat panel.

Typing Indicator

After a visitor sends a message, an animated typing indicator (three bouncing dots) appears in the message area while waiting for a reply. This works for both AI auto-replies and manual admin responses. The indicator disappears as soon as the reply arrives.

The server also provides a typing hint via the presence endpoint, so the indicator stays accurate even across polling intervals.

How Conversations Work

  1. Visitor clicks the chat bubble on your site
  2. Visitor sees the welcome message
  3. A visitor token is created and stored in localStorage
  4. Visitor sends their first message, creating a conversation
  5. You see the conversation in Dashboard → Live Chat
  6. Reply from the dashboard — visitor sees your response in real time
  7. Optionally, AI Auto-Reply can respond automatically