FloatMessage

Embed Integration

FloatMessage can be added to any website with a single <script> tag. No build tools, frameworks, or dependencies required.

Basic Embed (Single Message)

Paste the following snippet just before the closing </body> tag. Replace YOUR_MESSAGE_ID with the ID from your FloatMessage dashboard.

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

Multiple Messages

To load more than one message on the same page, pass a comma-separated list of IDs to the data-id attribute.

<script
  src="https://floatmessage.com/embed/floatmessage.js"
  data-id="MSG_ID_1,MSG_ID_2,MSG_ID_3"
></script>

Each message is fetched and rendered independently, so they can have different templates, schedules, and dismiss behaviors.

Custom API Base

If you self-host FloatMessage or want to proxy the API, use the data-api attribute to override the default endpoint.

<script
  src="https://floatmessage.com/embed/floatmessage.js"
  data-id="YOUR_MESSAGE_ID"
  data-api="https://your-domain.com"
></script>

Dev Console Testing

You can quickly test a message without editing your HTML by pasting an inline script into your browser's developer console.

const s = document.createElement("script");
s.src = "https://floatmessage.com/embed/floatmessage.js";
s.dataset.id = "YOUR_MESSAGE_ID";
document.body.appendChild(s);

How the Embed Script Works

The embed script is a lightweight, zero-dependency JavaScript file. It renders each message inside a Shadow DOM container, so FloatMessage styles never leak into your page and your page styles never affect the message.

  • Shadow DOM isolation — Each message lives in its own shadow root. No CSS conflicts, no z-index wars.
  • Zero dependencies — Pure JavaScript. No jQuery, no React, no external libraries.
  • Works on any platform — WordPress, Shopify, Webflow, Wix, static HTML, single-page apps, or any site that can include a script tag.

Initialization Flow

When the script loads, it follows this sequence:

  1. Read configuration — Parses data-id (and optional data-api) from the script tag.
  2. Fetch message config — Calls the API to retrieve each message's template, content, schedule, trigger, and dismiss settings.
  3. Check schedule — Evaluates date range, days of week, and time range against the visitor's local time. If outside the schedule, the message is skipped.
  4. Check dismiss state — Looks up sessionStorage or localStorage to see if the visitor previously dismissed this message. If so, the message is skipped.
  5. Render — Creates a Shadow DOM container and injects the message HTML and styles. Applies the configured trigger (immediate, delay, scroll, or exit intent).