isa-bubbles

Tiny, dependency-free JavaScript widgets that add interactive “bubbles” to any website — such as credits, contact forms, or feedback prompts.

Built in vanilla JS.

Features

• Zero dependencies — lightweight and fast.
• Drop-in ready — use via <script> tag or ES module import.
• Auto-injected styles — no need to import CSS.
• Customizable — change position, text, and behavior.
• Includes:
  • CreditBubble — hover bubble that expands to show text.
  • ContactBubble — feedback/contact form bubble (uses EmailJS or custom logic).

Quick Start

Option 1: Use via <script> tag (no build setup)

Add this anywhere in your HTML:

<script src="https://cdn.jsdelivr.net/npm/isa-bubbles@latest/dist/isa-bubbles.min.js"></script>
<script>
  // example: credit bubble
  const credit = new CreditBubble({ text: "🍁" });

  // example: contact form bubble
  const contact = new ContactBubble({
    textCollapsed: "✉️",
    textExpanded: "Send feedback ✉️",
  });
</script>

Option 2: Import as a Module (for Modern Setups)

Install via npm:

npm install isa-bubbles

Then import and use in your code:

import { CreditBubble, ContactBubble } from "isa-bubbles";

// Credit bubble
new CreditBubble({
  text: "🍁",
});

// Contact bubble
new ContactBubble({
  textCollapsed: "✉️",
  textExpanded: "Send feedback ✉️",
});

API Reference

new CreditBubble(options)

| Option | Type | Default | Description | | ----------- | -------- | -------------- | ----------------------- | | text | string | "🍁" | Collapsed text or emoji | | hoverText | string | "made in 🍁" | Text shown on hover | | right | string | "10px" | Position from right | | bottom | string | "20px" | Position from bottom | | onClick | function | undefined | Callback when clicked |

new ContactBubble(options)

| Option | Type | Default | Description | | --------------- | ------ | -------------------- | ---------------------------- | | textCollapsed | string | "✉️" | Collapsed text | | textExpanded | string | "send feedback ✉️" | Expanded text | | right | string | 85px | (Optional) Position right | | bottom | string | 20px | (Optional) Position bottom |

Development

Clone and run locally:

  git clone https://github.com/LuisaTu2/isa-info-bubble.git
  cd isa-info-bubble
  npm install
  npm run build

Then open index.html in your browser to test locally.

Building for npm / CDN

The repo supports two builds:

ES Module → for import usage

IIFE (UMD) → for tag usage via CDN

Bundle using Rollup (recommended):

npm run build

Output files:

dist/isa-bubbles.min.js — browser-ready script

src/ — ESM version

Lessons Learned

This project started as a small experiment to publish a reusable UI widget on npm. It grew into a learning experience on:

• npm publishing workflow

• ESM vs UMD builds

• style injection for JS components

• making something both “plug & play” and modern

License

MIT © 2025 Luisa P