How to Add FloatMessage to a Custom HTML Site
If you're building your own website with HTML, a static site generator, or any framework — adding FloatMessage takes one line of code. This guide covers the simplest possible setup.
Sign up and create your first message
Go to floatmessage.com/login and sign in with Google. You'll get a 30-day free trial with full access — no credit card required.
In the dashboard, click Messages in the sidebar, then New Message. Pick a template, customize it, and save.
Copy your embed code
Go back to your Dashboard home page and copy the embed snippet shown there.
Paste the script before the closing body tag
Open your HTML file and paste the snippet just before the closing </body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome to my site</h1>
<!-- FloatMessage -->
<script src="https://floatmessage.com/embed/floatmessage.js" data-user="YOUR_USER_ID" defer></script>
</body>
</html>That's it — one line of code and FloatMessage is running on your site.
defer attribute ensures the script loads without blocking your page. Your site's performance won't be affected.Choose your loading method
There are two ways to load messages. Pick the one that fits your needs:
Option A: Load all messages by User ID (recommended)
Loads all your active messages and chat widget automatically. Nothing to change when you add or edit messages.
<script src="https://floatmessage.com/embed/floatmessage.js" data-user="YOUR_USER_ID" defer></script>Option B: Load specific messages by ID
Only loads the exact messages you specify. Use the Copy ID button next to each message in your dashboard.
<script src="https://floatmessage.com/embed/floatmessage.js" data-id="MSG_ID_1,MSG_ID_2" defer></script>Open your site and verify
Open your HTML page in a browser. Your floating message should appear based on the trigger you configured (immediately, on scroll, after a delay, or on exit intent).