Pular para o conteúdo principal

Instalação do Feedback Widget

O Feedback Widget do Almirant permite que os usuários da sua aplicação enviem feedback diretamente ao projeto. O feedback chega como items ao quadro de ideias do Almirant, onde você pode fazer a triagem, priorizá-lo e convertê-lo em work items.

Há duas formas de instalá-lo: com uma tag de script, para qualquer site, ou com o pacote React/Next.js.

Tag de script (HTML)​

A forma mais simples. Funciona em qualquer site, independentemente do framework.

1. Obter a chave pública​

  1. Acesse Configurações > Integrações > Feedback Widget no seu projeto do Almirant
  2. Copie a chave pública (pk_...)

2. Adicionar o script​

Adicione estas linhas antes do fechamento de </body> no 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>

Pronto. Um botão flutuante aparecerá no canto inferior direito do seu site. Ao clicar nele, um formulário para enviar feedback será aberto.

Exemplo completo em HTML​

<!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​

Se a sua aplicação usa React ou Next.js, você pode usar o pacote oficial, que inclui um componente e um hook.

1. Instalar o pacote​

bun add @almirant/feedback-react

Ou com npm:

npm install @almirant/feedback-react

2. Usar o 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 no Next.js App Router​

No Next.js com App Router, coloque o widget no layout raiz para que ele esteja disponível em todas as páginas:

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

O componente FeedbackWidget é renderizado apenas no cliente. Não é necessário usar 'use client' no layout; o componente já faz isso internamente.

Uso no 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"
      />
    </>
  );
}

Opções de configuração​

Tanto a tag de script quanto o componente React aceitam as mesmas opções:

OpçãoTipoPadrãoDescrição
publicKeystring-- (obrigatório)Chave pública do seu projeto (pk_...)
positionstring'bottom-right'Posição do botão: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
themestring'auto'Tema visual: 'light', 'dark', 'auto' (detecta a preferência do sistema)
Dica

Use theme: 'auto' para que o widget se adapte automaticamente ao modo claro ou escuro do navegador do usuário. Se a aplicação tiver seu próprio toggle de tema, você poderá passar 'light' ou 'dark' dinamicamente.

Para opções avançadas de personalização visual, consulte a página de Personalização.