Framer

Resumen

En esta documentación veremos cómo conectar Easytools con Framer de dos formas distintas:

1. Framer como landing page - Tienes tus productos en Easytools y Framer es tu página de aterrizaje principal. También puedes añadir herramientas adicionales de Easytools, como Buy Me a Coffee, Tickers, secciones de precios, testimonios y más.
2. Contenido protegido en Framer - Usa un muro de acceso (login wall) para tener tu contenido en Framer mientras lo mantienes protegido frente a accesos no autorizados.

Usar Framer como tu landing page con productos en Easytools es una solución muy sencilla y segura. Tienes todo, todos tus productos, en Easytools, así que no es posible ningún acceso no autorizado, y sigues teniendo Framer como tu bonita landing page principal.

Esta documentación cubre solo algunas herramientas seleccionadas de Easytools. Hay más herramientas disponibles en tu cuenta de Easytools. Para ver el alcance completo, revisa tu panel de Easytools.

Añadir herramientas sigue un enfoque estandarizado:

• Si es un script: ve a Site Settings → Custom Code (configuración del sitio → código personalizado) en Framer y pégalo ahí.
• Si es un iframe/embed: usa el elemento Embed en el diseño de tu página de Framer.

Parte 1: Framer como landing page

Mira el videotutorial sobre cómo enlazar productos, Storefront, widgets y embeds:

1. Enlazar productos individuales

Cuando tienes productos en Easytools y Framer es tu landing page, puedes enlazar botones directamente a las páginas de checkout de tus productos.

1. Ve a Easytools y navega a Store → Products (tienda → productos).
2. Busca el producto que quieres compartir.
3. Haz clic en el botón Share (compartir) y selecciona Copy link to checkout (copiar enlace al checkout).
4. En Framer, selecciona tu elemento de botón.
5. Pega el enlace copiado en el campo de enlace del botón.

¡Y ya está! Cuando los usuarios hagan clic en el botón, irán directamente al checkout de Easycart de ese producto.

2. Enlazar al storefront

Si quieres enlazar a una página completa con todos tus productos (tu portafolio), puedes usar la función Storefront.

1. Ve a Easytools y navega a Store (tienda).
2. Busca la sección Storefront.
3. Puedes editar qué productos se muestran en tu Storefront: añadir o eliminar según lo que necesites.
4. Copia el enlace del Storefront.
5. En Framer, crea un botón (por ejemplo, “Ver nuestros productos”) y pega el enlace del Storefront.

Los usuarios que hagan clic en este botón verán todo tu portafolio de productos de Easytools.

3. Añadir el widget Buy Me a Coffee

El widget Buy Me a Coffee permite a tus usuarios donar una pequeña cantidad para tu causa. Así se añade:

1. En Easytools, primero necesitas un producto vinculado a la donación. Ve a Store → Products (tienda → productos) y crea o selecciona un producto de tipo “Buy me a coffee”.
2. Ve a la sección Websites → Donation (sitios web → donación).
3. Selecciona o crea un nuevo widget de donación.
4. Personaliza el estilo, los colores, el tema y el tamaño, y la posición (puedes colocarlo en cualquier esquina de tu página).
5. Haz clic en el botón Copy code (copiar código): es un script corto.
6. En Framer, ve a Site Settings → Custom Code (configuración del sitio → código personalizado).
7. Haz clic para añadir un nuevo código personalizado.
8. Ponle un nombre (por ejemplo, “Coffee”), fija la posición en End of (final de head), ejecútalo Once (una vez) y aplícalo a All pages (todas las páginas).
9. Pega el código del script y guarda.

4. Añadir tickers (prueba social)

Los tickers muestran a tus visitantes información sobre compras recientes: es prueba social pensada para impulsar el engagement y traer más clientes.

1. En Easytools, ve a Websites → Social Proof (sitios web → prueba social) (Tickers).
2. Configura los ajustes de tu ticker.
3. Haz clic en Copy code (copiar código).
4. En Framer, ve a Site Settings → Custom Code (configuración del sitio → código personalizado).
5. Añade una nueva entrada de código personalizado (puedes combinarla con el script de Coffee en una sola entrada, por ejemplo, “Tickers + Coffee”).
6. Pega el script del ticker y guarda.

Puedes combinar varios scripts en una sola entrada de Custom Code. Por ejemplo, llámala “Tickers + Coffee” e incluye ambos scripts. Configúrala para que se ejecute en All pages (todas las páginas) para que los widgets aparezcan en todo tu sitio.

5. Incrustar secciones de precios

Las secciones de precios son elementos incrustados (iframes), no scripts. Así se añaden:

1. En Easytools, ve a Websites → Pricing Sections (sitios web → secciones de precios).
2. Selecciona o crea tu sección de precios (puedes tener opciones mensuales o anuales, personalizar estilos para que combinen con tu sitio, cambiar cabeceras, etc.).
3. Haz clic en Copy embed code (copiar código de embed).
4. En Framer, ve a la vista Layers donde quieres añadir los precios.
5. En el menú Insert (insertar), busca y añade un elemento Embed.
6. Selecciona el elemento embed y asegúrate de elegir HTML (no URL).
7. Pega el código de embed.

La sección de precios se cargará y se mostrará en tu página de Framer.

6. Incrustar testimonios (wall of love)

Los testimonios funcionan igual que las secciones de precios: son elementos incrustados.

1. En Easytools, ve a Websites → Testimonials (sitios web → testimonios) (Wall of Love).
2. Personaliza la visualización de los testimonios como quieras.
3. Haz clic en Copy embed code (copiar código de embed).
4. En Framer, añade un elemento Embed desde el menú Insert.
5. Selecciona el modo HTML y pega el código de embed.

Recuerda la diferencia:

• Scripts (Buy Me a Coffee, Tickers) - ve a Site Settings → Custom Code (configuración del sitio → código personalizado).
• Embeds (precios, testimonios) - usa el elemento Embed en el diseño de tu página.

Parte 2: muro de acceso (contenido protegido)

El muro de acceso (Login Wall) te permite tener contenido en Framer que está protegido: solo las personas que hayan comprado el acceso en Easytools pueden verlo.

Mira el videotutorial sobre la configuración del muro de acceso:

7. Configurar el muro de acceso en Easytools

1. En Easytools, ve a Store → Products (tienda → productos).
2. Selecciona el producto que debe dar acceso al contenido protegido (por ejemplo, “Yoga Fundamentals Video Course”).
3. Haz clic en el icono de candado Gate content (proteger contenido) (arriba a la derecha, junto a otros iconos).
4. Selecciona Secure page sections or secure entire page (proteger secciones de la página o proteger toda la página) (en el videotutorial cubrimos la protección de secciones).
5. Activa Create asynchronous script (crear script asíncrono): esto es importante por cómo funciona Framer.
6. Copia todo el código generado.

8. Añadir el script del muro de acceso a Framer

1. En Framer, ve a Site Settings → Custom Code (configuración del sitio → código personalizado).
2. Añade una nueva entrada de código personalizado.
3. Ponle un nombre (por ejemplo, “Login Wall”).
4. Fija la posición en End of (final de head).
5. En el ajuste de página, selecciona solo la página específica que debe protegerse (por ejemplo, “/class”).
6. Pega el código de Easytools.
7. Guarda los ajustes.

9. Crear el archivo de código personalizado en Framer

También necesitas crear un archivo de código personalizado en Framer Assets para habilitar los code overrides:

1. En Framer, ve a Assets.
2. Crea un New Code File (nuevo archivo de código).
3. Ponle el nombre Easytools_login_wall.tsx.
4. Pega el siguiente código:

Guarda el archivo.

10. Aplicar los code overrides

1. Ve a tu página protegida (por ejemplo, “/class”).
2. Crea dos secciones o elementos:
   • Uno para usuarios gratuitos (por ejemplo, “Member only area” - se muestra cuando NO ha iniciado sesión).
   • Uno para clientes de pago (por ejemplo, “Congrats, you have access” - se muestra cuando ha iniciado sesión).
3. Selecciona el elemento para clientes de pago.
4. En el panel derecho, busca Code Overrides.
5. En el desplegable, selecciona Easytools_login_wall (el archivo que creaste).
6. Elige withIDpaid: esto mostrará este elemento solo a los clientes de pago.
7. Selecciona el elemento para usuarios gratuitos.
8. Aplica el override withIDfree: esto mostrará este elemento solo a los usuarios gratuitos (que no han pagado).

11. Probar el muro de acceso

Para probar la configuración de tu muro de acceso:

1. Publica tu sitio de Framer.
2. Como cliente de pago con sesión iniciada, deberías ver el contenido “Congrats, you have access”.
3. Abre una ventana de Incógnito/Privada para probar como usuario sin sesión iniciada.
4. En modo incógnito, deberías ver el contenido “Member only area” en su lugar.