Outseta integrates with Webflow so that you can sign-up new users, allow them to login to your website, and give them the ability to manage their membership—all without writing any code. Best yet, you can control access to your content based on a member's subscription plan.

Outseta integrates with your Webflow site via three "embeds."

  1. Sign-up embed—Allows users to choose from your membership options and sign-up.
  2. Login embed—Allows users to login to your site with an email address/password or their Gmail account. 
  3. Profile embed—Allows users to manage their own user profile, upgrade or downgrade their membership, maintain their payment information, and invite new team members.

These embeds can be implemented to open as pop-ups when a link or button is clicked or they can be directly embedded into a website page.

Prerequisites

Before you begin integrating Outseta with Webflow you'll need to:

  1. Go to BILLING > SETTINGS and connect Outseta to Stripe.
  2. Go to BILLING > PLANS and add at least one pricing plan.
  3. Go to AUTH > SIGN UP AND LOGIN and configure your sign up and login settings.

With these steps completed, you're ready to integrate Outseta's sign-up, login, and profile embeds with your website. The video below demonstrates this process using our Webflow demo site: outseta-demo.webflow.io

NOTE: The video below covers how to integrate Outseta with Webflow using our standard integration process. This can also be accomplished using Outseta's Webflow App, which is covered at the bottom of this article.

 

Open the sign-up, login, and profile embeds as pop-ups 

The easiest way to integrate Outseta with your site is to open our sign-up, login, and profile embeds as a pop-up when a button or link is clicked.

1. Start by adding sign up, login, and profile buttons or links somewhere on your site—you should also add a logout link. 

NOTE: Outseta will automatically show or hide these buttons or links based on when they are relevant. For example, your logout and profile links will only display for a logged in member.

2. Go to AUTH > EMBEDS and copy the Quick Start Head Script.

2. Within Webflow, go to PROJECT SETTINGS > CUSTOM CODE and paste the Quick Start head script into the header of all your website pages. Click SAVE.

3. In your Outseta account, go to AUTH > EMBEDS and copy the sign-up link you find under the Quick Start Header Script. 

4. Back in the Webflow designer, click on your sign-up link or button and open the element Settings. In the Link Settings section enter the URL of the sign up link that you copied from Outseta.

NOTE: You can also generate plan specific sign up links by using the sign up form configuration tool found at AUTH > EMBEDS > SIGN UP.

5. Repeat this same process for your login, profile, and logout buttons or links.

6. PUBLISH your site—Outseta is now fully integrated with your site!

Embed sign-up, login, and profile forms on their own pages

Instead of opening Outseta's embeds as pop-ups, you can choose to embed them directly into your website pages. If you choose to go this route:

  1. You do not need to add the Quick Start Header Script to your site. 
  2. Consider adding dedicated /sign-up, /login, and /profile pages to your website before you start this process. You can also add these embeds directly within any of your existing website pages.

Follow the steps outlined below to add the embeds directly to your website pages.

1. Within your Outseta account go to AUTH > EMBEDS. On this page you can select and work directly with the sign-up, login, or profile embeds.

In the screenshot below I've selected the sign-up embed. In the "Configure your embed" section you'll see I've selected the On a page option. You can also preselect the plan family or individual plans you'd like to display. Use these configuration options and you'll see the Live Preview on the right hand side of the screen update to reflect the changes you've made to the sign up embed.

Once you've configured your embed script to your liking, click INSTALL YOUR EMBED. 

2. You can then grab the page script that you'll need to drop into your website pages at the bottom of the page.

Repeat this same process to add the sign-up, login, and profile embeds to your pages.

3. IMPORTANT—If you've chosen to add the embeds directly to your website pages rather than opening them as pop-ups, you'll need to add one additional script to the header of all your website pages only if you want to use Outseta's content protection features.

Within Webflow go to PROJECT SETTINGS > CUSTOM CODE and add the following code to all of your website pages.

<script>
var o_options = {
  domain: "yourdomain.outseta.com",
  load: "nocode"
};
</script>
<script src="https://cdn.outseta.com/outseta.min.js"
        data-options="o_options"/>
</script>

You need to edit the code so that the bolded word yourdomain reflects your Outseta login URL.

Embed sign up, login, or profile forms (Webflow App method)

You can also add Outseta's sign up, login, or profile embeds to your Webflow site by using our Webflow App.

 

In the example below I've selected a Sign Up button on the page and am using that button to trigger a sign up pop-up for the "Full Access Membership" plan. 

After selecting the button and the appropriate plan, click ADD TO ELEMENT.

When integrating sign up, login or profile embed forms with this method custom attributes are added to the Settings panel.

 

If you need any help with this process, we'd be happy to help! Please email us at support(at)outseta.com.