En primer lugar, ¡gracias por tu compra! Estamos encantados de que utilices nuestros componentes. Dependiendo de tu compra, es probable que hayas recibido o bien un conjunto de 4 archivos JavaScript (para la versión de componente web) o una URL única (para la versión de componente de Framer).
Puedes consultar nuestros componentes disponibles aquí: → portafolio
Esta guía explica cómo integrar estos componentes en cualquier proyecto, equilibrando la facilidad de uso con el rendimiento.
1. Integración Simple (Bundled)
Ideal para: Prototipado rápido, plataformas CMS (WordPress, Webflow) o uso independiente. Estos archivos incluyen el framework principal en su interior, por lo que funcionan de inmediato.
Opción A: Bundle Estándar
(nombre_del_componente.bundle.js)
Incluye comentarios descriptivos y es más fácil de depurar. Si prefieres verificar la lógica tú mismo o utilizar tu propio minificador (como Terser o UglifyJS) por seguridad o transparencia, utiliza esta versión.
Opción B: Bundle Minificado
(nombre_del_componente.bundle.min.js)
Recomendado para producción. Altamente optimizado en tamaño de archivo mediante la eliminación de comentarios y espacios en blanco.
Cómo utilizarlo: Coloca la etiqueta script en tu <head> o antes de la
etiqueta de cierre </body>. Por supuesto, nombre_del_componente y
nombre-etiqueta-componente deben ser reemplazados por el nombre del componente
que estés usando o el que se muestra en la documentación de cada componente.
<script src="ruta/a/nombre_del_componente.bundle.min.js"></script>
<nombre-etiqueta-componente prop="valor"></nombre-etiqueta-componente>
2. Optimizado para Rendimiento (Módulos ES)
Ideal para: Proyectos que utilizan múltiples EzComponents o aplicaciones web modernas. Estos son más ligeros porque importan el framework desde una CDN central.
Opción A: Build ESM
(nombre_del_componente.esm.js)
Opción B: Build ESM Minificado
(nombre_del_componente.esm.min.js)
⚠️ Nota importante sobre el acceso a Internet: Debido a que las versiones ESM importan el framework desde una CDN remota, el usuario necesita una conexión a Internet activa. Estos archivos no funcionarán en un entorno local estrictamente offline o en una configuración de “Localhost” sin acceso a Internet.
Cómo utilizarlo: Es obligatorio establecer type="module" en la
etiqueta script.
<script type="module" src="ruta/a/nombre_del_componente.esm.min.js"></script>
<nombre-etiqueta-componente prop="valor"></nombre-etiqueta-componente>
3. Integración en Framer
Si has comprado la versión para Framer, no necesitas manipular archivos.
- Copia la URL del componente proporcionada.
- Abre tu proyecto de Framer.
- Pega (Cmd/Ctrl + V) la URL directamente sobre el lienzo (canvas).
- Framer importará automáticamente el componente y mostrará los controles en la barra lateral.
Elegir la versión correcta
| Extensión de archivo | Caso de uso | Requisitos |
|---|---|---|
.bundle.min.js | Plug-and-play, sin configuración previa. | Funciona Offline |
.esm.min.js | Alto rendimiento para varios componentes. | Requiere Internet |
Nota: Si no confías en nuestro código minificado o quieres garantizar una transparencia del 100%, no dudes en utilizar las versiones no minificadas y ejecutar tu propio proceso de minificación.
