Estas guías describen Toimii una vez que esté en funcionamiento. El panel y la facturación aún no están disponibles — Toimii se lanza en 2026.

Añade un formulario de contacto a tu sitio estático: Astro, Hugo, 11ty, Jekyll

Un fragmento en tu plantilla de layout. Funciona en Astro, Hugo, 11ty, Jekyll, Gatsby, Bridgetown y cualquier otro generador de sitios estáticos.

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

¿Esto funciona de verdad?

Sí — y los sitios estáticos son el caso más limpio. Sin sandbox de plugins, sin editores que eliminen scripts, sin niveles de plan. Las dos líneas se colocan en tu plantilla de layout de la misma manera que irían en cualquier archivo HTML.

Paso a paso

Abre tu plantilla de layout

Abre la plantilla de layout que envuelve todas las páginas — _layouts/default.html en Jekyll, src/layouts/Base.astro en Astro, layouts/partials/footer.html en Hugo, _includes/layout.njk en 11ty.

Pega el código de incrustación

Pega las dos líneas de tu panel de Toimii dentro de <body>. Para mostrar el formulario solo en ciertas páginas, condiciona el elemento personalizado con el sistema de plantillas de tu generador (flag de front matter, comprobación de slug de página, etc.); la etiqueta script puede quedarse en el layout.

Ejecuta el servidor de desarrollo

Ejecuta tu servidor de desarrollo (npm run dev / hugo server / jekyll serve). El formulario se renderiza inmediatamente — sin configuración extra, sin plugin, sin @types.

Compila y despliega

Compila y despliega como siempre (Netlify, Vercel, GitHub Pages, S3 + CloudFront, donde sea que alojes tu sitio). El formulario sigue funcionando — el CDN de Toimii se encarga del resto.

Problemas comunes

La mayoría de los renderizadores Markdown de sitios estáticos eliminan el HTML sin procesar por defecto. En Jekyll / 11ty / Hugo, habilita el HTML sin procesar o pega la incrustación en un archivo de layout en lugar de en un archivo de contenido.
El hot reload a veces reinyecta el script varias veces durante el desarrollo. Es una peculiaridad solo del entorno de desarrollo; las compilaciones de producción emiten la etiqueta una vez por página.
Algunos hosts añaden cabeceras Content-Security-Policy agresivas (Netlify y Vercel permiten personalizarlas). Permite cdn.toimii.io y api.toimii.io en script-src y connect-src.
No pongas el fragmento en <head>. El elemento personalizado es una etiqueta de nivel body — mantén el script en <head> si quieres (con async), pero la etiqueta tiene que estar en <body>.

Preguntas frecuentes

¿Cómo lo añado en Astro?

Coloca la etiqueta script en tu componente de layout base (p. ej. src/layouts/Base.astro) y usa el elemento personalizado en cualquier archivo .astro. Astro renderiza los elementos desconocidos como HTML plano — no se necesita directiva client para la propia etiqueta.

¿Cómo lo añado en Hugo?

Añade el fragmento a layouts/partials/footer.html (o donde cargues tus scripts personalizados) y usa el elemento personalizado en tus archivos de contenido, plantillas de layout o shortcodes.

¿Cómo lo añado en 11ty (Eleventy)?

Añade el fragmento a tu layout base (_includes/layout.njk en los valores predeterminados de Eleventy). Se aplica a todas las páginas que extienden el layout. Activa el hot-reload; verás el formulario en cuanto el servidor de desarrollo se reconstruya.

¿Cómo lo añado en Jekyll / GitHub Pages?

Añade el fragmento a _layouts/default.html (o el layout que prefieras). Usa el elemento personalizado en cualquier entrada Markdown habilitando html en el renderizador Markdown.

¿Ralentizará mi compilación?

No. El script se carga en tiempo de ejecución, no en tiempo de compilación — tu build emite la etiqueta script y el navegador descarga el componente real cuando un visitante llega a la página. Astro, Hugo, 11ty, Jekyll: todos sin cambios.

¿Incrustando en una plataforma diferente?

Las mismas dos líneas de código, explicadas para cada plataforma.

WordPress

Bloque HTML personalizado, editor de bloques o clásico. Sin instalar plugins. Un detalle — tu rol de usuario necesita el permiso unfiltered_html.

Leer la guía completa

Squarespace

Coloca un Bloque de Código en cualquier página. Requiere el plan Core (renombrado de Business en 2025) o superior.

Leer la guía completa

Webflow

El elemento Code Embed admite hasta 50.000 caracteres. El código personalizado requiere el plan Basic o superior. Publica para ver el resultado.

Leer la guía completa

Wix

Wix pone el widget Embed en un sandbox, así que usamos un método dividido — el script en Configuración → Código personalizado, la etiqueta mediante Insertar widget. Guía honesta.

Leer la guía completa

Shopify

Añade una sección Custom Liquid a cualquier tema — sin instalar ninguna app. Las páginas de pago requieren Shopify Plus.

Leer la guía completa

HTML / Personalizado

Una página HTML simple es suficiente. Ábrela en cualquier editor de texto, pega, guarda, sube. Tres pasos y ya está en línea.

Leer la guía completa

React / Vue / Angular

Usa el elemento personalizado directamente en JSX, plantillas Vue o componentes Angular. Sin componente envoltorio, sin paquetes extra.

Leer la guía completa

¿Listo para probarlo?

Prueba gratuita de 30 días. Sin tarjeta de crédito. Listo en minutos.

Sin tarjeta de crédito. Listo en 2 minutos.