React to LiveEMBEDDED LOOMS

A video bubble for any landing page.

One <script> tag. Loom or Supercut — configure, copy, paste; a dismissible intro pops up on a timer or scroll depth.

1Configure your bubble

Video URL

Trigger

Position

Delay (s)

Scroll %

Pill title (optional)Remember dismissal (days, 0 = session only)

2Your snippet

<script async

src="https://your-site.lovable.app/loom-bubble.js"

data-video-url="https://supercut.ai/share/float-labs/tOgpqhASaBW3FwM5v8NKTb"

data-trigger="timer"

data-delay="5000"

data-scroll="75"

data-position="bottom-right"

data-title="A quick hello 👋"

></script>

How to install

1Publish this project — the script must load from a public URL.

2Paste the snippet into the target site — plain HTML: before </body>.

TanStack Start example

head: () => ({
  scripts: [
    {
      src: "https://your-site.lovable.app/loom-bubble.js",
      async: true,
      "data-video-url": "https://supercut.ai/share/float-labs/tOgpqhASaBW3FwM5v8NKTb",
      "data-trigger": "timer",
      "data-delay": "5000",
      "data-position": "bottom-right",
      "data-title": "A quick hello 👋",
    },
  ],
})

3Reload the target site — the bubble appears per your trigger config.

Shadow-DOM isolated

Host-site CSS can't break it.

Timer or scroll trigger

Whichever fires first; autoplays muted.

Dismiss & remembered

Click or Esc to close — hidden for the session or N days.

Responsive on mobile, respects prefers-reduced-motion, no analytics and no cookies unless you set data-cookie-days.