Documentation

Follow the steps below to start building your own video course!
Get the cloneable

Initial setup

Clone this site

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

Create your Outseta account

You can sign up for a 7-day free trial of Outseta here:

https://www.outseta.com/get-started

Install Outseta

Add Outseta's Quick Start Embed Script to the header of your site

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

<script>
  var o_options = {
    domain: '[YOUR-OUTSETA-SUBDOMAIN].outseta.com'
  };
</script>
<script src="https://cdn.outseta.com/outseta.min.js"
        data-options="o_options">
</script>
Copy

Hook up your sign up, login, logout, and profile links

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.

https://go.outseta.com/support/kb/articles/3wQXkomK/how-to-integrate-outseta-s-sign-up-login-and-profile-embeds-with-a-webflow-site

Sign up link
https://[YOUR-OUTSETA-SUBDOMAIN].outseta.com/auth?widgetMode=register#o-anonymous
Copy
Login link
https://[YOUR-OUTSETA-SUBDOMAIN].outseta.com/auth?widgetMode=login#o-anonymous
Copy
Profile link
https://[YOUR-OUTSETA-SUBDOMAIN].outseta.com/profile#o-authenticated
Copy
Logout link
/#o-logout-link
Copy

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.

Note: In this template, these links have already been added to the corresponding navbar elements. But make sure that for each link you go in and replace the Outseta subdomain with your own.

Configure Outseta

Set your Post Login URL and Post Sign Up URL

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.

Protect content

Set up protected content

In Outseta, go to Auth > Protected content. When you add protected content you'll need to pay attention to 3 things:

Hidden URLs

Add mark as complete functionality

Add a custom property that will store completed lessons

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.

Alter the script on the course videos template

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.

<script>
Outseta.getUser().then(function(user) {
    // Defines the webflow vi...
    const itemID = "Item ID";
    const markAsCompleteId = 'mark-as-complete';
    const completeId = 'complete';

    const data = JSON.parse(user.Videos || '[]');
    const setComplete = function() { 
        document.getElementById(markAsCompleteId).style.display = 'none';
        document.getElementById(completeId).style.display = 'block';
    }

    // If they have the item ID in their profile...
    if (data.includes(itemID)) {
        setComplete();
    }

    // When the button is clicked...
    $('#' + markAsCompleteId).click(function() {
        if (data.indexOf(itemID) === -1) {
            data.push(itemID);
            user
                .update({
                    Videos: JSON.stringify(data)
                })
                .then(setComplete);
        }
    });
});
</script>
Copy

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.

Powered by O