Estes guias descrevem o Toimii depois que ele estiver no ar. O painel e a cobrança ainda não estão disponíveis — o Toimii será lançado em 2026.

Incorporar um formulário de contato no React, Vue ou Angular

Os web components são parte do DOM. Coloca a tag diretamente em JSX, templates Vue ou componentes Angular — sem wrapper necessário.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

Isto funciona mesmo?

Sim. Os web components são parte do padrão DOM — o React, o Vue e o Angular renderizam tags desconhecidas como HTML simples e deixam o browser tratar do resto. Sem npm install, sem componente wrapper, sem shim de compatibilidade.

Passo a passo

Carrega o script

Adiciona a tag script ao shell HTML da tua app — public/index.html no CRA, app/layout.tsx com next/script no Next.js, ou index.html no Vite. Ou carrega-a dinamicamente num hook useEffect / onMounted.

Coloca o elemento personalizado

Usa a tag do elemento personalizado diretamente em JSX (<toimii-contact />), templates Vue (<toimii-contact />) ou templates Angular. O browser regista o elemento quando o script carrega.

Diz ao teu framework sobre ele

Utilizadores de TypeScript — declara a tag num ficheiro global.d.ts para o compilador a aceitar. Utilizadores de Vue — sinaliza os elementos personalizados no vite.config.js. Utilizadores de Angular — adiciona CUSTOM_ELEMENTS_SCHEMA. Cada um é uma mudança de uma linha.

Compila e corre

Corre o teu servidor de desenvolvimento e o formulário aparece. Sem wrapper, sem pacote @types, sem passo de compilação extra.

Problemas comuns

No React, não podes passar props complexas (objetos, funções) como atributos JSX — o componente recebe a string "[object Object]". Usa uma ref + element.config = {...} depois do mount.
O Strict Mode no React 18+ faz double-mount de componentes em desenvolvimento. Web components com efeitos colaterais no connectedCallback podem disparar duas vezes. Os componentes do Toimii lidam com isso — mas se escreveres os teus próprios wrappers, tem atenção.
O Vue 3 precisa que sinalizes os elementos personalizados para que não os tente resolver como componentes Vue. No vite.config.js, adiciona compilerOptions.isCustomElement para corresponder a /^toimii-/.
O Angular precisa de CUSTOM_ELEMENTS_SCHEMA no array schemas do teu módulo. Sem isso, o compilador dá erro na tag desconhecida.

Perguntas frequentes

Preciso de um componente wrapper React/Vue/Angular?

Não. Os web components são parte do padrão DOM — o React, o Vue e o Angular renderizam tags desconhecidas como HTML simples e deixam o browser tratar do resto. Sem pacote npm, sem @types, nada para instalar.

Como digo ao TypeScript sobre o elemento personalizado?

Sim. Adiciona isto a um ficheiro global.d.ts: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. O formulário funciona sem isso — o TypeScript apenas deixa de reclamar.

Como passo props ou configuração?

Passa-os como atributos HTML normais. Os web components leem atributos do DOM da mesma forma que o React lê props do JSX. Para valores dinâmicos, usa uma ref e define as propriedades de forma imperativa se necessário.

Funciona com Next.js, Remix ou SvelteKit?

Sim. No Next.js, adiciona a tag script em app/layout.tsx (com o componente next/script) ou em pages/_document.tsx. O elemento personalizado renderiza no lado do cliente — envolve-o numa fronteira "use client" se estiveres no App Router.

E quanto ao server-side rendering?

O elemento personalizado renderiza no lado do cliente, como qualquer web component. O SSR emite a tag, o browser regista o elemento quando o script carrega, e depois o formulário aparece. Há um breve flash de espaço vazio — normalmente imperceptível.

A incorporar noutra plataforma?

As mesmas duas linhas de código, explicadas para cada plataforma.

WordPress

Bloco HTML Personalizado, Block Editor ou Clássico. Sem instalar plugin. Um detalhe — o teu perfil de utilizador precisa da permissão unfiltered_html.

Ler o guia completo

Squarespace

Coloca um Bloco de Código em qualquer página. Requer o plano Core (renomeado Business em 2025) ou superior.

Ler o guia completo

Webflow

O elemento Code Embed suporta até 50 000 caracteres. O código personalizado requer o plano Basic ou superior. Publica para pré-visualizar.

Ler o guia completo

Wix

O Wix coloca o widget Embed numa sandbox, por isso usamos um método dividido — script em Definições → Código Personalizado, tag via Embed a Widget. Guia honesto.

Ler o guia completo

Shopify

Adiciona uma secção Custom Liquid a qualquer tema — sem instalar app. Salta as páginas de checkout a menos que estejas no Shopify Plus.

Ler o guia completo

Sites Estáticos

Astro, Hugo, 11ty, Jekyll — as mesmas duas linhas no teu template de layout. As builds ficam rápidas.

Ler o guia completo

HTML / Personalizado

Uma página HTML simples chega. Abre num editor de texto, cola, guarda, faz upload. Três passos e está online.

Ler o guia completo

Pronto para experimentar?

30 dias de teste gratuito. Sem cartão de crédito. Pronto em minutos.

Sem cartão de crédito. Pronto em 2 minutos.