Badge Webflow Award Winner 2023

Webflow releases a new feature: the members' areas!

Published on 
2/7/2022
-
Amended on 
23/3/2023
Reading time: 5 min
Bruce buffer with a Membership BETA card in his hand making his iconic "IT'S TIME" announcement
Written by
Florian Bodelot with a T-shirt Digidop

Florian Bodelot

Co-founder

It is now possible to create a member space, in no-code, and without any additional tool on your Webflow sites. The end of memberstack?

Key points to remember

WEBFLOW MEMBERSHIP BETA: ITSSSSSSSSSS TIMEEEEEEEEE!

It is now possible to create a members area, without any additional tool (👋 memberstack) on your Webflow websites . I have been using the BETA version of the Webflow member space for almost two weeks now.

Here is a summary of my first impressions, what I liked and what I need to know!

  • Official release date,
  • Use cases for the member area,
  • How to create a member space on Webflow?

1. Webflow member area: official release date

It was a feature expected for several years by Webflow users and the official release date is ....

Still unknown hehe - but the beta is open!

Apply for access to the beta via this form

If you are selected, you will then see this new functionality integrated into the designer interface of your Webflow project.

BETA users in the Webflow designer
Access to the Users interface

2. Why create a members' area on your website?

2.1 Because it is a powerful acquisition lever!

There are many good reasons to use this acquisition lever. Here are some of them;

  • Monetise content such as training courses
  • Create a private space for some of your customers
  • Create a lead magnet, by blocking certain prenium resources, in exchange for data
  • Federating an online community around a single interface

These examples are only the small part of the possibilities. I am convinced that many no-code makers, with a little imagination, will create other levers on their website with this new possibility.

2.2 But beware of SEO limits 😨

Since some of your content is blocked, it is likely that the restricted content has been treated independently in the SEO by Google. But we'll do our own tests to find out more, then we'll do a whole article on the subject with all our experiences!

3. How to create it on a Webflow site (without memberstack)

Webflow allows you to create a reserved area easily, even without being an expert of the tool! Follow the guide, click on some buttons.

Simple and complete tutorial

(1) Activate the member area of your project

⚠️ Please note that, like the e-commerce features of Webflow, this is an irreversible act. You will not be able to deactivate it anymore. But, if this is your choice... go !

→ Go to your Webflow project. On the vertical control bar (left) in your designer, click on the "Users" icon.

Message "getting started With Users".

A notification window will open to remind you that this creation is final. Click ok, your new space with membership is created. It's easy.

(2) Define Access Groups

This feature allows you to control which type of users will have access to which content. This is the basis for starting to structure your member area.

Access groups on Webflow Membership

"Group type: will access be free or paid?

By default, the access will be free because, to add a payment gateway allowing to create paid accesses on your website, you must first activate the e-commerce extension on your webflow account.

Grant Access: How will users access your content?

To give access to your private content, webflow offers you two options:

  1. Automatically: when a user has successfully registered via your "log-in" page and confirmed their email address. You now allow them to automatically log in to their account via that same address.
  2. Manually: allows you to manually invite people to access some of your content (e.g., after a pre-registration request, select and give access to some applicants to a beta)
Manual invitation to join a Webflow member area
Photo of the status in the Webflow back-office (top) + automatic mail received (bottom)

One of the biggest advantages of using automatic updates is that it frees up time for you and your team to work on other things, but in some cases the manual add-on solution allows you to to select.

Restricted content: what content is blocked on your site?

With a single click, you can select precisely the static pages, dynamic pages (CMS) or even the folder of pages to which you wish to apply an access restriction.

Once all these fields have been filled in, click on "Create".

You have now set up a private access for your Webflow site. This element can be modified and it is also possible to delete it. Just like an element of the CMS collections.

(3) Restricted pages

On the settings of your Webflow pages, you can now add in the "Access Control" tab specific access restrictions to each page;

  • Public
  • Specifics members only

How do I know which pages on my Webflow site have "member only" access?

On the membership pages, a small icon with a blue man appears at the bottom left.

Webflow page with restricted access to certain members
Page with restricted access + blue identification icon

(4) The default pages created (Users pages)

When you activate the member area on your project, webflow will automatically create a series of pages:

  • Log in
  • Sign up
  • Reset password
  • Update password
  • Access denied
  • User account

These pages are similar to the "utility" pages found on your Webflow sites, such as your 404 error page or your online shopping cart on the e-commerce extension. You can (and in my opinion should) completely customize their visual interfaces.

Webflow User Pages
The total

(5) Log in / log out button

A login/logout button! This is a new HTML element.

It is required to operate your members-only interface.

To find it, go to elements (A) and drag & drop the LOG IN/LOG OUT button directly onto the webflow interface of your project. Once added to your site, you can customise its design and text.

(6) How can I personalise the emails I send?

With the members' area, several automated email templates are by default integrated into the system (without any plug-in or need for additional tools);

  • welcome email
  • e-mail for forgotten passwords
  • password update email
  • etc...

All these fields are customizable with dynamic fields, fed directly from your Webflow project. When a new member registers, you can, for example, customize his "welcome e-mail", with his name, first name, etc...

To access the template, go to your Webflow designer settings (⚠️ not the project, but accessible from the left sidebar). Then click on the Email option and you will find several possible customization options.

Customised automated email template interface for Webflow membership

(7) Test your member area

Okkkkk. Does everything work well? Let's test it!

Publish your site, then test the integration of the member area by simulating the creation of a registration with one of your e-mail addresses.

Log In interface on Webflow Digidop

____

From the next step onwards, the described functionalities are blocked if you do not have a Webflow e-commerce plan.

____

(8) Create a paying member area

  1. Activate the e-commerce functionality of your site
  2. Add a new "product
  3. Select the "membership" option from the product drop-down list
  4. Fill in the various descriptive fields
  5. Add payment settings: subscription/single payment (Webflow works with Stripe)
  6. Set the rate
  7. Validate your product and return to the "Users" interface
  8. Repeat the steps for creating the "access group" and change the access group setting from "free access" to "paid access".
  9. Connect this access to a product (the one you just created)
  10. Define the restrictions
  11. Click on create

Bonus: easily manage your subscriptions from your CMS in the "subscriptions" tab.

(🎁) A few more tips...

  • Remember to leave a link to create a new account visible on your login interface.
  • ⚠️ When someone cancels their subscription, the cancellation is immediate. They will therefore immediately have their access to private content cut off. Explain this clearly.

Technical issues

How much does the member area cost?

According to Webflow, for the time being the price "is yet to be determined".

But the first version, beta access, is free.

Is there a limit on the number of users?

For the time being, the members' area is limited to 1000 members per project.

Can we connect with a Social (google, facebook, etc..)?

A SSO (Single Sign-On) connection is still under consideration in the product roadmap, so it is not yet possible. But this should be monitored for future product releases

Weblow Membership : our opinion

It is quite easy to get to grips with this new Webflow feature as the member area back office works on the same principle as the CMS collections or Webflow e-commerce.

Whether you are a digital agency, a freelancer or a simple company, Membership 1.0 is already very sufficient to meet your development needs.

Combined with Make (an automation tool) and airtable, you can already create solid workflows:

However, in order to make full use of this feature, we look forward to

  1. The release of "Logic" on Webflow. Logic is the automated Workflow System natively integrated to Webflow
  2. The development of the current ecommerce version.

To finally be in the...

The future

With the synergy between its members-only space, Logic, and its e-commerce functionality, Webflow will offer its users enormous possibilities to create more than just code-free websites. The creative possibilities seem to become, soon, unlimited.

Ps: And finally, I wish Wordpress and Memberstack good luck to continue to innovate. Otherwise, next year, the numbers won't be jojoooo! Still all-in on the Webflow no-code tool, and I sleep well! Thanks Webflow.

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop