Toimii ha hecho un lanzamiento discreto: el servicio está en marcha y el registro está abierto. Pruébalo gratis →

Toimii ha hecho un lanzamiento discreto, así que estas guías describen un servicio en el que ya puedes registrarte y que puedes usar hoy mismo. Aún quedan algunas piezas en camino: las aplicaciones para iOS y Android llegan más adelante 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.

<!-- Añade esto en cualquier parte de tu página -->
<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>
¿Esto funciona de verdad?

Sí — es un elemento personalizado estándar: nada que instalar, ningún envoltorio que escribir. React no necesita ninguna configuración. Vue y Angular necesitan cada uno una línea que le diga a su compilador que la etiqueta no es suya — las dos, más abajo.

Paso a paso

1
Carga el script
Añade la etiqueta script al shell HTML desde el que se sirve tu app — el index.html del que parte tu compilación, o el layout raíz de tu framework.
2
Coloca el elemento personalizado
Coloca la etiqueta donde quieras el formulario; JSX y las plantillas de Vue y Angular la aceptan tal cual. Cópiala de la página de tu componente en Toimii — termina con el código propio de ese componente.
3
Compila y despliega
Compila y despliega como lo harías normalmente, y luego envíate un mensaje de prueba desde la página publicada, no desde el servidor de desarrollo — los envíos solo se aceptan desde el dominio que indicaste en Toimii.

Problemas comunes

  • Vue necesita que la etiqueta se marque como elemento personalizado; si no, intenta resolver un componente Vue y lanza un aviso. isCustomElement recibe una función — comprueba el prefijo toimii-, porque el resto de la etiqueta varía según el componente.
  • Angular necesita CUSTOM_ELEMENTS_SCHEMA en un array schemas — el del propio componente standalone o, en una app más antigua, el de su NgModule. Sin él, el compilador da error con la etiqueta que no conoce.

Preguntas frecuentes

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

No. El script define el elemento en el navegador, así que tu framework solo renderiza la etiqueta — y en tu compilación no cambia nada cuando publicamos una versión nueva.

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

Decláralo en IntrinsicElements de JSX, con la etiqueta que usa tu propio componente. React 19 movió ese espacio de nombres y la forma correcta depende del ajuste jsx de tu tsconfig, así que toma la actual de la guía de actualización de React. El formulario funciona sin esa declaración.

¿Cómo paso props o configuración?

No hay nada que pasar. Lo que pregunta el formulario y adónde entrega los mensajes se define en Toimii y va incorporado en el bundle que carga el script — por eso la etiqueta no lleva ningún atributo.

¿Funciona con Next.js u otro framework de React?

Sí. En Next.js, cárgalo con next/script desde el layout raíz — el lugar documentado para un script que necesita todo el sitio. Solo hace falta un boundary "use client" si le añades un manejador de load o de error; la etiqueta en sí no necesita ninguno.

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

¿Vas a incrustar en otra plataforma?

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

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