Personalizacion del Feedback Widget

El widget se adapta visualmente a tu aplicacion a traves de opciones de configuracion. Puedes cambiar colores, textos, posicion y comportamiento responsive.

Opciones completas de configuracion

Opcion	Tipo	Defecto	Descripcion
publicKey	string	-- (requerido)	Clave publica de tu proyecto
position	string	'bottom-right'	Posicion del boton: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
theme	string	'auto'	Tema visual: 'light', 'dark', 'auto'
accentColor	string	'#6366f1'	Color principal del widget (boton, bordes, enlaces)
labels	object	Ver abajo	Textos personalizables del widget
labels.title	string	'Enviar feedback'	Titulo del formulario
labels.placeholder	string	'Describe tu idea o problema...'	Placeholder del campo de texto
labels.submitButton	string	'Enviar'	Texto del boton de envio
labels.successMessage	string	'Gracias por tu feedback'	Mensaje tras enviar exitosamente
labels.triggerButton	string	'Feedback'	Texto del boton flotante
showTriggerLabel	boolean	true	Mostrar texto junto al icono del boton flotante
zIndex	number	9999	z-index CSS del widget
metadata	object	{}	Datos adicionales que se envian con cada feedback (usuario, pagina, etc.)

Personalizacion visual

Color de acento

El accentColor define el color principal del widget. Se aplica al boton flotante, bordes de foco y el boton de envio.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    accentColor: '#e11d48',
  });
</script>

En React:

<FeedbackWidget
  publicKey="pk_tu_clave_publica"
  accentColor="#e11d48"
/>

Textos personalizados

Personaliza todos los textos del widget para adaptarlos a tu marca o idioma:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    labels: {
      title: 'Cuentanos que piensas',
      placeholder: 'Escribe aqui tu sugerencia...',
      submitButton: 'Enviar sugerencia',
      successMessage: 'Recibido. Gracias por ayudarnos a mejorar.',
      triggerButton: 'Sugerencias',
    },
  });
</script>

En React:

<FeedbackWidget
  publicKey="pk_tu_clave_publica"
  labels={{
    title: 'Cuentanos que piensas',
    placeholder: 'Escribe aqui tu sugerencia...',
    submitButton: 'Enviar sugerencia',
    successMessage: 'Recibido. Gracias por ayudarnos a mejorar.',
    triggerButton: 'Sugerencias',
  }}
/>

Boton flotante

Controla la apariencia y posicion del boton que activa el widget:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-left',
    showTriggerLabel: false,    // Solo muestra el icono, sin texto
  });
</script>

Las posiciones disponibles son:

Valor	Descripcion
'bottom-right'	Esquina inferior derecha (defecto)
'bottom-left'	Esquina inferior izquierda
'top-right'	Esquina superior derecha
'top-left'	Esquina superior izquierda

z-index

Si el widget se oculta detras de otros elementos de tu interfaz, ajusta el zIndex:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    zIndex: 50000,
  });
</script>

Metadata personalizada

Puedes enviar datos adicionales con cada feedback para facilitar el triaje. La metadata se adjunta al item de ideas en Almirant.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    metadata: {
      userId: '12345',
      plan: 'enterprise',
      page: window.location.pathname,
    },
  });
</script>

En React, puedes pasar metadata dinamica:

function App() {
  const { user } = useAuth();

  return (
    <FeedbackWidget
      publicKey="pk_tu_clave_publica"
      metadata={{
        userId: user?.id,
        email: user?.email,
        plan: user?.plan,
        page: window.location.pathname,
      }}
    />
  );
}

Consejo

Incluye al menos el userId y la pagina actual en la metadata. Esto te permite asociar feedback con usuarios especificos y saber desde que parte de la aplicacion lo enviaron.

Comportamiento responsive

El widget se adapta automaticamente a diferentes tamanos de pantalla:

Pantalla	Comportamiento
Desktop (> 768px)	El formulario se abre como un popover junto al boton flotante
Tablet (481px - 768px)	El formulario se abre centrado con overlay semi-transparente
Mobile (< 480px)	El formulario ocupa el ancho completo como un panel inferior (bottom sheet)

El boton flotante mantiene su posicion en todas las resoluciones. En mobile, showTriggerLabel se desactiva automaticamente para ahorrar espacio.

Nota

No necesitas hacer nada para que el widget sea responsive. Se adapta automaticamente segun el viewport del dispositivo.

Modo oscuro

Con theme: 'auto', el widget detecta la preferencia del sistema operativo (prefers-color-scheme) y se adapta.

Si tu aplicacion tiene un toggle de tema propio, puedes controlarlo directamente:

function App() {
  const { theme } = useTheme(); // tu hook de tema

  return (
    <FeedbackWidget
      publicKey="pk_tu_clave_publica"
      theme={theme} // 'light' o 'dark'
    />
  );
}

Ejemplo completo

<script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-right',
    theme: 'auto',
    accentColor: '#2563eb',
    showTriggerLabel: true,
    zIndex: 9999,
    labels: {
      title: 'Tu opinion importa',
      placeholder: 'Que podemos mejorar?',
      submitButton: 'Enviar',
      successMessage: 'Gracias. Tu feedback ha sido registrado.',
      triggerButton: 'Feedback',
    },
    metadata: {
      page: window.location.pathname,
      userAgent: navigator.userAgent,
    },
  });
</script>