Newsletter preferences

Let a visitor choose topics and how often to hear from you.

Topics, a frequency and a sentence that rewrites itself as the visitor chooses. It collects an e-mail with consent and keeps the choices beside it.

Try it

<newsletter-preferences>

ViewPreviewCodeCSS

newsletter-preferences: Let a visitor choose topics and how often to hear from you. A picture of the real component, drawn from its own code. The controls change the picture and the code beside it; nothing here is sent or stored.

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

index.html

<newsletter-preferences locale="en"></newsletter-preferences>

<script>
  const element = document.querySelector("newsletter-preferences");
  element.addEventListener("newsletter-preferences:changed", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("newsletter-preferences:subscribed", (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("newsletter-preferences");
element.setAttribute("locale", "en");
element.addEventListener("newsletter-preferences:changed", (event) => {
  console.log(event.detail);
});
element.addEventListener("newsletter-preferences:subscribed", (event) => {
  console.log(event.detail);
});
document.body.append(element);

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

NewsletterPreferences.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onChanged = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("newsletter-preferences:changed", onChanged);
    const onSubscribed = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("newsletter-preferences:subscribed", onSubscribed);
    return () => {
      element.removeEventListener("newsletter-preferences:changed", onChanged);
      element.removeEventListener("newsletter-preferences:subscribed", onSubscribed);
    };
  }, []);

  return <newsletter-preferences 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.

NewsletterPreferences.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onChanged = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("newsletter-preferences:changed", onChanged);
    const onSubscribed = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("newsletter-preferences:subscribed", onSubscribed);
    return () => {
      element.removeEventListener("newsletter-preferences:changed", onChanged);
      element.removeEventListener("newsletter-preferences:subscribed", onSubscribed);
    };
  }, []);

  return <newsletter-preferences 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/NewsletterPreferences.vue

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

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

<template>
  <newsletter-preferences
    locale="en"
    @newsletter-preferences:changed="onChanged"
    @newsletter-preferences:subscribed="onSubscribed"
  />
</template>

vite.config.ts

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

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

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/newsletter-preferences.component.ts

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

@Component({
  selector: "app-newsletter-preferences",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <newsletter-preferences locale="en"></newsletter-preferences>
  `,
})
export class NewsletterPreferencesComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("newsletter-preferences");
    const onChanged = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("newsletter-preferences:changed", onChanged));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("newsletter-preferences:changed", onChanged));
    const onSubscribed = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("newsletter-preferences:subscribed", onSubscribed));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("newsletter-preferences:subscribed", onSubscribed));
  }
}

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 onChanged(event) {
    console.log(event.detail);
  }

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

<newsletter-preferences
  locale="en"
  onnewsletter-preferences:changed={onChanged}
  onnewsletter-preferences:subscribed={onSubscribed}
></newsletter-preferences>

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

newsletter-preferences {
  --np-radius: 12px;
}

Props

Props of the component, read from its manifest
Prop	Type	Default	What it does
headline	string	none	Replaces the default heading.
intro	string	none	A line under the heading.
accent	color	none	Accent color of the choices and the button.
topics	list	[{"id":"updates","label":"Product updates","des…	The topics a visitor can follow.
frequencies	list	["daily","weekly","monthly"]	The frequencies a visitor can choose from.
defaultFrequency	daily \| weekly \| monthly	weekly	–
preselectAll	boolean	false	Starts with every topic ticked.
layout	stacked \| columns	stacked	–
privacyPolicy	url	none	Link to the site's privacy policy.
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
changed	The visitor changed a topic or the frequency.
subscribed	The signup was accepted by Taggor.

Build one with your agent

Build me a Taggor component like "Newsletter preferences" (newsletter-preferences): Let a visitor choose topics and how often to hear from you. 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

Lead form<contact-form>
Feedback collector<feedback-collector>
FAQ accordion<faq-accordion>