open-index/open-npm huggingface dataset:
npm package: @quapt/event-feedback
Description: Trigger event-based questionnaires from Angular (after API success/failure or via a button).
Latest version: 1.1.0

# @quapt/event-feedback

Trigger event-based questionnaires from Angular (after API success/failure or via a button).

```bash
npm install @quapt/event-feedback
```

Sometimes npm still caches the old registry error.

```bash
npm cache clean --force
```
---

## Setup

**Standalone:** In `main.ts` add `provideHttpClient()` and `provideEventBased()`.

**NgModule:** Import `HttpClientModule` and `EventBasedModule.forRoot({ apiBaseUrl: '...' })`.

---

## Component: `EventBased`

Selector: `lib-event-feedback`. Standalone; import `EventBased` from `@quapt/event-feedback`.

| Input | Type | Default |
|-------|------|---------|
| `organizationId` | `string` | `''` |
| `appId` | `string` | `''` |
| `groupId` | `string` | `''` |
| `eventId` | `string` | `''` |
| `questionnaireType` | `string` | `''` |
| `eventData` | `EventDataItem[]` | `[]` |
| `buttonLabel` | `string` | `'Trigger event'` |
| `buttonBgColor` | `string` | `'#f59e0b'` |
| `buttonColor` | `string` | `'#000'` |
| `buttonHeight` | `string` | `'40px'` |

**Template:**

```html
<quapt-event-feedback
  [organizationId]="organizationId"
  [appId]="appId"
  [groupId]="groupId"
  [eventId]="eventId"
  [questionnaireType]="questionnaireType"
  [eventData]="eventData"
  buttonLabel="Trigger questionnaire"
  buttonBgColor="#f59e0b"
  buttonColor="#000"
  buttonHeight="40px"
/>
```

---

## Service: `EventBasedTriggerService`

Inject and call `triggerEvent(options)` (e.g. in your API `subscribe`).

**`TriggerEventOptions`:** `organizationId`, `appId`, `groupId`, `eventId`, `questionnaireType`, `eventData?`

**`EventDataItem`:** `{ fieldName: string; fieldValue: string }`

```ts
import { EventBasedTriggerService } from '@quapt/event-feedback';

  constructor(private readonly eventTriggerService: EventBasedTriggerService) {
  }

this.eventBased.triggerEvent({
  organizationId: 'ORG-123',
  appId: 'APP-1',
  groupId: 'GRP001',
  eventId: 'EVT-1',
  questionnaireType: 'NPS',
  eventData: [
    { fieldName: 'EMAIL', fieldValue: 'user@example.com' },
    { fieldName: 'NAME', fieldValue: 'User' },
  ],
}).subscribe();
```

---

## Exports

`EventBased`, `EventBasedTriggerService`, `EventBasedModule`, `provideEventBased`, `TriggerEventOptions`, `EventDataItem`, `EventBasedConfig`
npm package: @quapt/generic-feedback
Description: Embeddable feedback/survey form with 4 integration modes: full page, button popup, floating button, or API-trigger popup
Latest version: 1.3.0

# @quapt/generic-feedback

Embeddable feedback/survey form for Angular. Renders the form as the main content of the page and connects to your API (default: `https://ibtz2bm4h3.execute-api.ap-south-1.amazonaws.com/core-service/api/v1`). Pass organization/questionnaire IDs and optional user info via `params`.

## Install

```bash
npm install @quapt/generic-feedback
```

## Connect & import

**1. App config** – provide the library and HTTP client (e.g. `app.config.ts`):

```ts
import { provideHttpClient } from '@angular/common/http';
import { provideGenericBased } from '@quapt/generic-feedback';

export const appConfig = {
  providers: [
    provideHttpClient(),
    provideGenericBased({
      baseUrl: 'https://ibtz2bm4h3.execute-api.ap-south-1.amazonaws.com/core-service/api/v1', // optional, this is the default
    }),
  ],
};
```

**2. Use the component** – in any standalone component that should show the form, import and use the selector:

```ts
import { QuaptGenericFeedback } from '@quapt/generic-feedback';

@Component({
  standalone: true,
  imports: [QuaptGenericFeedback],
  template: `<quapt-generic-feedback [params]="params" />`,
})
export class FeedbackPageComponent {
  params = {
    organizationId: 'org-1',
    questionnaireType: 'EVENT_BASED',
    questionnaireId: 'qn-1',
    keyIdentifier: 'optional-qr-or-key', // optional – used to load/validate questionnaire
    userInfoValues: { userId: 'u-123', email: 'u@example.com' },
    skipUserInfoStep: true,
  };
}
```

## Params (IDs + user info)

Pass a `params` object so the component can load and submit the questionnaire.

| Property            | Required | Description |
|---------------------|----------|-------------|
| `organizationId`    | ✅       | Organization ID |
| `questionnaireType` | ✅       | Questionnaire type |
| `questionnaireId`   | ✅       | Questionnaire ID |
| `keyIdentifier`     | Optional | Key used to load/validate the questionnaire (e.g. QR key); sent as query param to the load API |
| `userInfoValues`    | Optional | When `skipUserInfoStep` is true, these values are patched into the submitted payload `userInfo` |
| `skipUserInfoStep`  | Optional | Skip user info step (default: true) |

## Usage

In your template, add the component where the form should appear:

```html
<quapt-generic-feedback [params]="params" />
```

Ensure `params` is set in your component (see **Connect & import** above for a full example).

## Publish

From repo root: `npm run build`, then `cd dist/generic-based` and `npm publish`.