How to build a membership site with Outseta & Framer

This tutorial will walk you through the steps required to integrate Outseta with a Framer website.

• We started using Framer's SaaS website template.
• Check out the resulting Framer demo site.

Start in Outseta

After creating a free Outseta account, there are a few steps of pre-work that you'll need to do before you begin integrating Outseta with your Framer site.

1. Connect Outseta to your Stripe account.
2. Go to BILLING > PLANS and create at least one membership plan.
3. Configure the settings on the AUTH > SIGN UP AND LOGIN page.

Once you've taken these steps, you're ready to integrate Outseta with your Framer site.

Integration Steps

1. Within your Outseta account, go to AUTH > EMBEDS and copy the Quick Start embed code.

2. Sign up for a Framer account—you can use one of their pre-existing templates or start building from a blank page. Once you've created your site, go to SITE SETTINGS > GENERAL and paste Outseta's Quick Start embed code into the header of all your website pages.

3. IMPORTANT! Because of how Framer sites load javascript, you'll need to make on minor modification to Outseta's Quickstart embed code.

Original Code

<script>
var o_options = {
    "domain": "framer-demo-site.outseta.com"
  };
</script>
<script>
src="https://cdn.outseta.com/outseta.min.js" data-options="o_options">
</script>

Modified Code

<script>
var o_options = {
    "domain": "framer-demo-site.outseta.com",
     monitorDom: true
  };
</script>
<script>
src="https://cdn.outseta.com/outseta.min.js" data-options="o_options">
</script>

Please note the changes in bold—this includes both the monitorDom: true line and the coma at the very end of the preceding line. With this small modification made, we're ready to procede.

4. Make sure to include sign-up, login, logout, and profile buttons or links somewhere on your website. Within Outseta, go to AUTH > EMBEDS and grab the pop-up trigger links for each of our embeds—these will correspond to your sign up, login, logout, and profile buttons.

4. Publish your site. That's it! With your integration complete, you can now proceed with setting up any protected members only content that you require.

If you have any questions about integrating Outseta with Framer, let us know at support@outseta.com.

You can see Outseta's Framer Auth capabilities in action in projects like:

• ‍Cedric Moore's Course OS (course delivery)
• Gizem Onan's Arrived (productized services)
• Dan @ Inndio's Productizer Pro (productized services) 
• Nandi Muzsik's Framer University (teaching Framer!)

The team at Enframer has also filmed a comprehensive 15 video series on all aspects of integrating Outseta authentication with Framer sites.

‍