# FloatMessage

> FloatMessage is a no-code platform for creating floating messages, live chat, and AI-powered auto-replies on any website. Design popups, banners, notifications, contact forms, and story carousels — then add them with a single line of JavaScript. Install as a PWA with push notifications.

## What FloatMessage Does

FloatMessage lets you create non-intrusive floating messages (popups, banners, modals, notification cards, contact forms, cookie consent bars, story carousels) and a live chat widget, then embed them on any website. Messages are rendered inside Shadow DOM so they never conflict with your site's styles.

## Features

### Floating Messages
- **17 Templates**: Welcome banners, social proof notifications, newsletter CTAs, square cards, image messages, center modals, blur overlays, sticky footers, sticky top banners, image backgrounds, modals with images, image-only, story carousels, cookie banners, chat CTA, contact forms, and surveys
- **Contact Form Template**: Collect visitor info (name, email, custom fields), store submissions in DB, forward via webhook to Slack/Zapier/etc.
- **Survey Template**: All-in-one feedback builder supporting NPS, star ratings, single/multi choice, and short/long text. Multi-step support with progress dots. Responses aggregated in dashboard (NPS score, rating average, choice distribution).
- **Cookie Banner Template**: GDPR consent bar with CTA events to load GTM after approval
- **Chat CTA Template**: Opens live chat on click via FloatMessage.openChat()
- **One-Line Embed**: Single `<script>` tag works on any platform (WordPress, Shopify, React, plain HTML)
- **Shadow DOM Encapsulation**: Zero CSS conflicts with the host website
- **Smart Triggers**: Show on page load, after a delay, on scroll percentage, or on exit intent
- **Scheduling**: Restrict by days of week, time windows, and date ranges (uses visitor's local time)
- **Geo Targeting**: Show messages only to visitors from specific countries (via Cloudflare CF-IPCountry header)
- **URL Targeting & Blocking**: Show messages only on specific pages, or block specific pages
- **Background Overlay**: Blur, dark, or light overlay behind messages
- **Dismiss Behaviors**: Always show, session-based, permanent, or show again after a duration
- **Analytics**: Track impressions, CTA clicks, dismissals, chat opens via analytics_event table (batched with sendBeacon)
- **Custom HTML & CSS**: Full control over message design with live preview and color themes
- **Archive**: Soft delete messages to archive, restore or permanently delete from archive
- **CTA Events**: FloatMessage.on("cta:click") fires when visitors click fm-cta class elements

### Live Chat
- **Real-Time Messaging**: Chat with website visitors via polling-based real-time updates
- **Multi-Model AI**: Choose from Gemini 2.0 Flash, Gemini 2.5 Flash, GPT-4o, GPT-4o Mini, Claude Sonnet 4.5, or Claude Haiku 4.5
- **AI Knowledge Sources**: Scrape website URLs and inject content as AI context (cached daily)
- **13 AI Agent Presets**: Pre-built instruction templates for support, sales, lead gen, booking, etc.
- **Webhook Context**: Send visitor data to your server for dynamic, personalized AI instructions
- **Proactive Messaging**: See online visitors, send direct messages, broadcast to all online visitors
- **Visitors Panel**: View all visitors with online status, current page, country, city
- **Message Preview Bubble**: Proactive messages show as a preview bubble near the chat icon
- **Push Notifications**: Desktop and mobile push via Web Push API with PWA badge
- **Notification Rules**: Get alerted when visitors match conditions (page, country, visit count, new visitor)
- **URL & Country Targeting**: Allow/block URLs and countries for chat visibility
- **Admin Takeover**: AI stops when you reply manually
- **JavaScript API**: FloatMessage.on(), off(), showChat(), hideChat(), openChat(), closeChat(), toggleChat(), setCustomData()
- **Custom Positioning**: Exact pixel coordinates or preset positions (default 74px from bottom)

### Ticketing
- **Create Tickets**: From chat conversations or form submissions
- **Status Workflow**: New → In Progress → Closed
- **Internal Notes**: Add notes to any ticket
- **Media Attachments**: Upload images, PDFs, TXT, CSV, DOC (up to 5MB via R2)

### Contact Form Submissions
- **Dashboard View**: All submissions with field data, page URL, country, date
- **CSV Export**: Download all submissions as spreadsheet
- **Webhook Forwarding**: POST submission data to Slack, Zapier, or any URL

### Enterprise Features
- **Team Management**: Invite members with roles (owner, admin, editor, viewer)
- **Domain Management**: Manage multiple websites as separate workspaces
- **Domain Selector**: Switch between domains in dashboard — all data filters by selected domain
- **Organization**: Create org, manage members, domain allowlist

### Progressive Web App (PWA)
- **Installable**: Add FloatMessage to your home screen on any device
- **Push Notifications**: Browser/OS push for new chat messages with app icon badge
- **Works Offline**: Service worker with push event handling

## How It Works

1. **Sign up** — Google login or email/password, no credit card required
2. **Design** — Pick a template and customize it visually, or write custom HTML/CSS
3. **Embed** — Copy a single script tag and paste it before your closing `</body>` tag

## Embed Integration

Load all active messages and the live chat widget for a user:

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

Enterprise domain-specific:

```html
<script src="https://floatmessage.com/embed/floatmessage.js" data-user="YOUR_USER_ID" data-domain="site-a.com"></script>
```

### Embed API

- `GET /api/embed?id={messageId}` — Returns message configuration
- `GET /api/embed/user?userId={userId}&domain={domain}` — Returns all active messages for a user (filtered by domain for Enterprise)
- `POST /api/embed/events` — Batch analytics events (impressions, clicks, dismissals, chat_open, chat_message)
- `POST /api/forms/submit` — Contact form submission
- `GET /api/chat/config?userId={userId}&domain={domain}` — Returns chat widget configuration
- CORS enabled for all origins

## Pricing

- **Free Trial**: 30 days, full access, no credit card required
- **Pro**: $10/month or $100/year — unlimited messages, live chat, multi-model AI, push notifications, PWA, all templates, analytics, scheduling, triggers, geo targeting, unlimited domains, priority support
- **Enterprise**: $1,000/year — everything in Pro plus team management, multiple domains, role-based access, shared workspace, dedicated support

## Tech Stack

- Next.js 16 (App Router) on Cloudflare Workers via OpenNext
- TypeScript, Tailwind CSS v4
- SQLite via Cloudflare D1 + Drizzle ORM
- R2 for file storage (ticket attachments, images)
- Stripe for payments
- Google OAuth + email/password via NextAuth v5 (JWT sessions, 30-day maxAge)
- Web Push API (custom Workers-compatible VAPID + RFC 8291 implementation)
- Service Worker for PWA with app icon badge
- Multi-model AI: Gemini, OpenAI, Claude (all via fetch, no SDK deps)

## Guides

### Platform Setup
- [Add FloatMessage to Shopify](https://floatmessage.com/guides/add-floatmessage-to-shopify)
- [Add FloatMessage to WordPress](https://floatmessage.com/guides/add-floatmessage-to-wordpress)
- [Add FloatMessage to Wix](https://floatmessage.com/guides/add-floatmessage-to-wix)
- [Add FloatMessage to Webflow](https://floatmessage.com/guides/add-floatmessage-to-webflow)
- [Add FloatMessage to a Custom HTML Site](https://floatmessage.com/guides/add-floatmessage-to-custom-site)
- [Add FloatMessage via Google Tag Manager](https://floatmessage.com/guides/add-floatmessage-via-google-tag-manager)

### Live Chat
- [Setting Up Live Chat](https://floatmessage.com/guides/setup-live-chat)
- [Configuring AI Auto-Reply](https://floatmessage.com/guides/configure-ai-auto-reply)
- [Setting Up Push Notifications](https://floatmessage.com/guides/setup-push-notifications)
- [Chat Conditions & Page Targeting](https://floatmessage.com/guides/chat-conditions-targeting)
- [Proactive Chat — Engage Visitors Before They Message](https://floatmessage.com/guides/proactive-chat)
- [How to Contact Your Site Visitors Live](https://floatmessage.com/guides/contact-site-visitors-live)

### Engagement
- [Welcome Message for First-Time Visitors](https://floatmessage.com/guides/welcome-message-first-time-visitors)
- [Exit-Intent Messages to Reduce Bounce](https://floatmessage.com/guides/exit-intent-reduce-bounce)
- [Schedule Messages for Sales & Promotions](https://floatmessage.com/guides/schedule-messages-for-sales)
- [Geo-Targeting for Localized Messages](https://floatmessage.com/guides/geo-targeting-localized-messages)

### Best Practices
- [Choosing the Right Template](https://floatmessage.com/guides/choose-the-right-template)
- [Optimizing Message Timing & Triggers](https://floatmessage.com/guides/optimize-message-timing)
- [Writing Effective Floating Messages](https://floatmessage.com/guides/write-effective-messages)
- [Cookie Consent with FloatMessage](https://floatmessage.com/guides/cookie-consent-gtm)
- [Add a Contact Form to Your Website](https://floatmessage.com/guides/contact-form-floating-message)

## Links

- Website: https://floatmessage.com
- Dashboard: https://floatmessage.com/dashboard
- Pricing: https://floatmessage.com/pricing
- Documentation: https://floatmessage.com/docs
- Guides: https://floatmessage.com/guides
- Terms: https://floatmessage.com/terms
- Privacy: https://floatmessage.com/privacy
- Full LLM docs: https://floatmessage.com/llms-full.txt