isa-bubbles/src/CreditBubble.js

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

export default class CreditBubble {
  constructor({
    text = "🍁",
    hoverText = "made in 🍁",
    onClick,
    parent = document.body,
    fontSizeCollapsed = "20px",
    fontSizeExpanded = "15px",
    right = "10px",
    bottom = "20px",
    backgroundColorCollapsed = "rgba(224, 200, 200, 0.95)",
    backgroundColorExpanded = "rgba(224, 200, 200, 0.85)",
    zIndex = "5",
  }) {
    this.text = text;
    this.hoverText = hoverText;

    if (!document.getElementById("creditbubble-styles")) {
      const style = document.createElement("style");
      style.id = "creditbubble-styles";
      style.textContent = `
        .bubble {
          height: 30px;
          width: 30px;
          border-radius: 50%;
          transition: all 1s ease;
          position: fixed;
          right: ${right};
          bottom: ${bottom};
          text-align: center;
          justify-content: center;
          place-content: center;
          cursor: pointer;
          overflow: hidden;
          font-size: ${fontSizeCollapsed};
          transition: all 1 ease;
          color: #fff;
          line-height: 1;
          background-color: ${backgroundColorCollapsed};
          z-index: ${zIndex};
        }
        .bubble.expanded {
          font-size: ${fontSizeExpanded};
          height: 40px;
          width: 40px;
          padding: 8px;
          background-color: ${backgroundColorExpanded};
        }
      `;
      document.head.appendChild(style);
    }

    // Create bubble
    this.el = document.createElement("div");
    this.el.className = "bubble";
    this.el.textContent = text;

    // Hover events
    this.el.addEventListener("mouseenter", () => {
      this.el.textContent = hoverText;
      this.el.classList.add("expanded");
    });

    this.el.addEventListener("mouseleave", () => {
      this.el.textContent = text;
      this.el.classList.remove("expanded");
    });

    this.el.addEventListener("click", () => {
      onClick();
      this.el.classList.remove("expanded");
    });

    // Append
    parent.appendChild(this.el);
  }
}

// Optional: make it work in <script> environments too
// if (typeof window !== "undefined") {
//   window.CreditBubble = CreditBubble;
// }

// Now it works both in:

// // ESM
// import { CreditBubble } from "./creditbubble.js";
// new CreditBubble({ text: "✨" });

// and in plain HTML:

// <script src="creditbubble.js"></script>
// <script>
//   new CreditBubble({ text: "✨" });
// </script>