Hosted Content

Article author
Duncan from Memberstack

This article will show you how to securely serve HTML or securely populate links when a member is allowed access. 

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.

 

That's it.

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. Click Save.

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

 

That's it.

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

Was this article helpful?

Comments

3 comments

  • Comment author
    Denys Tereshchenko

    Hi guys
    I can't add any link hosted content, "add content" button still is disabled even after input all data.
    Could you please advise what I'm doing wrong?
    HTML content type is working well

    Thank you in advance

    1
  • Comment author
    Pascal Strasche

    Hi there, great feature!

    I was wondering if there are any limitations or could I theoretically add thousands of links?

    2
  • Comment author
    Duncan from Memberstack

    Good question 🤔 Tyler Bell do you have any ideas about how many hosted content objects it would take to cause issues? 100? 200? 1,000? 10,000?

    1

Please sign in to leave a comment.