All components · Category: Polls and quizzes

Feedback collector

A rating, a follow-up that depends on it and an optional comment.

A score on a scale of numbers, stars or faces, then a question that changes with the score. It stores the feedback without personal data and asks the visitor not to write any.

Try it

<feedback-collector>

ViewPreviewCodeCSS

Generated from the component's manifest and the values above.

index.html

<feedback-collector locale="en"></feedback-collector>

<script>
  const element = document.querySelector("feedback-collector");
  element.addEventListener("feedback-collector:rated", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("feedback-collector:submitted", (event) => {
    console.log(event.detail);
  });
</script>

Add the site's Taggor script once; the component appears when it loads.

taggor-component.js

const element = document.createElement("feedback-collector");
element.setAttribute("locale", "en");
element.addEventListener("feedback-collector:rated", (event) => {
  console.log(event.detail);
});
element.addEventListener("feedback-collector:submitted", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Add the site's Taggor script once; the component appears when it loads.

FeedbackCollector.tsx

import { useEffect, useRef } from "react";

export function FeedbackCollector() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onRated = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("feedback-collector:rated", onRated);
    const onSubmitted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("feedback-collector:submitted", onSubmitted);
    return () => {
      element.removeEventListener("feedback-collector:rated", onRated);
      element.removeEventListener("feedback-collector:submitted", onSubmitted);
    };
  }, []);

  return <feedback-collector ref={ref} locale="en" />;
}

Add the site's Taggor script once; the component appears when it loads.
React 18 sends every prop of a custom element as a text attribute.
The event is heard with addEventListener, inside an effect.

FeedbackCollector.tsx

import { useEffect, useRef } from "react";

export function FeedbackCollector() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onRated = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("feedback-collector:rated", onRated);
    const onSubmitted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("feedback-collector:submitted", onSubmitted);
    return () => {
      element.removeEventListener("feedback-collector:rated", onRated);
      element.removeEventListener("feedback-collector:submitted", onSubmitted);
    };
  }, []);

  return <feedback-collector ref={ref} locale="en" />;
}

Add the site's Taggor script once; the component appears when it loads.
React 19 sets a property when the element already has it, an attribute otherwise.
The event is heard with addEventListener, inside an effect.

src/FeedbackCollector.vue

<script setup lang="ts">
function onRated(event: Event) {
  console.log((event as CustomEvent).detail);
}

function onSubmitted(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <feedback-collector
    locale="en"
    @feedback-collector:rated="onRated"
    @feedback-collector:submitted="onSubmitted"
  />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "feedback-collector",
        },
      },
    }),
  ],
});

Add the site's Taggor script once; the component appears when it loads.
vite.config.ts tells Vue that this tag is not a Vue component.

src/app/feedback-collector.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-feedback-collector",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <feedback-collector locale="en"></feedback-collector>
  `,
})
export class FeedbackCollectorComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("feedback-collector");
    const onRated = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("feedback-collector:rated", onRated));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("feedback-collector:rated", onRated));
    const onSubmitted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("feedback-collector:submitted", onSubmitted));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("feedback-collector:submitted", onSubmitted));
  }
}

Add the site's Taggor script once; the component appears when it loads.
The component declares CUSTOM_ELEMENTS_SCHEMA.
The event is heard with addEventListener, inside an effect.

src/TaggorComponent.svelte

<script>
  function onRated(event) {
    console.log(event.detail);
  }

  function onSubmitted(event) {
    console.log(event.detail);
  }
</script>

<feedback-collector
  locale="en"
  onfeedback-collector:rated={onRated}
  onfeedback-collector:submitted={onSubmitted}
></feedback-collector>

Add the site's Taggor script once; the component appears when it loads.

How an agent gets a component like this onto a site:

taggor checktaggor publish

The CSS variables the component exposes, set the way a customer's page would.

styles.css

feedback-collector {
  --fc-radius: 12px;
}

Props

Props of the component, read from its manifest
Prop	Type	Default	What it does
question	string	How likely are you to recommend us to a friend?	–
topic	string	general	Tells this form's feedback apart from other forms of the site.
scale	nps \| stars \| emoji	nps	–
labels	object	{"low":"Not likely","high":"Very likely"}	The texts at the two ends of the scale.
reasons	object	{"positive":["Quality","Ease of use","Support",…	The follow-up choices: `positive` after a high score, `negative` after a low one.
hideComment	boolean	false	Leaves out the comment field.
commentMax	number 50 to 1000	500	–
accent	color	none	Accent color of the chosen rating and the button.
locale	pt-BR \| en	en	–

Prop names and descriptions are the component's own, in English, as its author wrote them.

Events

Events of the component, read from its manifest
Event	When it fires
rated	The visitor chose a rating.
submitted	The feedback was accepted by Taggor; `group` is the NPS group, on the NPS scale only.

Build one with your agent

Paste this into your agent. It asks you before it signs in, pays or goes further than checking and publishing.

Build me a Taggor component like "Feedback collector" (feedback-collector): A rating, a follow-up that depends on it and an optional comment. Fetch https://taggor.dev/agent-setup/prompt.md and follow its instructions to set me up for Taggor. Ask me before you sign in, create an account, accept terms, pay for anything or type a secret. Check it with `taggor check` and publish it with `taggor publish`, and stop there. Do not promote it to production, attach it to a site, roll back anything or use --yes, --force or --force-drop-invalid unless I ask for exactly that in this conversation.

Related components

Quick poll<quick-poll>
Lead form<contact-form>
Quiz<quiz-result>