Who uses Memberstack?

Used by 50,000 Teams & Agencies

Memberstack es utilizado por millones de personas cada día.

Componentes

Comience con un componente gratuito

Probar las funciones de Memberstack es tan fácil como copiar y pegar uno de nuestros más de 600 componentes Webflow gratuitos.

Ver todos los componentes

Beneficios principales

How to Use Memberstacks Hosted Content Feature

Ver documentos

This article shows you how to use Memberstack's Hosted Content feature. This handy tool lets you control access to gated content based on the user's logged in status. If, for instance, a user logs in to their Webflow account, the page displays an active download button. For logged out site visitors, Webflow disables the button.

We'll also show you how to expand this tool by adding a secured menu link that only displays only for logged in users.

Creating a Logged In State

The first step is to create a logged in state for Webflow users. In this example, the UI is a Download button with an attachment.

Once that's all set up, we need to publish the site, go to the published page, and copy the button’s HTML.

  1. Right-click the element you want to store in Memberstack.
  2. Select Inspect.
  1. Go to the Elements panel and copy the download button's HTML.

Setting Up Memberstack

Go to your Memberstack account.

  1. Click Gated Content on the side menu and then the Add button.

Scroll down to the Hosted Content (Optional) heading.

  1. Make sure the Content Type field shows HTML.
  2. Paste the Webflow HTML into the field.
  3. Enter a name for the content.
  4. Click the Add Content button.

To save the content, you'll need to fill in the remaining required fields. Enter placeholder info if needed.

Creating a Loading State

Now create a loading state on Webflow. This state displays the same download page but removes the secured content.

  1. Go back to the Webflow download page.
  2. Select the hosted element on the canvas.
  3. I recommend replacing any sensitive information, content, and links with placeholders. Whenever possible, try to keep the classnames the same so they are saved in Webflow.
  4. Your placeholder content will not be visible for long (usually less than half a second), but it's still wise to make it look nice.

In this example I removed the download link and changed the button text.

  • If a site visitor clicks the button on the live page, nothing happens.

Adding an attribute

Almost done!

  1. Go back to the Memberstack site.
  2. Go to the Hosted Content section.
  3. Click the HTML install button.
  4. In the popup window, click the copy icon

Go back to Webflow.

  1. Select the button element.
  2. Go to the panel on the right and open the Custom attributes folder.
  3. Paste in the Name and Value attributes.
  4. Click Publish.

Test the Link

Go to the live Webflow page and log in. Webflow displays an active button and download link.

Ya está.

You created a button with a secure link to gated content.

Adding a Secure Link

This feature lets you dynamically insert links for members. The link will only display for logged in members.

Go back to the Hosted Content section in your Memberstack dashboard.

  1. Click the Content Type field and select Link.
  2. Paste in the secured page URL (Download, Dropdrop box link, Youtube video, etc.).
  3. Add a name for this link.
  4. Haga clic en Guardar.
  • In the popup window, copy the data attributes for this secure link.
  • Next, go back to Webflow. And add a link to your site. In this example, I added a link to the navbar on my marketing site.
  1. Open the Custom attributes UI.
  2. Paste in the link attributes.
  3. Click Publish.
  • Go to the live page and log in. Webflow displays the secured menu link.
  • When I click the menu link, Webflow opens the correct page.
  • When I log out of the site, Webflow removes the secured menu link.

Ya está.

Now you know how to create links for secured content that can be added to download buttons or a nav bar.

Slack

¿Quieres saber más sobre Memberstack? Únete a nuestra comunidad Slack de más de 5.500 miembros.

Únete al Slack de la comunidad Memberstack y ¡pregunta! Espera una respuesta rápida de un miembro del equipo, un experto de Memberstack o un compañero de la comunidad.

Únete a nuestro Slack

Ver todas las características →

Empezar a construir

Empieza a construir tus sueños

Memberstack es 100% gratis hasta que estés listo para lanzarla - así que, ¿a qué estás esperando? Crea tu primera aplicación y empieza a construir hoy mismo.