Saltar al contenido principal

Instalacion del Feedback Widget

El Feedback Widget de Almirant permite a los usuarios de tu aplicacion enviar feedback directamente a tu proyecto. El feedback llega como items al tablero de ideas de Almirant, donde puedes triarlo, priorizarlo y convertirlo en work items.

Hay dos formas de instalarlo: con un script tag (para cualquier sitio web) o con el paquete React/Next.js.

Script tag (HTML)​

La forma mas sencilla. Funciona en cualquier sitio web independientemente del framework.

1. Obtener la clave publica​

  1. Ve a Configuracion > Integraciones > Feedback Widget en tu proyecto de Almirant
  2. Copia la clave publica (pk_...)

2. Agregar el script​

Agrega estas lineas antes del cierre de </body> en tu HTML:

<script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-right',
    theme: 'auto',
  });
</script>

Eso es todo. Un boton flotante aparecera en la esquina inferior derecha de tu sitio. Al hacer clic, se abre un formulario para enviar feedback.

Ejemplo HTML completo​

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Aplicacion</title>
</head>
<body>
  <h1>Bienvenido a mi aplicacion</h1>

  <!-- Feedback Widget de Almirant -->
  <script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
  <script>
    FeedbackWidget.init({
      publicKey: 'pk_tu_clave_publica',
      position: 'bottom-right',
      theme: 'auto',
    });
  </script>
</body>
</html>

React / Next.js​

Si tu aplicacion usa React o Next.js, puedes usar el paquete oficial que incluye un componente y un hook.

1. Instalar el paquete​

bun add @almirant/feedback-react

O con npm:

npm install @almirant/feedback-react

2. Usar el componente​

import { FeedbackWidget } from '@almirant/feedback-react';

export default function App() {
  return (
    <>
      <main>
        <h1>Mi aplicacion</h1>
      </main>

      <FeedbackWidget
        publicKey="pk_tu_clave_publica"
        position="bottom-right"
        theme="auto"
      />
    </>
  );
}

Uso en Next.js App Router​

En Next.js con App Router, coloca el widget en tu layout raiz para que este disponible en todas las paginas:

// app/layout.tsx
import { FeedbackWidget } from '@almirant/feedback-react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        <FeedbackWidget
          publicKey="pk_tu_clave_publica"
          position="bottom-right"
          theme="auto"
        />
      </body>
    </html>
  );
}
Nota

El componente FeedbackWidget se renderiza solo en el cliente. No es necesario usar 'use client' en el layout; el componente ya lo maneja internamente.

Uso en Next.js Pages Router​

// pages/_app.tsx
import { FeedbackWidget } from '@almirant/feedback-react';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <FeedbackWidget
        publicKey="pk_tu_clave_publica"
        position="bottom-right"
        theme="auto"
      />
    </>
  );
}

Opciones de configuracion​

Tanto el script tag como el componente React aceptan las mismas opciones:

OpcionTipoDefectoDescripcion
publicKeystring-- (requerido)Clave publica de tu proyecto (pk_...)
positionstring'bottom-right'Posicion del boton: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
themestring'auto'Tema visual: 'light', 'dark', 'auto' (detecta preferencia del sistema)
Consejo

Usa theme: 'auto' para que el widget se adapte automaticamente al modo claro/oscuro del navegador del usuario. Si tu aplicacion tiene su propio toggle de tema, puedes pasar 'light' o 'dark' dinamicamente.

Para opciones avanzadas de personalizacion visual, consulta la pagina de Personalizacion.