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. The same script also loads any active floating messages in your account, so a single tag is all you need:

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

Replace YOUR_USER_ID with your account ID from the FloatMessage dashboard.

Features

Tickets from Conversations

Any chat conversation can be promoted into a tracked support ticket. Tickets carry status (new → in_progress → closed), internal notes, and file attachments - perfect for handing off to a teammate or following up later.

How to create a ticket

1. Open Dashboard → Chat and select the conversation.
2. Click the 3-dot menu in the conversation header.
3. Choose Create Ticket. The ticket is pre-titled with the visitor's name (or email) and links back to the original conversation.
4. Open the ticket in Dashboard → Tickets to add notes, attach files (screenshots, PDFs, logs), and track status.

Tickets keep their link to the source conversation so you can always click back to see the full message history. See Tickets for the full workflow, status transitions, and attachment limits.

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.

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.

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 loads a page with the FloatMessage embed script
2. The visitor is automatically registered and appears in the Visitors panel
3. Visitor clicks the chat bubble and sees the welcome message
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

Visitors Panel

The Visitors tab in the Live Chat dashboard shows all visitors currently on your site. Each visitor displays:

• Online status — green dot if active in the last 60 seconds
• Current page — the URL they are browsing
• Country and city — geo-location from their IP
• Name and email — if collected via pre-chat form

Visitors are automatically registered when the page loads — they don’t need to open the chat first. Click any visitor to open their conversation and send a message.

Proactive Messaging

You can send messages to visitors before they start a conversation. This is useful for greeting visitors on key pages, offering help, or following up with returning users.

To send a proactive message:

1. Go to Dashboard → Live Chat
2. Click the Visitors tab
3. Click on a visitor to open their conversation
4. Type your message and send

The visitor will see a message preview bubble near the chat icon with your message text. The preview auto-dismisses after 15 seconds, or the visitor can click it to open the full chat panel.

Broadcast

Send a message to all online visitors at once. This is useful for announcements, flash sales, or support availability updates.

1. In the Live Chat dashboard, click the send icon (paper plane) in the top-right of the sidebar
2. Type your message in the broadcast panel
3. Click Broadcast to send to all online visitors

Each visitor will see the message as a new chat message with a preview bubble. The panel shows how many online visitors will receive the broadcast.

Chat CTA Template

The Chat CTA floating message template is designed to prompt visitors to open the chat. When the visitor clicks the CTA button, it automatically opens the chat panel using FloatMessage.openChat().

To use it: create a new message with the Chat CTA template, and enable the JavaScript API in Chat Settings. No extra code needed — the template handles the connection between the floating message and the chat widget.