feedget-widget

v1.0.1

Published

3 months ago

Feedget feedback widget for React and Angular applications

Downloads

0High
0Medium
0Low

gabrielfragoso_

feedback widget react angular web-component customer-feedback

Feedget Widget

Widget de feedback integrado à API Feedget para coleta de feedback de usuários em aplicações web.

🚀 Funcionalidades

✅ Autenticação via API Key: Integração segura com a API Feedget
✅ Tipos de Feedback: Suporte para BUG, IDEA e OTHER
✅ Screenshots: Captura automática de tela (opcional)
✅ Metadata Automática: URL, User Agent, Viewport e dados customizados
✅ Tratamento de Erros: Mensagens específicas para diferentes cenários
✅ Validação de Entrada: Comentários de 10-1000 caracteres
✅ Interface Responsiva: Funciona em desktop e mobile
✅ Multi-plataforma: React, Angular, WordPress, Magento

📋 Pré-requisitos

API Key válida: Obtenha no painel Feedget
Assinatura ativa: Necessária para utilizar o widget
Endpoint da API: Por padrão aponta para https://api.feedget.io

📦 Instalação

npm install feedget-widget
# ou
pnpm add feedget-widget
# ou
yarn add feedget-widget

📦 Uso

React

Apenas importe e use - CSS incluído automaticamente:

import { Widget } from 'feedget-widget';

function App() {
  return (
    <Widget apiKey="feedget_pk_live_abc123..." />
  );
}

Com configurações opcionais:

<Widget
  apiKey="feedget_pk_live_abc123..."
  apiUrl="https://api.feedget.io"
  metadata={{
    userId: "user-123",
    version: "1.0.0",
    custom: {
      plan: "premium"
    }
  }}
/>

Angular

1. Configure CUSTOM_ELEMENTS_SCHEMA

No seu app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ... outras configurações
})
export class AppModule { }

2. Importe no main.ts

import 'feedget-widget/web';

3. Use no template

<feedget-widget api-key="feedget_pk_live_abc123..."></feedget-widget>

Com configurações opcionais:

<feedget-widget
  api-key="feedget_pk_live_abc123..."
  api-url="https://api.feedget.io"
  metadata='{"userId": "user-123", "version": "1.0.0"}'>
</feedget-widget>

Vanilla JavaScript / HTML

<!DOCTYPE html>
<html>
  <body>
    <feedget-widget api-key="feedget_pk_live_abc123..."></feedget-widget>
    <script type="module" src="https://unpkg.com/feedget-widget/dist/web.es.js"></script>
  </body>
</html>

🔧 API Integration

Endpoint Público

POST /public/feedbacks
X-API-Key: feedget_pk_live_abc123...
Content-Type: application/json

{
  "type": "BUG",
  "comment": "Descrição do problema...",
  "screenshot": "data:image/png;base64,iVBOR...",
  "metadata": {
    "url": "https://exemplo.com/page",
    "userAgent": "Mozilla/5.0...",
    "viewport": { "width": 1920, "height": 1080 },
    "custom": { "userId": "user-123" }
  }
}

Tratamento de Erros

401: API key inválida ou expirada
403: Assinatura necessária
429: Limite de requisições excedido
400: Dados inválidos (comentário muito curto/longo)

📁 Estrutura

src/
├── components/
│   ├── widget.tsx              # Componente principal
│   ├── widget-form/
│   │   ├── index.tsx          # Formulário principal
│   │   ├── steps/
│   │   │   ├── feedback-type-step.tsx    # Seleção de tipo
│   │   │   ├── feedback-content-step.tsx # Envio de feedback
│   │   │   └── feedback-success-step.tsx # Confirmação
│   │   └── screenshot-button.tsx         # Captura de tela
│   ├── close-button.tsx       # Botão fechar
│   └── loading.tsx           # Indicador de carregamento
├── lib/
│   └── api.ts               # Cliente da API Feedget
├── assets/                  # Ícones e imagens
└── global.css              # Estilos globais

🎨 Personalização

Tema

@theme {
  --color-brand-300: #996dff;
  --color-brand-500: #8257e6;
  --radius-md: 4px;
}

Posicionamento

<Widget
  position="bottom-right" // bottom-left, top-right, top-left
  theme="dark"            // light, dark
  borderRadius="16px"
/>

🔒 Segurança

API Keys

✅ Use variáveis de ambiente
✅ Separe chaves dev/prod
✅ Configure expiração adequada
❌ Nunca commit API keys
❌ Não exponha em logs públicos

CSP Headers

Content-Security-Policy: 
  connect-src 'self' https://api.feedget.io;
  img-src 'self' data: https://api.feedget.io;

📊 Monitoramento

Health Check

await feedgetAPI.healthCheck();

Analytics

Feedget.on('feedback:sent', (feedback) => {
  gtag('event', 'feedback_sent', {
    type: feedback.type,
    has_screenshot: !!feedback.screenshot
  });
});

🐛 Troubleshooting

Widget não aparece

Verifique se a API Key está configurada
Confirme se a assinatura está ativa
Verifique o console para erros

Erro 401/403

Valide a API Key
Confirme status da assinatura
Verifique método de pagamento

Performance

Widget carrega em < 2s
API responde em < 500ms
Screenshots são comprimidas automaticamente

📚 Documentação

🤝 Suporte

📧 Email: [email protected]
💬 Chat: https://feedget.io/support
📚 Docs: https://docs.feedget.io
🐛 Issues: https://github.com/feedget/widget/issues

📄 Licença

Este projeto está licenciado sob a Licença MIT.