Start by cloning this site—this will save you a ton of time. You can easily see how this site is built, then all you need to do is copy and paste your own content into this template:
https://webflow.com/website/outseta-course
You can sign up for a 7-day free trial of Outseta here:
Within Webflow, go to Project settings > Custom code. Copy and paste the Quick Start Embed Script that you'll find within your Outseta account on the Auth > Sign up and login page. Please note you'll need to make a slight modification to the script as shown below—this tells Outseta that you want to show links to pages of protected content (they are typically hidden by default).
Go to Auth > Embeds within Outseta. On this page you can grab your sign up, login, profile, and logout links. Use the URLs provided for the corresponding buttons on your site. You can also grab them below, but remember, if you grab them here make sure you fill in your Outseta subdomain.
For the logout link, append this value to the end of any URL. We'll redirect the user the the URL you select when they logout.
Go to Auth > Embeds within Outseta. Set your Post Login URL to your "Courses" page.
Set your Post Sign Up URL to your "Thank you" page. This is where users will be redirected immediately after they sign up. The "Thank you" page is typically a page that let's the user know they need to check their email to verify their account and login. We've included this page in this template.
In Outseta, go to Auth > Protected content. When you add protected content you'll need to pay attention to the following 3 fields:
This is how you set up which content on the site will be hidden from non-members. In this template, it makes sense to hide any URLs that start with course-videos, since that's the collection URL for the individual video lessons. Anyone who is not a member won't be able to access them.
If a user clicks through to a URL they don't have access to, they'll go to the "Access denied URL". In this template, we've made that the Sign up page.
This is pretty straightforward, but you'll choose which plans can access the protected content. In this example we only have one plan, and that plan gives users access to all of the courses on the site. But you could also set it up in a way that gives users access to specific courses based on their plan or plan add-ons.
In Outseta, go to CRM > Custom properties and go to the Person tab. Add a property and name it something that makes sense for your site, like "Completed Lessons" for example. You can keep the "Control type" as text.
In Webflow, go to the page settings for the Course Videos Template CMS collection page. Scroll all the way down and you'll see some custom code has already been added for you. This script will give the "mark as complete" button on this page it's functionality. It looks like this.
The only thing you'll need to do here is alter the variable for storing completed lessons based on how you named the custom property in your Outseta account. In the script, we've used "Videos". So just find any instance of "Videos" and replace it with the system name of the Ouseta custom property.
Using Outseta's Zapier integration you can automatically create account specific website pages when new accounts are created in Outseta. This is a great way for membership sites to automatically generate a unique page or dashboard for each member who signs up.
Login to your Zapier account and click Make a Zap. Search for and select Outseta. Choose Account added as your trigger event and click continue. Follow the prompts to sign-in to Outseta and allow Zapier to access your Outseta account.
Next, choose Webflow as the second step in your Zap and choose the Create live item option—in this step we're creating the account specific page in Webflow automatically after a new account is created in Outseta.
Choose your CMS collection—this determines the folder where all of your account specific pages will live. The value that you enter in the "Name" field will be used to determine the final URL that the new page lives at. In the example below "Name" is simply the account name that's captured when the new user signs up. In most instances membership sites will either want to select from "Name" (as shown) or "Primary contact first name".
By adding this value, Webflow will automatically create a page that lives in the "Dashboards" collection and uses the "Name" value for the corresponding page name and URL slug as shown below. This account specific page will live at the URL shown below the Slug field.
In the final step of this Zap, you'll update the Account record in Outseta with the Account Specific Page URL that was generated in the last step. Choose the Update account in Outseta option and enter the Account UID (user ID) and Name—these fields tell Zapier which Account record to update in Outseta.
You will also want to enter the Webflow "Slug" in the Account Specific Page URL 1 field. This will automatically update this field on the Account record in Outseta, as seen below.
If you'd like to automatically redirect users to an Account Specific Page when they login, navigate to Auth > Protected content > Account-specific pages and select the Send users to their page on login option. If you have multiple account specific pages, Outseta will automatically send them to the page identified as "Account Specific Page URL 1."
In order to make our account-specific pages more like a unique member dashboard, let's walk through how to show a list of the user's completed lessons on this page. Warning: this involves setting up a pretty advanced workflow with Zapier.
First you'll add one more custom property in to the "Person" record in Outseta. In Outseta, go to CRM > Custom properties and go to the Person tab. Add a property and name it Webflow Member ID. You can keep the "Control type" as text.
Next you'll add one more action at the end of the previous Zap. Choose Outseta for the app, and Update person as the event. In the Person Uid field, insert the data of Primary Contact UID. In the Email field, insert the data of Primary Contact Email.
The only other field you'll need to fill in for this action is the Webflow Member ID (the custom property you just created in Outseta). For this field, insert the data of ID from Webflow. What you've done here is created a connection between the member in the Webflow CMS collection and the corresponding person in Outseta. We'll use this in the next Zap.
Now you'll create a new Zap that will make updates to the Webflow "Members" CMS collection items any time the corresponding person in Outseta gets updated. So when a user marks a lesson as complete, this will update the Completed lessons multi-reference field in the Webflow collection item for that member.
Create a new Zap. Search for and select Outseta. Choose Account updated as your trigger event and click continue. Follow the prompts to allow Zapier to access your Outseta account.
This next action will update the Webflow collection item. Search for and select Webflow as the app, and select Update Live Item as the event. Choose your Webflow site and the collection you want this to affect (for this template, it's the "Members" collection). Insert the data of Webflow Member ID from Outseta. You can also insert any other data you want to be captured in the Webflow collection item. In this template, we've included first name, last name, and email as fields, but you can update the CMS collection to include more fields if you wish.
You may have noticed that we didn't insert any data in the Completed Videos field. That's unfortunately because the Update Live Item Webflow action doesn't support updating multi-reference fields. It's still helpful to include this action, because there may be other fields you'd like to update in Webflow when a person is updated in Outseta.
For the next step, you'll add a Filter by Zapier action. We only want the final part of this Zap to run if the person has completed a lesson. And if a person is updated in Outseta, it doesn't necessarily mean that a person has completed a lesson. So we'll set the filter to "Only continue if..." the Videos field in Outseta exists (or in other words has data in it).
Now things are about to get interesting. You'll now add a new Run Javascript in Code by Zapier action. Name your input data variable and choose the Videos field from Outseta. Then insert the following code. Note: our data variable name is videos, so if you name it something different just be sure to replace the variable anywhere it's used in the code.
For the last step in the Zap you'll add a Custom Request in Webhooks by Zapier action. This is how we'll get the Completed Videos multi-reference field populated in the Webflow user's CMS item. Mackenzie Child has a great tutorial on setting up this custom request.
https://youtu.be/AIbSEa6KqYI?t=848
The tutorial is part of a series showing how to do this whole process with Memberstack + Webflow. And in this step specifically, he's showing how to get data from Airtable into a Webflow multi-reference field. You can follow along, but you'll just be going directly from Outseta to Webflow.
Once you're done, you'll have a member-specific dashboard page that displays the lessons that member has completed!