isa-bubbles/README.md

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

# 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:

```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:

```bash
npm install isa-bubbles
```

Then import and use in your code:

```javascript
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:

```bash
  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):

```bash
npm run build
```

Output files:

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

src/ — ESM version

<!-- ### Example

Live demo: isa-bubbles playground (coming soon) -->

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