HyperFramer Symbol
hyperframer
Build a membership site in Framer

October 13, 2023 21:20

Build a membership site in Framer

Discover how to build a membership site using Thenty in our new practical Framer tutorial. Start creating web apps and more with Framer today!

Build a membership site in Framer
Build a membership site in Framer

Introduction

Building membership sites and adding authentication to your Framer site seemed impossible until the introduction of a game-changing platform called Fenty. With Fenty, not only can you add a fully integrated membership site to your Framer project, but you can also include checkout buttons and links, taking your site's functionality to new heights.

The Fenty Dashboard

Getting started with Fenty is straightforward. Inside the Fenty Dashboard, create a new project, select a use case, and hit "create". Next, you need to publish your Framer project and enter the public URL into Fenty. However, you must get rid of the "https://" part before pressing "continue". To allow Fenty and Framer to communicate, a tag is copied from Fenty and pasted into the Settings' head tag of your Framer project. Once you have saved the changes, you are good to publish your site

Setting Up Plans and Products

Now that Fenty and Framer are connected, you are ready to set up your plans and products. Whether you want to create a subscription plan, single payment, or free download, Fenty easily accommodates these options. If you opt for a subscription plan costing $10 a month, for instance, select "recurring" as your payment type, name the plan (e.g., Pro Plan), set the price to $10, and specify the billing frequency to monthly. What's more, you can accommodate multiple plans and products in Fenty, enhancing your site's flexibility.

Protected Pages Setup

You might want to restrict access to certain pages on your site, say, a dashboard page, to only those who have signed up and paid for the Pro Plan. Fenty allows you to easily do this. Simply create a new rule such that any page slug (the part after the slash in your URL) starting with "dashboard" is accessible only to Pro Plan users. This means only Pro Plan users can view the protected page, while non-Pro Plan users are automatically denied access.

Taking Things Further With Redirects

You can take things to another level with Fenty by customizing redirects based on a user's access level. Suppose a user attempts to visit the protected "/dashboard" page. You can check if the user is allowed to view the page, and if they're denied access, you can send them to the login page. You can even customize redirections for when a user logs in, completes a payment, or updates their password.

Add Functionality with Fenty Components

Still not satisfied? Well, your Framer project doesn't have to stay plain and bland. With Fenty, you can add a variety of functionalities to your site. You simply need to go to Components in Fenty, which houses a comprehensive library of different components for your site. Whether you want to add a sign-up model, created account form, or even a password reset form, Fenty's components have got you covered. And you have the editing power to change your styling and fields to your liking.

A Robust Tool for Membership Sites

As demonstrated, Fenty is truly a robust and powerful tool for creating membership sites in Framer. Whether you are looking to gate your content or seek Framer Tutorials to enhance your skill, this integrative platform got your back. And remember, there is a Fenty component for just about any functionality you want to add to your site. So go ahead and give Framer Templates a try, and start building impressive membership sites today!

Build a membership site in Framer
Build a membership site in Framer

October 13, 2023 21:20

Build a membership site in Framer

Discover how to build a membership site using Thenty in our new practical Framer tutorial. Start creating web apps and more with Framer today!

Build a membership site in Framer

Introduction

Building membership sites and adding authentication to your Framer site seemed impossible until the introduction of a game-changing platform called Fenty. With Fenty, not only can you add a fully integrated membership site to your Framer project, but you can also include checkout buttons and links, taking your site's functionality to new heights.

The Fenty Dashboard

Getting started with Fenty is straightforward. Inside the Fenty Dashboard, create a new project, select a use case, and hit "create". Next, you need to publish your Framer project and enter the public URL into Fenty. However, you must get rid of the "https://" part before pressing "continue". To allow Fenty and Framer to communicate, a tag is copied from Fenty and pasted into the Settings' head tag of your Framer project. Once you have saved the changes, you are good to publish your site

Setting Up Plans and Products

Now that Fenty and Framer are connected, you are ready to set up your plans and products. Whether you want to create a subscription plan, single payment, or free download, Fenty easily accommodates these options. If you opt for a subscription plan costing $10 a month, for instance, select "recurring" as your payment type, name the plan (e.g., Pro Plan), set the price to $10, and specify the billing frequency to monthly. What's more, you can accommodate multiple plans and products in Fenty, enhancing your site's flexibility.

Protected Pages Setup

You might want to restrict access to certain pages on your site, say, a dashboard page, to only those who have signed up and paid for the Pro Plan. Fenty allows you to easily do this. Simply create a new rule such that any page slug (the part after the slash in your URL) starting with "dashboard" is accessible only to Pro Plan users. This means only Pro Plan users can view the protected page, while non-Pro Plan users are automatically denied access.

Taking Things Further With Redirects

You can take things to another level with Fenty by customizing redirects based on a user's access level. Suppose a user attempts to visit the protected "/dashboard" page. You can check if the user is allowed to view the page, and if they're denied access, you can send them to the login page. You can even customize redirections for when a user logs in, completes a payment, or updates their password.

Add Functionality with Fenty Components

Still not satisfied? Well, your Framer project doesn't have to stay plain and bland. With Fenty, you can add a variety of functionalities to your site. You simply need to go to Components in Fenty, which houses a comprehensive library of different components for your site. Whether you want to add a sign-up model, created account form, or even a password reset form, Fenty's components have got you covered. And you have the editing power to change your styling and fields to your liking.

A Robust Tool for Membership Sites

As demonstrated, Fenty is truly a robust and powerful tool for creating membership sites in Framer. Whether you are looking to gate your content or seek Framer Tutorials to enhance your skill, this integrative platform got your back. And remember, there is a Fenty component for just about any functionality you want to add to your site. So go ahead and give Framer Templates a try, and start building impressive membership sites today!