Testar por 14 dias

Widget de feedback para Next.js

App Router e Pages Router

O widget só precisa da sua chave de API. Gere uma em Chaves de API e troque fgk_sua_chave_aqui nos exemplos.

  1. 1.Instale o pacote

    Funciona com npm, pnpm, yarn ou bun. O pacote já traz os estilos: não precisa importar CSS.

    terminal
    npm install @feedget/widget

  2. 2.Adicione no layout raiz

    O componente já é marcado como client component, então pode ser usado direto no layout do App Router.

    app/layout.tsx
    import { FeedgetWidget } from "@feedget/widget/react";

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

  3. 3.Usando Pages Router?

    Coloque o componente no _app.

    pages/_app.tsx
    import type { AppProps } from "next/app";
import { FeedgetWidget } from "@feedget/widget/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <FeedgetWidget apiKey={process.env.NEXT_PUBLIC_FEEDGET_API_KEY!} />
    </>
  );
}

Aparência sem código

Logo, cor, tema claro ou escuro, lado da tela e texto do botão são definidos no painel, em Configurações → Aparência do widget. O widget busca o visual pela própria chave de API, então nada muda no seu código. Disponível nos planos Growth e Enterprise e durante o trial.

Bom saber

Variável de ambiente

Use NEXT_PUBLIC_FEEDGET_API_KEY para a chave ficar disponível no navegador.