Launch countdown

Count down to a date, then show a message or a button.

A date, a time and a time zone, with a launch mode and an end state of your choice. It is a timer with a text alternative for screen readers.

Try it

<launch-countdown>

ViewPreviewCodeCSS

launch-countdown: Count down to a date, then show a message or a button. 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

<launch-countdown locale="en"></launch-countdown>

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

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

LaunchCountdown.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFinish = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:finish", onFinish);
    const onCta = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:cta", onCta);
    return () => {
      element.removeEventListener("launch-countdown:finish", onFinish);
      element.removeEventListener("launch-countdown:cta", onCta);
    };
  }, []);

  return <launch-countdown 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.

LaunchCountdown.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFinish = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:finish", onFinish);
    const onCta = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:cta", onCta);
    return () => {
      element.removeEventListener("launch-countdown:finish", onFinish);
      element.removeEventListener("launch-countdown:cta", onCta);
    };
  }, []);

  return <launch-countdown 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/LaunchCountdown.vue

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

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

<template>
  <launch-countdown
    locale="en"
    @launch-countdown:finish="onFinish"
    @launch-countdown:cta="onCta"
  />
</template>

vite.config.ts

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

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

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/launch-countdown.component.ts

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

@Component({
  selector: "app-launch-countdown",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <launch-countdown locale="en"></launch-countdown>
  `,
})
export class LaunchCountdownComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("launch-countdown");
    const onFinish = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("launch-countdown:finish", onFinish));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("launch-countdown:finish", onFinish));
    const onCta = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("launch-countdown:cta", onCta));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("launch-countdown:cta", onCta));
  }
}

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

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

<launch-countdown
  locale="en"
  onlaunch-countdown:finish={onFinish}
  onlaunch-countdown:cta={onCta}
></launch-countdown>

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

launch-countdown {
  --cd-radius: 16px;
}

Props

Props of the component, read from its manifest
Prop	Type	Default	What it does
headline	string	none	Replaces the default heading.
date	date	2030-01-01	The day it ends, as YYYY-MM-DD.
time	string	09:00	The time of day it ends, as HH:MM (24 hours).
timeZone	UTC \| visitor \| America/Sao_Paulo \| America/New_York \| America/Los_Angeles \| Europe/London \| Europe/Berlin \| Asia/Kolkata \| Asia/Tokyo \| Australia/Sydney	UTC	The time zone of the date and time; visitor uses each visitor's own clock.
mode	standard \| launch	standard	Launch adds the launch badge and the date line.
endState	message \| zeros \| hide	message	What shows when the time is up: a message, the zeros, or nothing.
endMessage	string	none	Replaces the default end message.
endLabel	string	none	Text of the end button; shown only with endUrl.
endUrl	url	none	https link of the end button, for example the launch page.
hideSeconds	boolean	false	Counts down to the minute, with no seconds.
accent	color	none	Accent color; wins over the --cd-accent variable.
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
finish	The time is up: reached while the page was open, or already past on arrival.
cta	The visitor pressed the end button.

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 "Launch countdown" (launch-countdown): Count down to a date, then show a message or a button. 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

Booking picker<booking-picker>
Card carousel<card-carousel>
Newsletter preferences<newsletter-preferences>