Terminar de configurar Memberstack

Hola chicos ¿Qué tal?

Seguimos con el curso de como crear nuestra primera suscripción Carrd y con Memberstack.

En esta ocasión vamos a ver como configurar los diferentes botones que nos faltan.

Empezaremos con Mi Perfil.

Carrd Mi Perfil

Mi perfil es un botón a través del cual los usuarios que estén "logueados" puedan ver tanto el producto que tienen contratado, como cerrar la cuenta como ver los datos propios.

Para que veáis a lo que nos referimos, si no vamos a nuestra demo modelo y hacemos clic sobre Mi Perfil.

Carrd Mi Perfil

Nos salta el Popup con los datos del plan que ha comprado el usuario.

Pop up memberstack

También nos aparecen los datos del perfil del usuario

Perfil usuario memberstack

Así como las opciones para darse de baja, actualizar el mail, cambiar la contraseña o incluso cancelar el producto contratado.

¿Cómo se hace esto?

Veréis que se hace de una manera muy fácil.

Para ello nos vamos a Memberstack, y allí no vamos a "Forms & Fields".

Memberstack form 6 Fields

Donde seleccionaremos Profile.

Memberstack profile

Y nos aparecerá el enlace que debemos de pegar en nuestro botón de perfil. Y lo copiamos.

Memberstack codigo profile

Nos volvemos a Carrd. Seleccionamos el botón de mi perfil. Quitamos el texto de prueba que estaba en la URL y pegamos el anterior (#ms-profile).

Carrd Renombramos URL Mi Perfil

Hacemos clic en Done (Parte inferior del panel de la izquierda)

Carrd Done

Y guardamos (parte superior derecha sobre la disquete).

Carrd Guardamos

De esta manera ya tendríamos preparado nuestro botón de Mi Perfil.

Otra de las cosas que venimos arrastrando desde el principio son los dos menús. Por lo que vamos a ver como podemos esconder uno de ellos.

Esto lo podemos hacer a través de sus atributos.

Si volvemos a Memberstack vemos que hay un contenido que solo pueden ver los usuarios que han pagado, "Members Only Content".

Memberstack Members Only Content

Si hacemos clic aquí veremos que nos indica qué elementos queremos que solo vean los miembros prémium.

Memberstack codigo para solo suscriptores

Además de todo esto, también tenemos todos los atributos que nos da Memberstack para que nosotros los podamos usar.

Atributos memberstack

Vamos a usar un par de estos atributos para poder esconder el menú dependiendo del usuario que sea.

¿A qué nos referimos?

Primero vamos a ver el menú que van a ver las personas que no estén "logueadas".

Para ello seleccionaremos el contenedor que tenga los botones que queremos esconder para las personas "logueadas", luego vamos a "Settings" y aquí en "Attributes" pondremos ms-hide-element=true

Carrd Escondemos botones

Con lo que acabamos de hacer, cuando el usuario sea prémium esta botonera va a desaparecer.

Por lo que damos a guardar.

CArrd Guardar

Y vemos una prueba. Cuando me "logueo", veremos que solo aparece un menú.

Carrd 1 menu

Vemos que esto funciona.

Ahora tendremos que hacer lo mismo pero al revés, es decir, que cuando el usuario no esté "logueado" no le aparezca la botonera normal.

Esto lo haremos con otro código.

Procederemos de la misma manera que hicimos antes, seleccionamos el contenedor que tiene los botones que queramos que desaparezcan.

Y en la opción "Settings", en "Attributes" pondremos el código ms-hide=pro

Carrd ocultamos botonera

Y guardamos.

Carrd Guardar

Si hemos hecho todo de manera correcta, si hacemos una prueba, solo nos debe de aparecer un menú en todos los caos, si estoy "logueado" me debe aparecer un menú y si no lo estoy nos debe aparecer el otro.

Si hacemos la prueba veremos que si no estoy "logueado".

Carrd sin loguear

Hago clic para "loguearme".

Carrd me logueo

Me "logueo".

Carrd Loguearme

Y veremos como también solo me aparecerá una sola botonera.

Carrd una botonera

Así que como veis funciona estupendamente.

Por último solo nos falta darle funcionalidad al botón de "Darme de alta 99€/año", para darle funcionalidad a toda nuestra página.

Carrd darme de alta

Para hacer esto, le pondremos el mismo enlace que hemos puesto en el resto de botones y que hemos usado para suscribirnos.

Así que nos vamos a dentro de Carrd, y seleccionamos cualquiera de esos botones que ya hemos utilizado.

Por lo que ahora seleccionamos el botón al que le queríamos dar funcionalidad, y le pegamos en URL el código de precio.

Carrd Código precio

Guardamos.

Carrd Guardamos

Ahora ya sí tenemos creada nuestra página de suscripción.

Es verdad que es una página muy sencillita, pero daros cuenta de que en Mi Cuenta podríamos haber generado contenido de valor.

Si queremos pasar de hacer la prueba a utilizar Memberstack de verdad, necesitaríamos cambiar el modo trial al modo de pago.

cambiar modo de memberstack

Si os gusta Memberstack podemos hacer muchas cosas más.

Otra de las cosas que podemos hacer, es configurar la pasarela de pago, que ahora como lo tenemos de prueba no se podría.

Pero para hacerlo es algo tan sencillo como hacer clic en Settings y aquí hacer clic en "Connect to Stripe".

memberstack conectar con Stripe

Y aunque no lo vayamos a hacer ahora, para que veáis cuál es el camino.

Memberstack conect con stripe

Tan solo habría que hacer clic en "Create or Connect a Stripe Account" iría a vuestra cuenta de Stripe y lo conectaríamos. De esta forma, ya conectarían de verdad los pagos.

En Memberstack podemos ver muchas cosas.

Si hacemos clic en "Members".

Memberstack miembros

Veremos los miembros que se han suscrito, en este caso tan solo veremos los miembros de prueba.

Son muchísimas las opciones que nos permite este servicio.

Uno de los objetivos con este curso es acercaros herramientas fuera de WordPress para poder hacer nuestra propia página de suscripción.

¡Esperamos que os haya gustado!

¡Que os haya roto la cabeza!

Y sobre todo, si os ha gustado hacédnoslo saber para poder hacer un curso más avanzado de Memberstack.

¡Nos vemos en el siguiente curso!

Temario

Introducción
Introducción
6:10
Preparar la Web hecha en Carrd
Preparar la Web hecha en Carrd
25:02
Configurar Memberstack en Carrd
Configurar Memberstack en Carrd
12:06
Terminar de configurar Memberstack
Terminar de configurar Memberstack
9:22