En este artículo veremos cómo conectar Easytools con Webflow de dos formas:
- Webflow como landing page - tus productos están en Easytools y Webflow funciona como tu landing page principal. Puedes enlazar cualquier botón o elemento de Webflow directamente a la pasarela de pago de un producto de Easytools.
- Contenido protegido en Webflow - usa Login Wall para controlar quién ve qué. Puedes bloquear el acceso a toda una página, o mostrar y ocultar secciones concretas según si el visitante es un cliente de pago.
A diferencia de otras plataformas, Webflow admite no solo la protección de página completa, sino también el bloqueo por secciones (section-level gating) - mostrar contenido distinto a clientes de pago y visitantes gratuitos en la misma página. Esto se explica en la Parte 2.
Mira el video tutorial que cubre todos los temas:
Parte 1: Enlazar productos
Cuando tienes productos en Easytools y Webflow es tu landing page, puedes enlazar cualquier botón o elemento de tu sitio de Webflow directamente a la pasarela de pago de Easytools para ese producto.
1. Copia el enlace del producto desde Easytools
- En Easytools, ve a Store → Products (Tienda → Productos).
- Abre el producto al que quieres enlazar.
- Haz clic en el icono Share (Compartir) en la parte superior de la página del producto.
- En el diálogo de Share, haz clic en Copy link (Copiar enlace). Opcionalmente, activa Shorten link (Acortar enlace) para obtener una URL más corta.
2. Añade el enlace a un botón de Webflow
- Abre tu sitio en el Webflow Editor.
- Haz clic en el botón o elemento que quieres enlazar.
- En el panel derecho, abre la pestaña Settings.
- Busca la sección Link settings y pega el enlace copiado en el campo URL.
- Activa Open in new tab (Abrir en pestaña nueva) si lo necesitas.
- Haz clic en Publish en la esquina superior derecha para publicar los cambios.
Cuando los usuarios hagan clic en el botón, irán directamente a la pasarela de pago de Easycart para ese producto.
Parte 2: Login Wall (contenido protegido)
Login Wall te permite controlar el acceso al contenido de tu sitio de Webflow. Hay dos modos:
- Secure entire page (Proteger toda la página) - bloquea el acceso a la página completa. Los visitantes que no han pagado son redirigidos a la página de inicio de sesión/compra de Easytools.
- Secure page sections (Proteger secciones de la página) - muestra u oculta secciones concretas según el estado de suscripción del visitante. Tanto los visitantes de pago como los gratuitos pueden ver la página, pero ven contenido distinto.
Ambos modos usan un script colocado en el campo Custom code de la configuración de página de Webflow, y un producto en Easytools que actúa como puerta de acceso.
3. Proteger una página completa
Paso 1 - consigue el script desde Easytools:
- En Easytools, ve a Store → Products (Tienda → Productos).
- Abre el producto que debe dar acceso a la página protegida.
- Haz clic en el icono de candado (Gate content / Proteger contenido) en la parte superior de la página del producto.
- Haz clic en Secure entire page.
- Haz clic en Copy code (Copiar código).
Paso 2 - añade el script a la configuración de la página en Webflow:
- En el Webflow Editor, abre el panel Pages en la barra lateral izquierda.
- Pasa el cursor sobre la página que quieres proteger y haz clic en Edit page settings (el icono de engranaje que aparece).
- Baja hasta la sección Custom code.
- Pega el script en el campo Inside tag.
- Haz clic en Save.
- Publica tu sitio para que el cambio surta efecto.
Los visitantes que no han pagado y que intenten acceder a la página serán redirigidos de inmediato a Easytools, donde podrán iniciar sesión o comprar el acceso. Los clientes de pago verán la página sin ninguna interrupción.
4. Proteger secciones de la página
El bloqueo por secciones te permite mostrar contenido distinto a distintos visitantes en la misma página, sin bloquear el acceso a la página en sí. Tienes que hacer dos cosas: añadir el script a la página y luego marcar cada sección con el atributo correspondiente.
Paso 1 - consigue el script desde Easytools:
- En Easytools, ve a Store → Products (Tienda → Productos).
- Abre el producto que debe actuar como puerta de acceso.
- Haz clic en el icono de candado (Gate content / Proteger contenido) en la parte superior de la página del producto.
- Haz clic en Secure page sections.
- Haz clic en Copy code (Copiar código).
Paso 2 - añade el script a la configuración de la página en Webflow:
- En el Webflow Editor, abre el panel Pages.
- Pasa el cursor sobre la página y haz clic en Edit page settings.
- Ve a Custom code y pega el script en el campo Inside tag.
- Haz clic en Save.
Paso 3 - añade atributos a tus secciones:
Para cada sección de la página, decide si debe ser visible para clientes de pago, visitantes gratuitos o todos. Después añade el atributo personalizado correspondiente en Webflow:
- En el Webflow Editor, haz clic en la sección que quieres bloquear.
- En el panel derecho, abre la pestaña Settings.
- Busca la sección Custom attributes y añade un nuevo atributo:
- Para contenido visible solo para clientes de pago: Name = data-paid, Value = true
- Para contenido visible solo para visitantes gratuitos: Name = data-free, Value = true
- Repite para cada sección que quieras bloquear.
- Publica tu sitio para que los cambios surtan efecto.
Solo las secciones marcadas explícitamente con data-paid o data-free se ven afectadas por el script. Cualquier sección sin uno de estos atributos será visible para todos los visitantes, sin importar su estado de suscripción.
5. Probar Login Wall
Para probar tu configuración de Login Wall:
- Asegúrate de que tu sitio de Webflow esté publicado - Login Wall solo funciona en el sitio en producción, no en la vista previa del Webflow Editor.
- Para probar la experiencia sin acceso o como visitante gratuito: abre la página protegida en una ventana de Incógnito / Privada. Para la protección de página completa deberías ser redirigido; para el bloqueo por secciones deberías ver solo las secciones marcadas con data-free.
- Para probar el acceso como cliente de pago: abre la página en un navegador donde tengas la sesión iniciada en Easytools con el producto comprado. La protección de página completa debería dar acceso; el bloqueo por secciones debería mostrar las secciones marcadas con data-paid.