@quapt/generic-feedback

Embeddable feedback/survey form for Angular. Renders the form as the main content of the page and loads the questionnaire via the resources combination API.

Pass a valid accessId (plus org / app / group / questionnaire fields) via params. The package resolves the production or SIT API internally from that ID — same pattern as @quapt/event-feedback.

Install

npm install @quapt/generic-feedback

Connect & import

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

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideGenericBased(),
  ],
};

Every load/submit requires a valid accessId issued for your environment. Invalid or missing IDs fail with Invalid Access ID. and no API request is sent.

2. Use the component – in any standalone component that should show the form:

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

@Component({
  standalone: true,
  imports: [QuaptGenericFeedback],
  template: `<quapt-generic-feedback [params]="params" />`,
})
export class FeedbackPageComponent {
  params = {
    accessId: 'ICXBEE-PROD-K7N4Q9M2X8R5', // or ICXBEE-SIT-… for develop
    organizationId: 'org-1',
    appId: 'app-1',
    groupId: 'group-1',
    questionnaireType: 'EVENT_BASED',
    questionnaireSubType: 'YOUR_SUB_TYPE',
    keyIdentifier: 'optional-key-or-qr-value', // optional – sent to load API when set
    userInfoValues: { userId: 'u-123', email: '[email protected]' },
    skipUserInfoStep: true,
  };
}

Params (GenericBasedParams)

| Property | Required | Description | |--------------------------|----------|-------------| | accessId | ✅ | Environment access ID (prod or SIT); maps to API base URL internally | | organizationId | ✅ | Organization ID (URL segment for the load path) | | appId | ✅ | App ID | | groupId | ✅ | Group ID | | questionnaireType | ✅ | Questionnaire type | | questionnaireSubType | ✅ | Questionnaire subtype | | keyIdentifier | Optional | Sent as keyIdentifier query param on load when provided | | userInfo | Optional | User info field definitions | | userInfoValues | Optional | When skipUserInfoStep is true, patched into submitted userInfo | | skipUserInfoStep | Optional | Skip user info step (default: true when wired from embed) |

The load request is:

GET {resolvedBaseUrl}/{organizationId}/questionnaires/resources/combination?appId=…&groupId=…&questionnaireType=…&questionnaireSubType=…
and, when keyIdentifier is non-empty, &keyIdentifier=… is appended.

After load, questionnaireId comes from the API response and is used for submission.

Routed page (query string)

If you use <app-event-based /> behind a route instead of the wrapper, the library reads:

| Query param | Maps to | |--------------------|---------| | accessId or acid | accessId | | o | organizationId | | aid | appId | | gid | groupId | | qt | questionnaireType | | qst | questionnaireSubType | | ki or keyIdentifier | keyIdentifier |

Usage in template

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

Publish to npm

From the repository root (where the workspace package.json with ng build lives):

# 1) Install dependencies (if needed)
npm install

# 2) Build the library into dist/generic-based
npm run build

# 3) Log in to npm (once per machine)
npm login

# 4) Publish the built package (run from repo root)
cd dist/generic-based && npm publish --access public

Version bump before publish: edit version in projects/generic-based/package.json, then rebuild and publish:

npm run build
cd dist/generic-based && npm publish --access public

Scoped packages (@quapt/...) need --access public on first publish unless your org defaults to public.

For a dry run:

npm run build && cd dist/generic-based && npm publish --dry-run