O mesmo snippet, colado onde cada plataforma aceita código. Os exemplos usam um endereço e uma chave de exemplo: o seu vem do taggor sites snippet.
01
Um snippet
As plataformas abaixo aceitam a mesma tag de script, exceto WordPress e Next.js, que têm o próprio jeito de carregar um script. Um site tem um só snippet, e a chave dele identifica o site: cole uma vez por site.
Troque <site-key> pela chave que o taggor sites snippet imprime para o seu site.
02
Escolha a sua plataforma
Os limites são os que cada plataforma documenta. Dizemos se rodamos essa plataforma.
HTML puro (nativo)
Sem plataforma nem framework: cole a tag de script no HTML da página, no head ou antes do fechamento do body, e escreva a tag do componente onde ele deve aparecer.
<contact-form heading="Get in touch"></contact-form>
O componente aparece quando o script do Taggor do site está na página.
Limites documentados
A tag não mostra nada até o script carregar e o componente ser definido.
Uma página com Content-Security-Policy precisa permitir o endereço do loader: a página do snippet, na documentação, lista o que permitir.
Como conferimos
Nossa matriz de compatibilidade roda componentes numa página HTML pura, com e sem uma Content-Security-Policy estrita. A tag também foi lida pelo DOM em testes de unidade (happy-dom). Página oficial
WordPress
Adicione ao functions.php do seu tema, ou a um plugin pequeno que carrega código. Ele usa wp_enqueue_script com a estratégia async (WordPress 6.3 ou mais novo).
No WordPress.com, o código exige um plano que aceite plugins: sites gratuitos não aceitam.
O bloco HTML personalizado do editor só mantém um script para quem tem a capacidade unfiltered_html.
Como conferimos
Nossa matriz de compatibilidade roda componentes em páginas WordPress (um bloco HTML personalizado, dois temas padrão e o Elementor). O snippet em PHP foi conferido como texto; o PHP não foi executado. Página oficial
Webflow
Nas configurações do site, abra Custom code e cole a tag na área Head ou Footer.
export function ContactForm() {
return <contact-form heading="Get in touch" />;
}
O componente aparece quando o script do Taggor do site está na página.
O React 19 define uma propriedade quando o elemento já a tem e um atributo caso contrário, então um número ou um booleano pode chegar de qualquer das duas formas. O runtime aceita as duas.
Limites documentados
O React 18 passa toda prop de um custom element como atributo de texto, então um número ou um booleano chega como texto.
O React 19 define uma propriedade quando o elemento já a tem e um atributo caso contrário. O runtime aceita as duas.
Como conferimos
Nossa matriz de compatibilidade roda componentes numa SPA React 19 com build do Vite, com a tag definida antes e depois de o React criá-la. O Create React App e o React 18 não foram rodados num navegador: os snippets foram renderizados pelo React 18 e React 19 em testes de unidade (happy-dom). Página oficial
Next.js
No layout raiz, carregue o snippet com next/script (a estratégia lazyOnload) e escreva a tag do componente num Client Component.
Snippet de instalação · app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script src="https://cdn.taggorcdn.com/s/<site-key>.js" strategy="lazyOnload" />
</body>
</html>
);
}
Usando o componente · ContactForm.tsx
"use client";
export function ContactForm() {
return <contact-form heading="Get in touch" />;
}
O componente aparece quando o script do Taggor do site está na página.
O React 19 define uma propriedade quando o elemento já a tem e um atributo caso contrário, então um número ou um booleano pode chegar de qualquer das duas formas. O runtime aceita as duas.
No App Router do Next.js, um componente que usa hooks é um Client Component.
Limites documentados
No App Router, um componente que usa hooks precisa ser um Client Component. O snippet acrescenta a diretiva.
O HTML da página traz a tag. O componente aparece quando o script do Taggor roda no navegador.
Como conferimos
Nossa matriz de compatibilidade roda componentes numa página Next.js com App Router. Os snippets foram conferidos como texto e com a renderização no servidor e a hidratação do próprio React, não rodados dentro do Next.js. Página oficial
Vue
Cole a tag de script no index.html do projeto. No vite.config.ts, diga ao compilador do Vue que a tag do componente é um custom element e escreva a tag num template.
O componente aparece quando o script do Taggor do site está na página.
O vite.config.ts precisa dizer ao compilador do Vue que a tag não é um componente Vue.
Limites documentados
A tag precisa ser declarada como custom element (isCustomElement). Sem isso o Vue procura um componente Vue com esse nome e avisa.
Como conferimos
Fora da nossa matriz de compatibilidade e sem rodar num navegador. Em testes de unidade, o compilador do próprio Vue compilou o componente gerado com a configuração gerada, e o Vue o montou no happy-dom, onde um elemento de teste leu as props de volta. Página oficial
Angular
Cole a tag de script no src/index.html e declare CUSTOM_ELEMENTS_SCHEMA no componente Angular que usa a tag.
Usando o componente · src/app/contact-form.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@Component({
selector: "app-contact-form",
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<contact-form heading="Get in touch"></contact-form>
`,
})
export class ContactFormComponent {}
O componente aparece quando o script do Taggor do site está na página.
O componente Angular precisa declarar CUSTOM_ELEMENTS_SCHEMA.
Limites documentados
O componente precisa declarar CUSTOM_ELEMENTS_SCHEMA. Sem isso o Angular recusa o elemento desconhecido.
O binding de evento do Angular não consegue nomear um evento como tag:event: ouça com addEventListener.
Como conferimos
Fora da nossa matriz de compatibilidade e sem rodar num navegador. Em testes de unidade, o compilador do Angular compilou o componente standalone gerado e ele foi iniciado no happy-dom, onde um elemento de teste leu as props de volta. Página oficial
03
Depois, coloque o componente
Escreva a tag do componente onde ele deve aparecer, com as props como atributos.
Uma tag com uma prop (componente de exemplo)
<contact-form heading="Get in touch"></contact-form>
04
Para agências e muitos sites
O mesmo componente em vários sites de clientes, e os dados num lugar só.
Fig. 11 · O que uma agência enfrenta, e o que muda
O problema
O que o Taggor faz
O mesmo formulário ou banner, refeito para o site de cada cliente
Um componente, publicado uma vez; cada site o carrega pelo próprio snippet.
Uma correção exige abrir cada site
Promova uma versão: os sites daquele canal acompanham, sem editar as páginas.
Cada cliente quer o próprio texto e as próprias cores
Valores definidos por site, sem uma versão nova.
Envios espalhados por várias ferramentas
Chegam a um portal só, listados por coleção e exportáveis em CSV ou NDJSON.
Para agências e freelancers que mantêm vários sites de clientes e querem entregar componentes novos sem abrir o código de cada site.
05
Outros hospedeiros
Um site com Content-Security-Policy, o conteúdo de fallback e o que o visitante vê se algo falhar estão na página do snippet, na documentação.