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 <script> 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