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.

Adicionar um formulário de contato ao teu site estático: Astro, Hugo, 11ty, Jekyll

Um snippet no teu template de layout. Funciona no Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown e em todos os outros geradores de sites estáticos.

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

Isto funciona mesmo?

Sim — e os sites estáticos são o caso mais limpo. Sem sandbox de plugins, sem editores que removem scripts, sem plano necessário. As duas linhas encaixam no teu template de layout da mesma forma que num ficheiro HTML qualquer.

Passo a passo

Abre o teu template de layout

Abre o template de layout que envolve cada página — _layouts/default.html no Jekyll, src/layouts/Base.astro no Astro, layouts/partials/footer.html no Hugo, _includes/layout.njk no 11ty.

Cola o código de incorporação

Cola as duas linhas do teu painel Toimii dentro de <body>. Para mostrar o formulário apenas em certas páginas, protege o elemento personalizado com o sistema de templating do teu gerador (flag de front matter, verificação de slug, etc.); a tag script pode ficar no layout.

Corre o servidor de desenvolvimento

Corre o teu servidor de desenvolvimento (npm run dev / hugo server / jekyll serve). O formulário aparece imediatamente — sem configuração extra, sem plugin, sem @types.

Compila e faz deploy

Compila e faz deploy como habitualmente (Netlify, Vercel, GitHub Pages, S3 + CloudFront, onde quer que alojes). O formulário continua a funcionar — a CDN do Toimii trata do resto.

Problemas comuns

A maioria dos renderers de Markdown para sites estáticos remove HTML em bruto por defeito. No Jekyll / 11ty / Hugo, ativa HTML em bruto ou coloca o código de incorporação num ficheiro de layout em vez de um ficheiro de conteúdo.
O hot reload às vezes re-injeta o script várias vezes durante o desenvolvimento. É uma peculiaridade apenas de desenvolvimento; as builds de produção emitem a tag uma vez por página.
Alguns hosts adicionam cabeçalhos Content-Security-Policy agressivos (o Netlify e o Vercel permitem personalização). Permite cdn.toimii.io e api.toimii.io em script-src e connect-src.
Não coloques o snippet em <head>. O elemento personalizado é uma tag de nível body — mantém o script em <head> se quiseres (com async), mas a tag tem de estar em <body>.

Perguntas frequentes

Como adiciono no Astro?

Coloca a tag script no teu componente Layout base (ex. src/layouts/Base.astro) e usa o elemento personalizado em qualquer ficheiro .astro. O Astro renderiza elementos desconhecidos como HTML simples — não precisas de nenhuma diretiva client para a tag em si.

Como adiciono no Hugo?

Adiciona o snippet ao teu layouts/partials/footer.html (ou onde carregas scripts personalizados) e usa o elemento personalizado nos teus ficheiros de conteúdo, templates de layout ou shortcodes.

Como adiciono no 11ty (Eleventy)?

Adiciona o snippet ao teu layout base (_includes/layout.njk nos padrões do Eleventy). Aplica-se a todas as páginas que estendem o layout. Ativa o hot-reload; verás o formulário assim que o servidor de desenvolvimento recompilar.

Como adiciono no Jekyll / GitHub Pages?

Adiciona o snippet a _layouts/default.html (ou ao layout que escolheres). Usa o elemento personalizado em qualquer post Markdown ativando html no renderer de Markdown.

Vai abrandar a minha build?

Não. O script carrega em runtime, não no momento da build — a tua build emite a tag script e o browser vai buscar o componente real quando um visitante acede à página. Astro, Hugo, 11ty, Jekyll: todos sem impacto.

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

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

React / Vue / Angular

Usa o elemento personalizado diretamente em JSX, templates Vue ou componentes Angular. Sem componente wrapper, sem pacote extra.

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.