Todos os componentes · Categoria: Formulários

Horário de contato

Um botão de contato que diz se você está disponível agora ou quando abre.

Passe uma agenda semanal e um fuso horário e ele mostra Disponível agora ou a próxima abertura, com um pontinho que pulsa. Usa o relógio do visitante, não precisa de rede e vira no minuto certo sozinho.

Experimente

<contact-hours>

VisãoPréviaCódigoCSS

contact-hours: Um botão de contato que diz se você está disponível agora ou quando abre. Uma imagem do componente real, desenhada a partir do próprio código. Os controles mudam a imagem e o código ao lado; nada aqui é enviado nem guardado.

Gerado a partir do manifesto do componente e dos valores acima.

index.html

<contact-hours locale="en"></contact-hours>

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

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

taggor-component.js

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

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

ContactHours.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onContact = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("contact-hours:contact", onContact);
    return () => {
      element.removeEventListener("contact-hours:contact", onContact);
    };
  }, []);

  return <contact-hours ref={ref} locale="en" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 18 manda toda prop de um custom element como atributo de texto.
O evento é ouvido com addEventListener, dentro de um efeito.

ContactHours.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onContact = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("contact-hours:contact", onContact);
    return () => {
      element.removeEventListener("contact-hours:contact", onContact);
    };
  }, []);

  return <contact-hours ref={ref} locale="en" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 19 define uma propriedade quando o elemento já a tem e um atributo no resto.
O evento é ouvido com addEventListener, dentro de um efeito.

src/ContactHours.vue

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

<template>
  <contact-hours locale="en" @contact-hours:contact="onContact" />
</template>

vite.config.ts

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

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

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O vite.config.ts avisa o Vue de que esta tag não é um componente Vue.

src/app/contact-hours.component.ts

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

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

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O componente declara CUSTOM_ELEMENTS_SCHEMA.
O evento é ouvido com addEventListener, dentro de um efeito.

src/TaggorComponent.svelte

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

<contact-hours locale="en" oncontact-hours:contact={onContact}></contact-hours>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

Como um agente leva um componente assim a um site:

taggor checktaggor publish

As variáveis CSS que o componente expõe, definidas como a página de um cliente faria.

styles.css

contact-hours {
  --ch-radius: 18px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
schedule	list	[{"day":"mon","open":"09:00","close":"17:00"},{…	Opening windows: a day (mon to sun) with open and close as HH:MM, same day.
timeZone	string	America/Sao_Paulo	The schedule's IANA time zone, for example America/Sao_Paulo.
label	string	nenhum	Replaces the button text.
href	url	nenhum	Where the button goes; without it the button only tells the page.
hideWeek	boolean	false	Hides the list of weekly hours.
hideSample	boolean	false	Hides the Sample content mark (use it with your own hours).
locale	pt-BR \| en	en	–

Os nomes e as descrições das props são os do próprio componente, em inglês, como o autor escreveu.

Eventos

Eventos do componente, lidos do manifesto dele
Evento	Quando dispara
contact	The visitor pressed the contact button.

Construa um com o seu agente

Cole no seu agente. Ele pergunta a você antes de entrar na conta, pagar ou ir além de verificar e publicar.

Construa para mim um componente do Taggor como "Horário de contato" (contact-hours): Um botão de contato que diz se você está disponível agora ou quando abre. Busque https://taggor.dev/agent-setup/prompt.md e siga as instruções de lá para me configurar para o Taggor. Pergunte-me antes de entrar na conta, criar uma conta, aceitar termos, pagar qualquer coisa ou digitar um segredo. Verifique com `taggor check` e publique com `taggor publish`, e pare por aí. Não promova para produção, não anexe a um site, não faça rollback nem use --yes, --force ou --force-drop-invalid, a menos que eu peça exatamente isso nesta conversa.

Componentes relacionados

Formulário de contato<contact-form>
FAQ em formato de chat<chat-faq>
Escolha de horário<booking-picker>