Embeber el formulario
Una vez creado el formulario, lo añades a tu página con un snippet de dos partes: un <script> que carga el componente y la etiqueta <lectico-form> donde quieres que aparezca el formulario.
El snippet
<script type="module"
src="https://api.lectico.com/storage/v1/object/public/widget/v1/lectico-form-element.esm.js"></script>
<lectico-form api-key="pk_live_xxx" form-id="frm_xxx" locale="es"></lectico-form><script type="module">— carga una sola vez por página el componente del formulario desde la CDN de Lectico. Es un módulo ESM.<lectico-form>— la etiqueta del formulario. Va donde quieras renderizarlo. Sus atributos mínimos son:api-key— la clave pública del widget (pk_live_...).form-id— el ID público del formulario (frm_...).locale—esoen(opcional; por defecto se detecta automáticamente).
El formulario se renderiza dentro de un shadow DOM y es fluido: ocupa el 100 % del ancho de su contenedor por defecto. Mientras carga su esquema muestra un esqueleto (skeleton) y lo cachea en la sesión del navegador para pintados instantáneos en navegaciones siguientes.
La pantalla "Instalar"
No necesitas escribir el snippet a mano: el panel te lo genera con tus IDs reales. En la lista de Formularios, haz clic en Instalar junto al formulario (también se abre automáticamente justo después de crearlo).
En la parte superior verás un campo api-key: Lectico lo rellena con tu clave pública de widget si hay una recuperable; si aparece vacío, pega la tuya y el resto de snippets se actualizan con ella.
Debajo, una lista de pestañas a la izquierda y el contenido a la derecha. Cada pestaña explica un caso de uso y trae sus bloques de código con un botón Copiar propio:
- Inicio rápido — el snippet básico (script +
<lectico-form>) y el bloque depreconnectpara acelerar la carga. - App con login — prefill de nombre/email y ocultar campos, con un ejemplo para React/Next.
- Identidad firmada (Pro) — verificación de identidad server-side y gestión del secreto del workspace. Ver Identidad y prefill.
- Headless — enviar a la API desde tu propia interfaz.
- Apariencia — variables CSS y
::part()para adaptar el formulario a tu marca. Ver Apariencia. - Eventos — eventos de ciclo de vida del formulario (
loading,ready,success,error).
Copia el bloque que necesites con su botón Copiar (verás una confirmación) y pégalo en tu página.
Acelerar la carga con preconnect
Para que el navegador adelante la conexión a los servidores de Lectico, añade en el <head> de tu página:
<link rel="preconnect" href="https://api.lectico.com" crossorigin>
<link rel="preconnect" href="https://forms.lectico.com" crossorigin>api.lectico.com sirve el esquema del formulario y la CDN del componente; forms.lectico.com recibe el envío. El bloque de preconnect también está disponible en la pestaña Inicio rápido de la pantalla Instalar.
Carga el <script> una sola vez por página, aunque incluyas varios <lectico-form>. Si lo inyectas dinámicamente (por ejemplo en una SPA), comprueba antes que no exista ya en el documento.
Restringe el origen
Recuerda fijar el dominio permitido del formulario en el panel (ver Crear un formulario). Así, aunque la api-key y el form-id son públicos, los envíos solo se aceptan desde tu dominio.
Referencia técnica completa
Esta página cubre la instalación desde el punto de vista del panel. Para la referencia completa de todos los atributos de <lectico-form>, los eventos, los ejemplos de framework y el modo headless, consulta: