Templates

FloatMessage ships with 19 professionally designed templates. Each template is fully customizable from the dashboard — colors, text, images, buttons, and layout can all be configured without writing code.

Available Templates

Story Carousel Details

The Story Carousel template creates an Instagram-style vertical story experience. It is designed for rich, multi-slide narratives and promotions.

Key Features

• 9:16 aspect ratio — Optimized for vertical, mobile-first content.
• Multiple slides — Add as many slides as you need to tell your story.
• Progress bar — A segmented progress indicator at the top shows the visitor which slide they are on.
• Auto-advance — Slides automatically advance after a configurable duration.
• Swipe gestures — Visitors can swipe left/right on touch devices to navigate between slides.
• Per-slide configuration — Each slide can have its own background image, text, button, and link.

Story Slide Structure

Each slide in a story supports the following fields:

Cookie Banner Details

The Cookie Banner is a full-width consent bar at the bottom of the page with “Accept” and “Decline” buttons.

How It Works

• Accept button has the fm-cta class — clicking it fires the cta:click event and dismisses the banner
• Decline button has the fm-close class — clicking it dismisses the banner without firing the CTA event
• Use the dismiss behavior setting to control when the banner reappears (permanent, session, duration)

Loading Scripts After Consent

Use FloatMessage.on("cta:click") to load Google Tag Manager or other scripts only after the visitor clicks Accept. See the JavaScript API docs for the full example.

Chat CTA Details

The Chat CTA template displays a compact prompt that encourages visitors to open the live chat. When the visitor clicks the “Chat Now” button, it automatically opens the chat panel.

Requirements

• Live Chat must be enabled in Chat Settings
• JavaScript API must be enabled in Chat Settings
• The CTA button uses onclick="FloatMessage.openChat()" which runs in the global scope

Use Cases

• Prompt visitors to chat on high-intent pages (pricing, checkout)
• Offer help after a delay or scroll trigger
• Combine with geo-targeting to show localized chat prompts

Contact Form Details

The Contact Form template lets visitors submit information directly from a floating message. Submissions are stored in your dashboard and can be forwarded to a webhook.

Default Fields

The template includes three fields by default: Name, Email, and Message. All fields are required.

How Submissions Work

1. Visitor fills out the form and clicks Send Message
2. The embed script collects all input values and POSTs to /api/forms/submit
3. Server validates required fields, stores the submission in the database
4. If a webhook URL is configured, the data is forwarded as a JSON POST
5. The form shows a success message and the input fields are hidden

Configuration

Webhook Payload

When a webhook URL is configured, each submission sends a POST request with this payload:

{
  "messageId": "abc123",
  "data": {
    "name": "John Doe",
    "email": "john@example.com",
    "message": "I'd like to learn more..."
  },
  "pageUrl": "https://example.com/contact",
  "country": "US",
  "submittedAt": "2026-04-08T12:00:00.000Z"
}

Viewing Submissions

All submissions are available in Dashboard → Submissions. You can view details (name, email, message, page URL, country, date) and export to CSV.

HTML Structure

The embed script looks for these CSS classes inside the form template:

• fm-form-input — all input, textarea, and select elements. Must have a name attribute
• fm-form-submit — the submit button
• fm-form-success — shown after successful submission (initially hidden)
• fm-form-fields — container for fields (hidden after submit)

Survey Details

The Survey template is an all-in-one builder for collecting structured feedback. Use it for NPS, satisfaction ratings, polls, multi-question surveys, or open-ended research — all from the same template.

Question Types

Multi-Step Surveys

Add multiple questions to one survey. Visitors see one question at a time with Back and Next buttons, plus a progress indicator. Required questions block advancement until answered.

How Responses Work

1. Visitor answers each step and clicks Submit on the last one
2. The embed script POSTs the answers to /api/surveys/submit
3. Server validates required answers against the survey config and stores them in the database
4. Question text is snapshotted with the response, so editing the survey later does not break old responses
5. If a webhook URL is configured on the message, the response is forwarded as JSON
6. The visitor sees the configured thank-you message

Viewing Responses

All survey responses live under Dashboard → Surveys. The page shows aggregation cards (NPS score, rating average, choice distribution, recent text answers) plus the raw responses table with CSV export.

Book Appointment Details

The Book Appointment template gives visitors an inline calendar grid + slot picker, so they can self-book a meeting without leaving your site. Bookings appear in Dashboard → Appointments, the visitor gets a confirmation email with an attached .ics file plus Google / Outlook / Office 365 add-to-calendar buttons, and the owner gets an email notification (if configured).

Configuring availability

Each book-appointment message has its own schedule — you can have multiple booking widgets (e.g. "30-min discovery call" and "60-min strategy session") with different hours.

• Slot length: 15, 20, 30, 45, 60, 90, or 120 minutes
• Buffer between slots: 0–30 minutes of padding after each booking
• Owner timezone: any IANA name (defaults to your browser's)
• Weekly hours: per-weekday open/close times. Days without an entry are closed.
• Earliest lead time: how soon a visitor may book — e.g. 1 hour from now
• Future window: how far ahead they may book — e.g. 30 days
• Custom fields: extra questions beyond name + email (text, email, phone, or long text)

How bookings work

1. Visitor opens the message, picks a day from the calendar grid, and chooses a slot from the list (slots are filtered against existing bookings + the buffer)
2. Visitor enters name, email, optional notes + any custom fields
3. The embed POSTs to /api/embed/appointments/submit; the server re-validates that the slot is still open
4. If two visitors race for the same slot, the oldest write wins; the loser receives a 409 and the embed refreshes availability
5. Visitor sees the success view with a Download .ics button + Google / Outlook / Office 365 calendar buttons
6. Confirmation email goes to the visitor (with the .ics attached); notification email goes to the owner (if appointmentNotifyEmail is set)
7. If a webhook URL is configured, the booking is forwarded as JSON

JS API event

After a successful booking, the embed emits an appointment_booked event you can listen to:

FloatMessage.on("appointment_booked", function (detail) {
  console.log(detail.bookingId, detail.slotStart, detail.slotEnd);
  // detail.messageId === <message id>
});

Viewing & managing bookings

Bookings live under Dashboard → Appointments. The page shows a month-grid calendar with daily booking counts; click any day to see the visitor list. From there you can copy emails, send manual messages, or cancel a booking (which frees the slot back up).