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.

3. 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.