Todos os componentes · Categoria: Banners e avisos

Modal de oferta

Uma janela de oferta que só abre quando o visitante pede.

Uma janela modal de verdade: o foco entra, o Tab fica dentro, Esc ou um clique no fundo fecham e o foco volta ao botão. Nunca abre ao carregar, por temporizador nem por intenção de saída, e pode cobrir só a própria caixa ou a página toda.

Experimente

<modal-offer>

VisãoPréviaCódigoCSS

modal-offer: Uma janela de oferta que só abre quando o visitante pede. 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

<modal-offer href="https://example.com/book" locale="en"></modal-offer>

<script>
  const element = document.querySelector("modal-offer");
  element.addEventListener("modal-offer:opened", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("modal-offer:closed", (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("modal-offer");
element.setAttribute("href", "https://example.com/book");
element.setAttribute("locale", "en");
element.addEventListener("modal-offer:opened", (event) => {
  console.log(event.detail);
});
element.addEventListener("modal-offer:closed", (event) => {
  console.log(event.detail);
});
document.body.append(element);

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

ModalOffer.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onOpened = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("modal-offer:opened", onOpened);
    const onClosed = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("modal-offer:closed", onClosed);
    return () => {
      element.removeEventListener("modal-offer:opened", onOpened);
      element.removeEventListener("modal-offer:closed", onClosed);
    };
  }, []);

  return <modal-offer ref={ref} href="https://example.com/book" 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.

ModalOffer.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onOpened = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("modal-offer:opened", onOpened);
    const onClosed = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("modal-offer:closed", onClosed);
    return () => {
      element.removeEventListener("modal-offer:opened", onOpened);
      element.removeEventListener("modal-offer:closed", onClosed);
    };
  }, []);

  return <modal-offer ref={ref} href="https://example.com/book" 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/ModalOffer.vue

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

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

<template>
  <modal-offer
    href="https://example.com/book"
    locale="en"
    @modal-offer:opened="onOpened"
    @modal-offer:closed="onClosed"
  />
</template>

vite.config.ts

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

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

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/modal-offer.component.ts

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

@Component({
  selector: "app-modal-offer",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <modal-offer href="https://example.com/book" locale="en"></modal-offer>
  `,
})
export class ModalOfferComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("modal-offer");
    const onOpened = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("modal-offer:opened", onOpened));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("modal-offer:opened", onOpened));
    const onClosed = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("modal-offer:closed", onClosed));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("modal-offer:closed", onClosed));
  }
}

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

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

<modal-offer
  href="https://example.com/book"
  locale="en"
  onmodal-offer:opened={onOpened}
  onmodal-offer:closed={onClosed}
></modal-offer>

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

modal-offer {
  --mo-radius: 20px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
heading	string	nenhum	Replaces the dialog heading.
body	string	nenhum	Replaces the dialog text.
cta	string	nenhum	Replaces the offer button text.
href	url	nenhum	Where the offer button goes; without it the button only closes.
triggerLabel	string	nenhum	Replaces the text of the opening button.
scope	box \| page	box	box covers this component; page covers the host page.
hideSample	boolean	false	Hides the Sample content mark.
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
opened	The visitor opened the offer.
closed	The offer was closed.

Construa um com o seu agente

Construa para mim um componente do Taggor como "Modal de oferta" (modal-offer): Uma janela de oferta que só abre quando o visitante pede. 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

Barra de anúncio<announcement-bar>
Pilha de avisos<toast-stack>
Formulário de contato<contact-form>