Crea un membership site en Webflow con Memberstack (Tutorial completo)

Webflow está genial.

Sin embargo, no puedes crear una zona privada para que los usuarios se puedan registrar en tu web y acceder a contenido exclusivo.

Es por eso que aparece Memberstack, para añadir una capa de suscripciones a cualquier página web (en este caso en Webflow), simplemente insertando una línea de código - y preparando un par de cosas - dentro de tu página.

En este tutorial integraremos Memberstack en Webflow, paso a paso (y en muy poco tiempo).

Debes saber que Membrestack es gratis para hacer pruebas y montar toda tu plataforma, pero si quieres usuarios reales, tendrás que pagar 39€/mes. Just saying.

Por cierto, en este tutorial únicamente incluiremos lo básico, en futuros tutoriales hablaremos sobre cómo crear una base de clientes con Airtable y crear dashboards personalizados.

¿Qué vamos a crear?

• Crearemos una cuenta en Memberstack
• Configuraremos las membresías en Memberstack
• Integraremos con Webflow mediante código en el head
• Crearemos un formulario de registro con un enlace modal
• Crearemos un formulario de iniciar sesión
• Ofreceremos un botón para hacer Logout
• Integraremos con los fomularios nativos de Webflow

Antes de empezar:

Antes de poder empezar con Memberstack hay una serie de páginas que tienes que crear en tu sitio de Webflow:

• Página de registro: Una página en la que tengas un formulario en la que se puedan registrar los usuarios, pidiendo los datos (en este caso nombre y correo)
• Página de login: Una página en la que los usuarios puedan hacer login una vez que están registrados.
• Tener un plan de pago: Para poder incrustar la línea de código que necesita Memberstack es necesario que tengas un plan de pago en tu cuenta de Webflow.
• Contenido que quieras restringir: Al menos una página que quieras que los usuarios no puedan acceder si no están registrados.

Yo he creado de ejemplo las páginas que puedes ver en Nocodehackers.es/memberstack/tutorial

Creando la cuenta en Memberstack

El primer paso es crear la cuenta gratuita en Memberstack. Para ello, vete a la página: y crea una cuenta. Totalmente gratis.

Una vez que estés dentro, tendrás que crear un nuevo proyecto, y seleccionar cómo está construido la web. En nuestro caso, con Webflow.

Aparecerá un menú en el que puedes seleccionar las opciones para crear tu membresía. Tendrás que darle un nombre, y seleccionar si quieres aceptar o no pagos por tu suscripción. En este caso, vamos a hacer una suscripción gratuita, aunque de pago es igual de fácil.

Entraremos al "Dashboard" o menú de Memberstack, en el que ya nos guiará por el proceso de creación de una suscripción en Memberstack. Los pasos son realmente sencillos:

• Crea una membresía
• Instala el código.

Creando la membresía

Haciendo click en el botón de Create a Membership - o yendo a la sección de memberships a la izquierda (https://app.memberstack.io/memberships) , entrarás al menú en el que puedes crear las membresías.

Haz click en New Membership y se te abrirá la página en la que puedes configurar la membresía, tanto de pago como gratis - como puedes ver el primer paso es innecesario decidirse ya que luego puedes crear distintos modos. Puedes personalizar en el plan de pagos desde el precio, la frecuencia de la suscripción, si dispone de una prueba gratuita, impuestos, tasa por instalación.... lo que quieras.

Como para el ejemplo va a ser una suscripción gratuita, de momento estas opciones no nos interesan - Si tienes dudas sobre la parte de pagos, lo trataremos en otro post .

Definiendo el contenido sólo para miembros

Ahora es donde vamos a lo importante.

En esta sección podrás encontrar un botón que pone Hide Content. En esa opción tendrás que incluir todas las url a las que quieres restringir el acceso a los miembros de esta suscripción. Sin embargo, para páginas que tienen una estructura común, eso es realmente sencillo.

Haz click en Hide Content, y añadiremos una página que queremos ocultar.

Debemos proporcionar un Content Name, que es un identificativo interno del tipo de restricción que estamos haciendo, y añadir todas las URL que queramos ocultar. Para ello simplemente tienes que añadir la url en el campo de Hidden URL. Tienes dos opciones, en el desplegable de la derecha:

• Starts with, que restringe todas las páginas que empiecen con una url específica, muy útil para restringir por ejemplo lecciones de un curso, o contenido que esté dentro de una categoría.

                   Imagínate un curso que tiene 2 lecciones con una estructura tal que así.

                               xxxxx.com/cursos/airtable/lección-1

                               xxxxx.com/cursos/airtable/lección-2

Para este tipo, tendríamos que añadir todo lo que está a la derecha de tu dominio. En este caso tendríamos que introducir: cursos/airtable/ y ya bloquearía todas las lecciones que tengan esa estructura de url.

• Equals, que restringe URL que coincidan exactamente.

Esto será lo que utilizamos y pondremos la URL que queremos restringir, en este caso, la url completa es https://nocodehackers.es/memberstack/contenido-exclusivo

En el campo de Access Denied URL, pondremos una url a la que queramos que los usuarios sean redirigidos si no tienen acceso, en este caso la página de Login.

Hacemos click en Create, y estará configurado correctamente.

Redirigiendo a los usuarios

Para este caso, queremos que después de que hagan login los dirijamos a la página del contenido exclusivo, para que disfruten de su contenido desde el primer minuto. También puedes usar el # para que lleve a la home por defecto.

Una vez todo configurado - los pasos son los mismos si es de pago - haz click en Create Membership y estará todo listo.

Instalando el código en el Head de tu web

Ahora deberás insertar el código en el <head> de tu web para que Memberstack pueda funcionar correctamente.

Para ello, simplemente vete al dashboard, y haz click en Install header code (El punto que te falta por cumplir)

Te proporcionará un código, que debes pegar en el <head> de la web, que se encuentra en los ajustes de proyecto de Webflow. Copia ese código.

Para acceder a los ajustes del proyecto, debes ir a tu dashboard de Webflow y seleccionar tu proyecto, haciendo click en los tres puntitos de la parte inferior del proyecto, y haciendo click en Settings.

Deberás ir a la sección de Custom Code, y pegar en la parte superior del código para que funcione correctamente:

Guarda cambios y publica la página.

A partir de ahora, si intentas acceder a las páginas que has definido como Contenido exclusivo (oculto), te redirigirá a la página de registro.

Configurando los formularios de registro e Inicio de sesión

Para que un miembro se pueda registrar en Memberstack, es necesario configurar un par de detalles en los formularios de Webflow.

Para ello vete al apartado de Forms & Fields.

Al usuario le pediremos su nombre, email y contraseña. Por lo que deberemos crear un Custom Field en el que pongamos su nombre.

Ahora hay dos opciones para poder integrar Memberstack.

Crear un modal que te permita utilizar la interfaz de Memberstack, o utilizar tus propios formularios a los que personalices.

Para empezar, vamos a ir al primer paso, y comprobar que todo funciona:

Integrando con un popup (más fácil)

Simplemente, vete a la sección de memberships, y verás que tienes un botón verde que pone Signup link.

Cópialo, y añádelo a tu página de Registro, con el formato www.tuweb.com/XXXXXXXXXXXXX en un botón que ponga Registro.

Publica, y ya te podrás registrar. Al hacer click en ese botón, aparecerá un modal en el que podrás registrate en tu web.

¡Listo!

Ya te puedes registrar utilizando Memberstack en tu web. Ahora vamos a hacer que puedas iniciar sesión.

Iniciando sesión en la web una vez registrado

Una vez que ya te has registrado, tendrás que poder volver a iniciar sesión.

Para ello, vuelve a la página de Forms & Fields y selecciona en la barra de navegación superior el formulario de Login.

Simplemente, igual que acabas de hacer en el paso anterior copia el Login Link que te proporcionan y añádeselo a tu web.

¡Y listo! Ahora tus usuarios pueden iniciar sesión en tu web.

Además, puedes incluir este enlace en distintas partes de tu web en las que te interese que tu usuario pueda iniciar sesión.

(No te olvides de publicarlo)

Permitiendo a los usuarios que hagan logout

El último paso que nos queda es que los usuarios puedan hacer logout en la web una vez que inicien sesión.

Para ello, vuelve a la sección de Forms&Fields y selecciona Navbar.

En este menú hay un par de opciones interesantes, como que puedas pasar atributos a distintos elementos de la página para que se vean / oculten en función de si están registrados o no, pero eso ya lo veremos.

De momento nos interesa el apartado de Logout link.

Igual que antes, copiamos y pegamos en un botón que queramos que nuestros usuarios utilicen para hacer logout en nuestra web.

¡Y todo listo!

Ahora un usuario puede Registrarse, Iniciar sesión y hacer logout, con lo que ya tendremos todo listo para nuestro membership site.

Sin embargo, puede que la interfaz de Memberstack no sea de tu agrado. Es por eso que puedes personalizar el formulario de registro para hacer la experiencia más personalizable.

Vamos a verlo.

Utilizando los formularios de Webflow

Para poder usar los formularios de Webflow como registro en Memberstack, tienes que ir a la sección de Forms&Fields, y en la sección de abajo seleccionar la opción: Build a custom signup form

Ahora simplemente vete a Webflow, y selecciona el formulario que hayas creado para el registro en memberstack - que debe tener los campos que has configurado en Memberstack anteriormente, y en los ajustes verás que tienes una opción para añadir atributos.

Asegúrate que no seleccionas el módulo de "Form Block", si no que estás en el módulo de Form, y vete a la sección de Ajustes.

Ahí encontrarás una sección de "Custom Attributes", en la que podrás añadir los datos que te pide que añadas anteriormente en Memberstack. Copia y pega.

Ahora es necesario que vayamos campo por campo del formulario añadiendo atributos de la misma manera.

Añadiendo los atributos a los campos del formulario

Para obtener los atributos, simplemente haz click en el rayo verde que tiene a la derecha cada campo, que te desplegará los atributos que tienes que insertar.

De la misma manera que hicimos antes, deberemos ir a cada campo del formulario y pegar estos atributos.

Asegúrate de que cada campo tiene el valor correcto, publica y tu formulario de registro estará listo.

Comprobando que funciona correctamente

Si haces click en el botón de Test Signup page, te pedirá que conectes un dominio de testing. Este dominio debe ser la versión .webflow.io de tu sitio (si no no lo reconocerá correctamente). Una vez añadido, testeará que todo está correcto y habrás terminado.

Introduce la url que utilizarás para hacer sign up y estarás listo. Se pasará el test y comprobaremos que todo está correcto.

Cosas extra que puedes hacer

Lo genial de Memberstack es que tiene una biblioteca de páginas completamente clonables y personalizables para que puedas empezar tu proyecto de manera rápida y sencilla, sin tener siquiera que tener una página web ya hecha.

Además, incluyen formularios ya prediseñados para que no tengas que pasar tú el trabajo.

https://memberstack.webflow.io/filter/login

¡Y listo! Puedes hacer lo mismo para el formulario de Login, en vez del link, pero es exactamente igual que el de registro.

Memberstack es realmente potente para construir servicios de suscripciones sobre Webflow, ya que si lo hacemos todo de manera seguida, no tardas ni 15 minutos en tener el sistema listo, y las posibilidades son infinitas.

En próximos tutoriales veremos cómo podemos utilizar Zapier para añadir potencia a este sistema.

‍

‍