@feedget/widget
Advanced tools
Widget de feedback integrado à API Feedget para coleta de feedback de usuários em aplicações web
Widget de feedback inteligente e multi-plataforma para aplicações web
O Feedget Widget é uma biblioteca JavaScript/TypeScript moderna e leve que permite coletar feedbacks de usuários diretamente em sua aplicação web. Com suporte nativo para React, Angular e Vanilla JavaScript, o widget oferece uma experiência de usuário fluida e profissional.
Nota: Adicione um GIF ou screenshot do widget em ação para melhor visualização.
npm install @feedget/widget
yarn add @feedget/widget
pnpm add @feedget/widget
import { FeedgetWidget } from "@feedget/widget/react";
import "@feedget/widget/styles.css";
function App() {
return (
<div>
<h1>Minha Aplicação</h1>
<FeedgetWidget
apiKey="feedget_pk_live_abc123..."
apiUrl="https://api.feedget.io"
/>
</div>
);
}
export default App;
// app.component.ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import {
createFeedgetWidget,
FeedgetWidgetAngular,
} from "@feedget/widget/angular";
import "@feedget/widget/styles.css";
@Component({
selector: "app-root",
template: '<div id="app">Minha Aplicação</div>',
})
export class AppComponent implements OnInit, OnDestroy {
private widget: FeedgetWidgetAngular | null = null;
ngOnInit() {
this.widget = createFeedgetWidget({
apiKey: "feedget_pk_live_abc123...",
apiUrl: "https://api.feedget.io",
});
this.widget.mount();
}
ngOnDestroy() {
this.widget?.unmount();
}
}
import { Feedget } from "@feedget/widget/vanilla";
import "@feedget/widget/styles.css";
Feedget.init({
apiKey: "feedget_pk_live_abc123...",
apiUrl: "https://api.feedget.io",
});
| Propriedade | Tipo | Obrigatório | Descrição |
|---|---|---|---|
apiKey | string | Sim | API Key obtida no dashboard Feedget |
apiUrl | string | Não | URL da API (default: https://api.feedget.io) |
metadata | object | Não | Metadata customizada para enviar com feedbacks |
<FeedgetWidget
apiKey="feedget_pk_live_abc123..."
apiUrl="https://api.feedget.io"
metadata={{
// Identificação do usuário
userId: "user-123",
userEmail: "user@example.com",
// Informações da aplicação
version: "1.0.0",
environment: "production",
// Dados customizados
custom: {
plan: "premium",
feature: "checkout",
sessionId: "sess_xyz789",
},
}}
/>
// src/App.tsx
import { FeedgetWidget } from "@feedget/widget/react";
import "@feedget/widget/styles.css";
function App() {
return (
<>
{/* Seu conteúdo */}
<FeedgetWidget
apiKey={process.env.REACT_APP_FEEDGET_API_KEY!}
apiUrl={process.env.REACT_APP_FEEDGET_API_URL}
/>
</>
);
}
// app/layout.tsx
"use client";
import { FeedgetWidget } from "@feedget/widget/react";
import "@feedget/widget/styles.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="pt-BR">
<body>
{children}
<FeedgetWidget
apiKey={process.env.NEXT_PUBLIC_FEEDGET_API_KEY!}
apiUrl={process.env.NEXT_PUBLIC_FEEDGET_API_URL}
/>
</body>
</html>
);
}
// pages/_app.tsx
import type { AppProps } from "next/app";
import { FeedgetWidget } from "@feedget/widget/react";
import "@feedget/widget/styles.css";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<FeedgetWidget
apiKey={process.env.NEXT_PUBLIC_FEEDGET_API_KEY!}
apiUrl={process.env.NEXT_PUBLIC_FEEDGET_API_URL}
/>
</>
);
}
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@feedget/widget/styles.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// src/App.tsx
import { FeedgetWidget } from "@feedget/widget/react";
function App() {
return (
<>
{/* Seu conteúdo */}
<FeedgetWidget
apiKey={import.meta.env.VITE_FEEDGET_API_KEY}
apiUrl={import.meta.env.VITE_FEEDGET_API_URL}
/>
</>
);
}
// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
// app.component.ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import {
createFeedgetWidget,
FeedgetWidgetAngular,
FeedgetConfig,
} from "@feedget/widget/angular";
@Component({
selector: "app-root",
template: `
<div id="app">
<h1>Minha Aplicação Angular</h1>
</div>
`,
styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit, OnDestroy {
private widget: FeedgetWidgetAngular | null = null;
ngOnInit() {
const config: FeedgetConfig = {
apiKey: "feedget_pk_live_abc123...",
apiUrl: "https://api.feedget.io",
metadata: {
userId: "user-123",
version: "1.0.0",
},
};
this.widget = createFeedgetWidget(config);
this.widget.mount();
}
ngOnDestroy() {
if (this.widget) {
this.widget.unmount();
}
}
}
// styles.scss
@import "@feedget/widget/styles.css";
// main.js
import { Feedget } from "@feedget/widget/vanilla";
import "@feedget/widget/styles.css";
// Inicializar quando o DOM estiver pronto
document.addEventListener("DOMContentLoaded", () => {
Feedget.init({
apiKey: "feedget_pk_live_abc123...",
apiUrl: "https://api.feedget.io",
metadata: {
userId: getUserId(), // Função customizada
version: "1.0.0",
},
});
});
// Para destruir o widget (cleanup)
window.addEventListener("beforeunload", () => {
Feedget.destroy();
});
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meu Site</title>
<!-- Estilos do Widget -->
<link
rel="stylesheet"
href="https://unpkg.com/@feedget/widget@latest/dist/style.css"
/>
</head>
<body>
<h1>Meu Site</h1>
<!-- Widget Script -->
<script type="module">
import { Feedget } from "https://unpkg.com/@feedget/widget@latest/dist/vanilla.js";
Feedget.init({
apiKey: "feedget_pk_live_abc123...",
apiUrl: "https://api.feedget.io",
});
</script>
</body>
</html>
interface FeedgetWidgetProps {
apiKey: string;
apiUrl?: string;
metadata?: {
userId?: string;
userEmail?: string;
version?: string;
environment?: string;
custom?: Record<string, any>;
};
}
interface FeedgetConfig {
apiKey: string;
apiUrl?: string;
metadata?: FeedgetMetadata;
}
interface FeedgetWidgetAngular {
mount(container?: HTMLElement): void;
unmount(): void;
updateConfig(config: Partial<FeedgetConfig>): void;
}
interface FeedgetVanilla {
init(config: FeedgetConfig): void;
destroy(): void;
updateConfig(config: Partial<FeedgetConfig>): void;
}
O widget envia feedbacks para:
POST https://api.feedget.io/public/feedbacks
Headers:
X-API-Key: feedget_pk_live_abc123...
Content-Type: application/json
Payload:
{
"type": "BUG" | "IDEA" | "OTHER",
"comment": "Descrição do feedback...",
"screenshot": "data:image/png;base64,iVBOR...",
"metadata": {
"url": "https://meusite.com/page",
"userAgent": "Mozilla/5.0...",
"viewport": {
"width": 1920,
"height": 1080
},
"custom": {
"userId": "user-123",
"version": "1.0.0"
}
}
}
| Código | Descrição |
|---|---|
200 | Feedback enviado com sucesso |
400 | Dados inválidos (comentário muito curto/longo) |
401 | API key inválida ou expirada |
403 | Assinatura necessária ou inativa |
429 | Rate limit excedido (100 req/min) |
500 | Erro interno do servidor |
Por padrão, o widget fica fixo no canto inferior esquerdo da tela.
CSS Customizado:
/* Ajustar posicionamento */
.feedget-widget-container {
bottom: 32px;
left: 32px;
/* ou right: 32px para canto direito */
}
/* Mobile */
@media (max-width: 768px) {
.feedget-widget-container {
bottom: 16px;
left: 16px;
}
}
/* Customizar cores do widget */
:root {
--feedget-primary: #8257e6;
--feedget-secondary: #996dff;
--feedget-text: #27272a;
--feedget-bg: #ffffff;
--feedget-border: #e4e4e7;
}
/* Dark mode */
[data-theme="dark"] {
--feedget-text: #fafafa;
--feedget-bg: #18181b;
--feedget-border: #3f3f46;
}
Problema: Widget não é renderizado
Soluções:
Certifique-se de importar o CSS:
import "@feedget/widget/styles.css";
Verifique se a API Key está configurada:
apiKey = "feedget_pk_live_..."; // não vazio
Verifique o console do navegador para erros
Confirme que a assinatura está ativa
Problema: API key inválida ou expirada
Soluções:
feedget_pk_Problema: Assinatura inativa ou limite excedido
Soluções:
Problema: Rate limit excedido (100 req/min)
Soluções:
Problema: html2canvas não funciona
Soluções:
npm list html2canvas
Problema: Erros de tipagem
Soluções:
// tsconfig.json
{
"compilerOptions": {
"moduleResolution": "bundler", // ou "node"
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true
}
}
Problema: z-index ou posicionamento
Soluções:
/* Ajuste o z-index do widget */
.feedget-widget-container {
z-index: 9999 !important;
}
/* Ou dos elementos conflitantes */
.seu-modal {
z-index: 10000;
}
O Feedget oferece planos gratuitos e pagos. Visite feedget.io/pricing para mais detalhes.
Sim, o widget é compatível com:
Sim, o widget é totalmente responsivo. Para apps mobile nativos, aguarde nosso SDK React Native.
Os feedbacks são armazenados de forma segura nos servidores da Feedget, com criptografia em repouso e em trânsito. Conformidade com GDPR e LGPD.
Atualmente não oferecemos versão self-hosted. Entre em contato para planos enterprise.
Não. O widget é carregado de forma assíncrona e tem um bundle otimizado < 50KB gzipped. Impacto mínimo na performance.
Sim, você pode customizar cores, posicionamento e tema via CSS. Suporte a temas customizados completos em breve.
Se você encontrar uma vulnerabilidade de segurança, por favor NÃO abra uma issue pública.
Envie um email para: hello@feedget.io
Content Security Policy:
Content-Security-Policy:
connect-src 'self' https://api.feedget.io;
img-src 'self' data: https://api.feedget.io;
Contribuições são bem-vindas! Por favor, leia nosso Guia de Contribuição antes de submeter PRs.
git clone https://github.com/seu-usuario/widget.git
git checkout -b feature/minha-feature
git commit -m 'feat: adiciona minha feature'
git push origin feature/minha-feature
Usamos Conventional Commits:
feat: Nova funcionalidadefix: Correção de bugdocs: Mudanças na documentaçãostyle: Formatação, ponto-e-vírgula, etcrefactor: Refatoração de códigotest: Adição de testeschore: ManutençãoEste projeto está licenciado sob a Licença MIT.
Desenvolvido e mantido por Feedget Team
FAQs
Widget de feedback integrado à API Feedget para coleta de feedback de usuários em aplicações web
We found that @feedget/widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.