Configurar Memberstack en Carrd

Darse de alta en Memberstack

Hola chicos ¿Qué tal?

Seguimos con el curso de como hacer una suscripción con Carrd y Memberstack. En el día de hoy vamos a ver la parte de Memberstack. Que como podréis ver nos lo pondrá muy sencillo para poderlo hacer, y digamos que el trabajo más arduo ya lo tenemos hecho, porque es la creación de la página.

pagina en Carrd

Ahora vamos a ver una parte que quizás nos parezca más rara porque no la hemos hecho nunca, pero es mucho más fácil porque Memberstack nos lo da prácticamente "mascado".

En primer lugar, nos hace falta una cuenta en Memberstack.

Cuenta en memberstack

Os podéis dar de alta gratis, no tenéis que pagar nada si queréis probar su versión de prueba, solo si queréis que sea real sí que tiene un coste como vimos en el primer tutorial de este curso, pero como decimos desde su versión de prueba la podemos usarla tranquilamente sin pagar nada para hacer este tutorial.

De hecho, no requiere ni tarjeta de crédito ni ninguna otra cosa por el momento.

Nosotros como tenemos cuenta nos vamos a "loguear".

Log in memberstack

Como veréis, en nuestro caso, tenemos varias cuentas con las que tenemos diferentes proyectos.

Memberstack sites

En este caso vamos a añadir un nuevo WebSite.

Memberstack añadimos Website

Como veis, al hacer clic en esta opción, nos salen diversas plataformas con las que podemos trabajar, siendo una de ellas Carrd, que será la que elegiremos.

Memberstack seleccionamos Carrd

Cuando seleccionamos Carrd, nos solicita pongamos el nombre, así como otros datos tales como si vamos a aceptar pagos, así como la moneda que vamos a usar, etc.

Memberstack Add a New WebSite

Una vez hecho lo anterior, hacemos clic en "Let´s go" y nos aparecerá la siguiente página.

Memberstack Checklist

En esta página nos mostrará una especie de checklist con los pasos que debes de seguir.

Setup checklist

El primer paso (que sería crear un Website) ya estaría realizado.

El segundo paso es Crear la Membresía, como es el que nos interesa la seleccionaremos haciendo clic en "Go".

Y en la siguiente página tenemos que hacer clic en New Membesrship.

Memberstack New membership

Y aquí puedo crear mis diferentes planes.

Si recordamos en nuestra página teníamos dos.

Carrd Pan premium

Pero nosotros por el momento solo vamos a crear la membresía Pro.

La llamaremos como "Plan Pro", le diremos que esta suscripción sí requiere de pago, que el precio será, 99 €, y que el pago será anual.

memberstack plan pro

Seguimos y veremos una serie de opciones que no vamos a configurar hasta que nos encontramos ante la opción Members - only content (que solo los miembros vean el contenido) esta opción sí que la queremos.

Por lo que haremos clic en Hide Content.

Memberstack Hide Content

Nos llevará a una página en la que tenemos que poner nombre a este contenido Pro. En nuestro caso lo llamaremos así, Pro. Y haremos clic en el botón de crear.

Creamos contenido Pro

Ahora nos encontramos en uno de los momentos importantes, porque le hemos dicho que cree un contenido solo para los miembros pro. Si hacemos clic en Hide Content.

Hide Content

Me mostrará el código que tengo que usar para añadirlo dentro de mi página. Por lo que nos lo copiaremos.

Codigo Hide Content

Nos volvemos a nuestra página de Carrd, ya que este código tenemos que añadirlo en la misma.

Si recordamos no queríamos que se viera para todo el mundo la página de escritorio, la página de Mi cuenta.

Carrd Hide Content

Para ello vamos a Mi cuenta, seleccionamos la caja completa (ya que es lo que queremos que no se vea).

Carrd Hide Content

Seleccionamos la rueda de "Settings" y en Atributos, pegamos el código que nos había dado Memberstack.

Carrd setup hide content

De esta manera lo que estamos diciendo es que solo aquellos miembros que sean pro, van a poder ver este contenido. Esto no nos va a funcionar hasta que nos dé otro código Memberstack, pero este punto ya lo tenemos hecho.

Al volver a Memberstack nos va a preguntar a qué sección queremos enviar al usuario una vez que se dé de alta.

Si os acordáis en Carrd, habíamos creado una sección que era la de bienvenido, para que todo aquel que se hubiera dado de alta fuera lo primero que viera.

Carrd Sección de bienvenido

Por lo que en Memberstack vamos a poner esta sección en "Section after signup"

Memberstack Section after signup

Posteriormente nos va a preguntar (siempre que lo activemos) donde vamos a mandar al usuario después de hacer login, aquí le diremos que lo haga a la sección mi cuenta.

Memberstack Section after login

Y que cada vez que se cierre (recordemos que también habíamos creado en el tutorial anterior una sección para cerrar) vaya a la sección cerrar.

memberstack sección cerrar

Una vez hecho todo esto, hacemos clic en a "create Membership".

Memberstack create membership

Ahora en Memberstack, tendremos el botón para cuando alguien quiera darse de alta en nuestra membresía.

Memberstack darse de alta en nuestra membresía

Por lo que en los botones de pagar, de seleccionar el plan.

Carrd botones de pagar

Tenemos que poner este botón que nos aparece en Memberstack. Al hacer clic en este botón nos dará el link. Nos lo copiaremos.

Link Botón Memberstack

Y lo pegaremos en aquellos lugares donde queremos que la gente pague.

Si nos volvemos a Carrd, en este botón de seleccionar plan, pegaremos como URL este código que nos hemos copiado de Memberstack.

Carrd boton pago memberstack

Si nos volvemos a Memberstack y allí al Dashboard.

memberstack dashboard

Veremos como está nuestro Checklist

checklist memberstack

Aunque esté todo el Checklist completado, en realidad, el último paso aún nos faltaría por realizar.

Por lo que haremos clic en "Install header code".

memberstack Install header coder

Nos dará el código, y nos lo copiamos.

memberstack copiamos código

Este código lo tenemos que pegar en nuestra página de Carrd.

Por lo que tenemos que irnos a la cabecera.

Carrd header

Hacemos clic en el "+".

Carrd +

Y hacemos clic en añadir Embed que es la parte de código.

Carrd Embed

Lo traeremos arriba del todo.

Carrd embed header

En la opción Code del panel de la izquierda, copiamos el código que nos da Memberstack.

Codigo memberstack

Otra de las cosas que nos faltan es crear el botón de cerrar.

Para ello, si nosotros nos vamos a Memberstack. Y veremos lo siguiente en Dashboard.

memberstack opción con campos

Todo esto lo explicaremos con más detenimiento en el próximo tutorial, pero para dar cohesión a este tutorial explicamos de manera somera como se haría.

Aquí desde la opción Login tendremos un enlace. En este enlace aparece como código #ms-login.

Codigo memberstack logearse

Si para "loguearse" el código es #ms.login, para "deslogyearse" será #ms-logout. Pero como decimos, todo esto lo veremos con más detenimiento en el próximo tutorial.

Pero por cerrar esta parte, vamos a irnos al botón cerrar de Carrd.

Carrd Botón cerrar

Y en los ajustes de este botón (panel de la izquierda), en URL ponemos como dijimos, el código #ms-logout.

Carrd logout

Al igual que hemos hecho con el botón de cerrar, ahora lo haremos con el botón de Login

Carrd Login

Y la URL (también la modificamos en el panel de la izquierda) es #ms-login

Carrd login

Hacemos clic en hecho (done)

Carrd Done

Ahora guardamos todo lo realizado hasta el momento. Para ello haremos clic en el disquete de la parte superior derecha.

Carrd Guardamos

Ya funcionaría todo perfectamente.

Para terminar este tutorial nos faltaría que nos apareciera solo uno de los dos menús.

dos menus carrd

También que desde Mi Perfil podamos ver el perfil de mi suscripción y algún botoncito más que nos falta.

¡Esperamos que os haya gustado!

Nos vemos en el siguiente tutorial.

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
Darse de alta en Memberstack