FeedgetFeedget Docs

Angular Integration

Widget de feedback para aplicações Angular

Instalação

Via NPM

npm install @feedget/widget

Configuração Básica

1. Importar CSS Global

/* styles.css ou angular.json */
@import "@feedget/widget/styles.css";
styles.css

2. Inicializar no App Component

// app.component.ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import { createFeedgetWidget, FeedgetWidgetAngular } from "@feedget/widget/angular";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit, OnDestroy {
  private feedgetWidget: FeedgetWidgetAngular | null = null;

  ngOnInit() {
    this.feedgetWidget = createFeedgetWidget({
      apiKey: "feedget_pk_live_abc123..."
    });
    
    this.feedgetWidget.mount();
  }

  ngOnDestroy() {
    if (this.feedgetWidget) {
      this.feedgetWidget.unmount();
    }
  }
}
app.component.ts

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 propriedade orientation:

// app.component.ts - Widget no canto esquerdo
import { Component, OnInit, OnDestroy } from "@angular/core";
import { createFeedgetWidget, FeedgetWidgetAngular } from "@feedget/widget/angular";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit, OnDestroy {
  private feedgetWidget: FeedgetWidgetAngular | null = null;

  ngOnInit() {
    this.feedgetWidget = createFeedgetWidget({
      apiKey: "feedget_pk_live_abc123...",
      orientation: "left" // ou "right" (padrão)
    });
    
    this.feedgetWidget.mount();
  }

  ngOnDestroy() {
    if (this.feedgetWidget) {
      this.feedgetWidget.unmount();
    }
  }
}
app.component.ts

Variáveis de Ambiente

environment.ts

// environment.ts
export const environment = {
  production: false,
  feedgetApiKey: "feedget_pk_live_abc123..."
};

// app.component.ts
ngOnInit() {
  this.feedgetWidget = createFeedgetWidget({
    apiKey: environment.feedgetApiKey
  });
  
  this.feedgetWidget.mount();
}

Use variáveis de ambiente para manter suas credenciais seguras.

Troubleshooting

⚠️ Widget não aparece

Verifique se o CSS foi importado corretamente e se a API Key do projeto está válida.

❌ Erro de build

Certifique-se de que o pacote @feedget/widget está instalado corretamente.

ℹ️ Performance

O widget é carregado de forma assíncrona e não afeta a performance da sua aplicação Angular.