FeedgetFeedget Docs

React Integration

Widget de feedback para aplicações React

Instalação

Via Package Manager

npm install @feedget/widget

Configuração Básica

1. Configurar o Provider

// App.tsx ou _app.tsx
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..." />
    </div>
  );
}
App.tsx

Integração com Next.js

App Router (Next.js 13+)

Para Next.js com App Router, adicione o widget no layout principal:

// app/layout.tsx
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 || ""}
        />
      </body>
    </html>
  );
}

Pages Router (Next.js 12 e anteriores)

Para Next.js com Pages Router, adicione no _app.tsx:

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

Propriedades do Componente

Props Disponíveis

PropriedadeTipoObrigatórioDescrição
apiKeystringSimSua API key do Feedget (gerada no dashboard)
orientation"left" | "right"NãoPosição do widget na tela (padrão: "right")

Nota: A URL da API é configurada automaticamente pelo widget. Você só precisa fornecer a API Key gerada no dashboard.

Variáveis de Ambiente

.env (React / Vite)

# Feedget Configuration
REACT_APP_FEEDGET_API_KEY=feedget_pk_live_abc123...
# ou para Vite:
VITE_FEEDGET_API_KEY=feedget_pk_live_abc123...

.env.local (Next.js)

# Feedget Configuration
NEXT_PUBLIC_FEEDGET_API_KEY=feedget_pk_live_abc123...

Importante: Adicione essas variáveis ao seu arquivo .env para manter suas credenciais seguras. A API key deve ser prefixada com NEXT_PUBLIC_ no Next.js para estar disponível no cliente.

Personalização

Posicionamento do Widget

Por padrão, o widget aparece no canto inferior direito. Você pode alterá-lo para o canto esquerdo usando a prop orientation:

// Widget no canto esquerdo
<FeedgetWidget 
  apiKey="feedget_pk_live_abc123..." 
  orientation="left" 
/>

// Widget no canto direito (padrão)
<FeedgetWidget 
  apiKey="feedget_pk_live_abc123..." 
  orientation="right" 
/>

Exemplo Completo

Aplicação React Completa com Create React App

// App.tsx
import React from "react";
import { FeedgetWidget } from "@feedget/widget/react";
import "@feedget/widget/styles.css";
import { MyComponent } from "./MyComponent";

function App() {
  return (
    <div className="app">
      <header>
        <h1>Minha Aplicação</h1>
      </header>
      <main>
        <MyComponent />
      </main>
      <FeedgetWidget
        apiKey={process.env.REACT_APP_FEEDGET_API_KEY || ""}
        metadata={{
          userId: "user-123",
          environment: process.env.NODE_ENV
        }}
      />
    </div>
  );
}

export default App;

Troubleshooting

Widget não aparece na tela

  • Verifique se você importou o CSS: import "@feedget/widget/styles.css";
  • Confirme se a API key está correta (formato: feedget_pk_live_...)
  • Verifique o console do navegador para erros
  • Certifique-se de que o componente está sendo renderizado (não está em uma rota condicional)

Feedbacks não são enviados

  • Verifique se a API key é válida no dashboard
  • Confirme que sua assinatura está ativa
  • Abra o console do navegador e procure por erros de rede (Network tab)
  • Verifique se não há bloqueadores de rede/firewall

Erro: "Module not found"

  • Execute npm install @feedget/widget ou pnpm install
  • Delete node_modules e package-lock.json, depois reinstale
  • Verifique se está importando corretamente: @feedget/widget/react

Problemas com TypeScript

  • O pacote inclui tipos TypeScript nativamente
  • Se houver erros de tipo, tente reiniciar o servidor TypeScript no VS Code
  • Verifique se está usando TypeScript 4.9+

Next.js: "window is not defined"

Se encontrar esse erro no Next.js, certifique-se de que o componente está sendo renderizado apenas no cliente:

// Adicione "use client" no topo do arquivo "use client"; import { FeedgetWidget } from "@feedget/widget/react";