@feedget/widget

Widget de feedback do Feedget. Seus usuários enviam bugs, ideias e comentários com screenshot, direto do seu site ou app, e tudo chega no painel do Feedget já triado por IA.

Só precisa da chave de API. Funciona em HTML puro, JavaScript, React, Next.js, Angular, Vue/Nuxt e Astro.

Instalação rápida (qualquer site)

Cole antes de </body>:

<script
  src="https://cdn.jsdelivr.net/npm/@feedget/widget@2/dist/feedget.min.js"
  data-api-key="fgk_sua_chave_aqui"
  async
></script>

Pronto. Gere a chave em Chaves de API no painel do Feedget.

Instalação via npm

npm install @feedget/widget

Os estilos já vêm dentro do widget e ficam isolados: não é preciso importar CSS e o widget não altera fontes, títulos ou listas da sua página.

React

import { FeedgetWidget } from "@feedget/widget/react";

export function App() {
  return <FeedgetWidget apiKey={import.meta.env.VITE_FEEDGET_API_KEY} />;
}

Next.js (App Router)

O componente já é um client component, então pode ir direto no layout:

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

No Pages Router, coloque o mesmo componente em pages/_app.tsx.

Angular

import { Component, OnDestroy, OnInit } from "@angular/core";
import { createFeedgetWidget } from "@feedget/widget/angular";

@Component({ selector: "app-root", template: "<router-outlet />" })
export class AppComponent implements OnInit, OnDestroy {
  private widget = createFeedgetWidget({ apiKey: "fgk_sua_chave_aqui" });

  ngOnInit() {
    this.widget.mount();
  }

  ngOnDestroy() {
    this.widget.unmount();
  }
}

O código pesado do widget só é baixado depois do mount(), sem pesar no bundle inicial do Angular. Não é preciso instalar React.

Vue

<script setup>
import { onBeforeUnmount, onMounted } from "vue";
import { Feedget } from "@feedget/widget/vanilla";

onMounted(() => Feedget.init({ apiKey: import.meta.env.VITE_FEEDGET_API_KEY }));
onBeforeUnmount(() => Feedget.destroy());
</script>

No Nuxt, use um plugin plugins/feedget.client.ts chamando Feedget.init.

Astro

<script>
  import { Feedget } from "@feedget/widget/vanilla";
  Feedget.init({ apiKey: import.meta.env.PUBLIC_FEEDGET_API_KEY });
</script>

JavaScript puro

import { Feedget } from "@feedget/widget/vanilla";

Feedget.init({ apiKey: "fgk_sua_chave_aqui" });
Feedget.destroy();

Opções

| Opção | Tipo | Obrigatória | Descrição | | ---------- | -------- | ----------- | ---------------------------------------------------------------- | | apiKey | string | Sim | Chave de API do projeto, gerada no painel | | metadata | object | Não | { userId, version, custom }, enviados junto com cada feedback |

<FeedgetWidget apiKey="fgk_sua_chave_aqui" metadata={{ userId: user.id, version: "2.4.0" }} />

Aparência

Logo, cor, tema claro ou escuro, lado da tela e texto do botão são configurados no painel, em Configurações → Aparência do widget (planos Growth e Enterprise, e durante o trial). O widget busca a aparência pela própria chave de API: nada muda no seu código.

Compatibilidade

Cada versão é testada instalando o pacote como um cliente faria, em projetos HTML, JavaScript (Vite), React, Next.js, Angular, Vue e Astro, com um teste de navegador que abre o widget e envia um feedback.

Migrando da 1.x

• Remova apiUrl: o widget já usa a API do Feedget.
• Remova orientation e showWatermark: a posição agora é configurada no painel.
• O import "@feedget/widget/styles.css" deixou de ser necessário (continua funcionando).

Licença

MIT