Integración con Squarespace
En esta documentación veremos cómo conectar Easytools con Squarespace de dos formas distintas:
- Squarespace como landing page - tus productos están en Easytools y Squarespace funciona como tu landing page principal. También puedes añadir otras herramientas de Easytools, como Buy Me a Coffee, Tickers, secciones de precios, testimonios y más.
- Contenido protegido en Squarespace - usa Login Wall (muro de acceso) para bloquear páginas concretas, de modo que solo los clientes de pago puedan verlas.
¿Por qué usar este enfoque? Usar Squarespace como landing page con los productos en Easytools es una solución simple y segura. Tienes todo - todos los productos - en Easytools, así que no es posible el acceso no autorizado, y sigues teniendo Squarespace como tu landing page principal.
Requisito de plan de Squarespace Añadir código personalizado (scripts y Code Injection) requiere el plan Core o superior en Squarespace (planes: Basic, Core, Advanced). Asegúrate de que tu plan lo permite antes de seguir los pasos siguientes.
Añadir herramientas sigue un enfoque estandarizado
- Si es un script - usa Code Injection de Squarespace (para todo el sitio o por página) y pégalo en el campo Header.
- Si es un iframe/embed - añade un Code Block directamente en el diseño de tu página y pega ahí el código de embed.
Parte 1: Squarespace como landing page
Mira el video tutorial sobre cómo enlazar productos, scripts y embeds:
1. Vincular productos individuales
Cuando tienes productos en Easytools y Squarespace es tu landing page, puedes enlazar botones directamente a las páginas de pago (checkout) de tus productos.
- Ve a Easytools y navega a Store → Products (Tienda → Productos).
- Busca el producto que quieres compartir.
- Haz clic en el botón Share (Compartir) y selecciona Copy link to checkout (Copiar enlace de pago).
- En Squarespace, edita el elemento de botón en tu página.
- Haz clic en el icono de enlace, elige External (Externo) y pega el enlace copiado.
- Haz clic en Apply (Aplicar) y guarda.
Cuando los usuarios hagan clic en el botón, irán directamente a la pasarela de pago de Easycart para ese producto.
2. Enlazar a la tienda (storefront)
Si quieres enlazar a una página completa con todos tus productos, puedes usar la función Storefront (Escaparate/Tienda).
- Ve a Easytools y navega a Store (Tienda).
- Busca la sección Storefront.
- Edita qué productos se muestran - añade o quita los que necesites.
- Copia el enlace de Storefront.
- En Squarespace, crea un botón (por ejemplo, “Ver nuestros productos”) y pega el enlace de Storefront como enlace externo.
Los usuarios que hagan clic en este botón verán todo tu catálogo de productos de Easytools.
3. Añadir herramientas basadas en scripts
Cualquier herramienta de Easytools que proporcione una etiqueta se añade mediante Code Injection de Squarespace. Esto aplica a widgets como Buy Me a Coffee (Easycoffee), Social Proof Tickers y Cookie Consent (Easycookie) - el proceso es el mismo para todos.
- En Easytools, abre la herramienta que quieres añadir.
- Configúrala a tu gusto y haz clic en Copy code (Copiar código) para copiar el script.
- En Squarespace, elige dónde añadirlo:
- En todo el sitio (en cada página): en el panel Pages (Páginas), baja hasta el final y haz clic en Custom Code → Code Injection, luego pega en el campo Header.
- Solo en una página: pasa el cursor sobre la página en el panel Pages, haz clic en el icono de engranaje → pestaña Advanced y pega en el campo Page Header Code Injection.
- Haz clic en Save (Guardar).
Puedes apilar varios scripts - pega varios scripts en el mismo campo Header, uno detrás de otro. No necesitas entradas separadas.
4. Insertar contenido (iframes)
Cualquier herramienta de Easytools que proporcione un código de embed (iframe) se coloca directamente en el editor de la página como un bloque. Esto aplica a las secciones de precios (Easyoffer), los testimonios (Easylove), las páginas legales y el footer - el proceso es el mismo para todos.
- En Easytools, abre la herramienta que quieres insertar.
- Configúrala y haz clic en Copy embed code (Copiar código de embed).
- En Squarespace, abre el editor de la página y haz clic en + para añadir un nuevo bloque.
- Elige Code, pega el código de embed y haz clic en Apply (Aplicar).
- Guarda la página.
Alternativa: bloque Embed
También puedes usar un bloque Embed en lugar de un bloque Code (útil, por ejemplo, en el footer del sitio). Al usar Embed: haz clic en Edit (Editar), elige Code snippet (no “Link”) y pega el código ahí.
Recuerda publicar los cambios en Easytools
Cualquier cambio que hagas en Easytools debe estar publicado (published) antes de que aparezca en tu sitio de Squarespace. Si no publicas, los visitantes no verán las actualizaciones.
Parte 2: Login Wall (contenido protegido)
Login Wall te permite proteger páginas concretas en Squarespace - solo las personas que hayan comprado acceso en Easytools podrán verlas. Los visitantes sin acceso son redirigidos automáticamente a la página de inicio de sesión de Easytools, donde pueden iniciar sesión o comprar el producto.
Mira el video tutorial sobre cómo configurar Login Wall:
5. Configurar Login Wall en Easytools
Para proteger una página concreta, primero tienes que copiar el script de Login Wall desde tu producto de Easytools.
- En Easytools, ve a Store → Products (Tienda → Productos).
- Selecciona 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.
- Selecciona Secure entire page (Proteger toda la página).
- Copia el código del script generado.
6. Añadir el script de Login Wall a Squarespace
El script de Login Wall debe añadirse a la página concreta que quieres proteger, no a todo el sitio.
- En Squarespace, ve al panel Pages (Páginas).
- Pasa el cursor sobre la página que quieres proteger y haz clic en el icono de engranaje.
- Ve a la pestaña Advanced.
- Pega el script de Easytools en el campo Page Header Code Injection.
- Haz clic en Save (Guardar).
Repite este paso para cada página que quieras proteger. Cada página puede enlazarse a un producto distinto si lo necesitas.
Importante: editar una página protegida
Una vez que el script de Login Wall está activo en una página, Squarespace bloqueará el editor de la página - verás una advertencia EMBEDDED SCRIPTS y no podrás editar el contenido directamente.
Solución temporal: ve a la configuración de la página (icono de engranaje → Advanced → Page Header Code Injection), elimina el script, guarda y edita la página. Cuando termines de editar, vuelve a añadir el script. Ten en cuenta que mientras el script está eliminado, la página es públicamente accesible - trabaja rápido.
7. Probar Login Wall
Para probar tu configuración de Login Wall:
- Asegúrate de que tu sitio de Squarespace esté publicado (Login Wall no funciona en modo de vista previa).
- Para probar la experiencia sin acceso: abre la página protegida en una ventana de Incógnito / Privada - deberías ser redirigido a la página de inicio de sesión/compra de Easytools.
- Para probar el acceso con una compra válida: cierra sesión temporalmente en Squarespace en tu navegador normal (donde tienes la sesión iniciada en Easytools/Easycart con el producto comprado). Visita la página protegida - deberías tener acceso.
- Vuelve a iniciar sesión en Squarespace cuando termines.
¿Por qué no usar simplemente la vista previa de Squarespace?
Cuando tienes la sesión iniciada en Squarespace como propietario del sitio y visitas la URL de la página en producción, Squarespace te redirige automáticamente a la interfaz de edición - no puedes ver la página publicada como un visitante normal. Esto es una limitación de Squarespace. Cerrar sesión en Squarespace (o usar el modo incógnito) es la única forma fiable de ver lo que ven los visitantes normales.