Personalização do Feedback Widget

O widget se adapta visualmente à sua aplicação por meio de opções de configuração. Você pode alterar cores, textos, posição e comportamento responsivo.

Opções completas de configuração

Opção	Tipo	Padrão	Descrição
publicKey	string	-- (obrigatório)	Chave pública do seu projeto
position	string	'bottom-right'	Posição do botão: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
theme	string	'auto'	Tema visual: 'light', 'dark', 'auto'
accentColor	string	'#6366f1'	Cor principal do widget (botão, bordas, links)
labels	object	Veja abaixo	Textos personalizáveis do widget
labels.title	string	'Enviar feedback'	Título do formulário
labels.placeholder	string	'Describe tu idea o problema...'	Placeholder do campo de texto
labels.submitButton	string	'Enviar'	Texto do botão de envio
labels.successMessage	string	'Gracias por tu feedback'	Mensagem depois do envio bem-sucedido
labels.triggerButton	string	'Feedback'	Texto do botão flutuante
showTriggerLabel	boolean	true	Exibe texto ao lado do ícone do botão flutuante
zIndex	number	9999	z-index CSS do widget
metadata	object	{}	Dados adicionais enviados com cada feedback (usuário, página etc.)

Personalização visual

Cor de destaque

accentColor define a cor principal do widget. Ela é aplicada ao botão flutuante, às bordas de foco e ao botão de envio.

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

No React:

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

Textos personalizados

Personalize todos os textos do widget para adaptá-los à sua marca ou 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>

No 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',
  }}
/>

Botão flutuante

Controle a aparência e a posição do botão que ativa o widget:

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

As posições disponíveis são:

Valor	Descrição
'bottom-right'	Canto inferior direito (padrão)
'bottom-left'	Canto inferior esquerdo
'top-right'	Canto superior direito
'top-left'	Canto superior esquerdo

z-index

Se o widget ficar oculto atrás de outros elementos da interface, ajuste zIndex:

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

Metadata personalizada

Você pode enviar dados adicionais com cada feedback para facilitar a triagem. A metadata é anexada ao item de ideias no Almirant.

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

No React, você pode passar metadata dinâmica:

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,
      }}
    />
  );
}

Dica

Inclua pelo menos userId e a página atual na metadata. Isso permite associar feedback a usuários específicos e saber de que parte da aplicação ele foi enviado.

Comportamento responsivo

O widget se adapta automaticamente a diferentes tamanhos de tela:

Tela	Comportamento
Desktop (> 768px)	O formulário abre como um popover junto ao botão flutuante
Tablet (481px - 768px)	O formulário abre centralizado com overlay semitransparente
Mobile (< 480px)	O formulário ocupa toda a largura como um painel inferior (bottom sheet)

O botão flutuante mantém a posição em todas as resoluções. No mobile, showTriggerLabel é desativado automaticamente para economizar espaço.

Nota

Você não precisa fazer nada para que o widget seja responsivo. Ele se adapta automaticamente de acordo com o viewport do dispositivo.

Modo escuro

Com theme: 'auto', o widget detecta a preferência do sistema operacional (prefers-color-scheme) e se adapta.

Se a sua aplicação tiver um toggle de tema próprio, você poderá controlá-lo diretamente:

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

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

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