1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capassupportchatfloating

Support Chat Bubble

Burbuja flotante de ayuda y preguntas frecuentes accesible en la esquina inferior.

We are online!
💬

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { HelpBubbleOverlay } from 'react-component-kit-ui/overlays';

<HelpBubbleOverlay>Content</HelpBubbleOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/HelpBubbleOverlay.tsx + HelpBubbleOverlay.css:

HelpBubbleOverlay.tsx
'use client';

import './HelpBubbleOverlay.css';

/** HelpBubbleOverlay — ported from astro-component-kit. */
export interface HelpBubbleOverlayProps {
}

export function HelpBubbleOverlay({}: HelpBubbleOverlayProps) {
  return (
    <>
      <div className="help-bubble" data-rk-da86e5="">
        <div className="tip" data-rk-da86e5="">We are online!</div>
        <div className="icon" data-rk-da86e5="">💬</div>
      </div>
    </>
  );
}

export default HelpBubbleOverlay;
HelpBubbleOverlay.css
/* HelpBubbleOverlay — ported from astro-component-kit (overlays/HelpBubbleOverlay.astro) */

.help-bubble:where([data-rk-da86e5]) { position: fixed; bottom: 2rem; right: 2rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; z-index: 1000; }
.icon:where([data-rk-da86e5]) { width: 55px; height: 55px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,0.4); }
.tip:where([data-rk-da86e5]) { background: #fff; color: #000; padding: 6px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
HelpBubbleOverlay.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
supportchatfloating