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.

Incrusta un formulario de contacto en React, Vue o Angular

Los web components son parte del DOM. Coloca la etiqueta directamente en JSX, plantillas Vue o componentes Angular — sin envoltorio.

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

¿Esto funciona de verdad?

Sí. Los web components son parte del estándar DOM — React, Vue y Angular renderizan las etiquetas desconocidas como HTML plano y dejan que el navegador se encargue. Sin npm install, sin componente envoltorio, sin shim de compatibilidad.

Paso a paso

Carga el script

Añade la etiqueta script al shell HTML de tu app — public/index.html en CRA, app/layout.tsx con next/script en Next.js, o index.html en Vite. O cárgala dinámicamente en un hook useEffect / onMounted.

Coloca el elemento personalizado

Usa la etiqueta del elemento personalizado directamente en JSX (<toimii-contact />), plantillas Vue (<toimii-contact />), o plantillas Angular. El navegador registra el elemento cuando se carga el script.

Informa a tu framework

Usuarios de TypeScript — declara la etiqueta en un archivo global.d.ts para que el compilador la acepte. Usuarios de Vue — marca los elementos personalizados en vite.config.js. Usuarios de Angular — añade CUSTOM_ELEMENTS_SCHEMA. Cada uno es un cambio de una sola línea.

Compila y ejecuta

Ejecuta tu servidor de desarrollo y el formulario se renderiza. Sin envoltorio, sin paquete @types, sin paso de compilación adicional.

Problemas comunes

En React, no puedes pasar props complejas (objetos, funciones) como atributos JSX — el componente recibirá la cadena "[object Object]". Usa una ref + element.config = {...} tras el montaje.
El Modo Estricto en React 18+ monta los componentes dos veces en desarrollo. Los web components con efectos secundarios en connectedCallback pueden ejecutarse dos veces. Los componentes de Toimii lo gestionan — pero si escribes los tuyos propios alrededor de ellos, vigílalo.
Vue 3 necesita que marques los elementos personalizados para que no intente resolverlos como componentes Vue. En vite.config.js, añade compilerOptions.isCustomElement para que coincida con /^toimii-/.
Angular necesita CUSTOM_ELEMENTS_SCHEMA en el array schemas de tu módulo. Sin esto, el compilador da error con la etiqueta desconocida.

Preguntas frecuentes

¿Necesito un componente envoltorio de React/Vue/Angular?

No. Los web components son parte del estándar DOM — React, Vue y Angular renderizan las etiquetas desconocidas como HTML plano y dejan que el navegador se encargue. Sin paquete npm, sin @types, nada que instalar.

¿Cómo le indico a TypeScript que existe el elemento personalizado?

Sí. Añade esto a un archivo global.d.ts: declare namespace JSX { interface IntrinsicElements { 'toimii-contact': any } }. El formulario funciona sin esto — TypeScript simplemente deja de quejarse.

¿Cómo paso props o configuración?

Pásalos como atributos HTML normales. Los web components leen atributos del DOM de la misma manera que React lee props de JSX. Para valores dinámicos, usa una ref y establece las propiedades de forma imperativa si es necesario.

¿Funciona con Next.js, Remix o SvelteKit?

Sí. En Next.js, añade la etiqueta script en app/layout.tsx (con el componente next/script) o en pages/_document.tsx. El elemento personalizado se renderiza en el lado cliente — envuélvelo en un boundary "use client" si estás en el App Router.

¿Qué pasa con el renderizado en el servidor?

El elemento personalizado se renderiza en el lado cliente, como cualquier web component. El SSR emite la etiqueta, el navegador registra el elemento cuando se carga el script, y entonces aparece el formulario. Hay un breve destello de espacio vacío — normalmente imperceptible.

¿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

Sitios estáticos

Astro, Hugo, 11ty, Jekyll — las mismas dos líneas en tu plantilla de layout. Las compilaciones siguen siendo rápidas.

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

¿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.