With Outseta, you can easily create a subscription business that integrates seamlessly with Circle. In this tutorial, learn how to set up membership plans on your website and utilize Outseta's single sign on (SSO) with Circle.

The first thing you will need to set up is a plan or multiple plans in Outseta. This will vary on your business and business model. For example, you might want to require people to sign up to receive access to your community. Under Billing, head to Plans. Then click ‘Add a Plan.’ Give your plan a name, add a description, set the trial period, and the rate. Then click, ‘Add.’

Now, we need to set up our login settings at the team level or individual level. Head to Auth → Sign up and Login. Team mode means multiple people can access via one account. Individual mode means only one user can use an account. For this tutorial, we are going to set this to individual mode.

Next, since we want to give users the ability to sign up and login into their account, we are going to toggle ‘Send sign up confirmation email.’ Here, we are going to past the URL we want to send people to once they’ve logged in.

Under Sign up settings, you can see the fields that will be available in your form and you can add a field. If you want to direct users who sign up to a specific page, you can do here here. Otherwise they will see a confirmation message displayed. Once you’re done here, hit Save.

Now under the Auth icon, click on Embeds. For this tutorial, we are going to be embedding our sign up, login, and profile links in Squarespace, but it’s a similar idea across most web tools. If you’re using Wordpress or Webflow, you can see how to install the header script by clicking on ‘Installation instructions for popular site builders.’

First, copy this head script and then head to your Squarespace site, head to Settings → Advanced → Code Injection. Note: this is a premium feature with Squarespace. Paste the head script into the box under Header and hit Save. Now go back into Pages. You can set the next links as navigation pages or you could have these on your site as button elements. For this tutorial, we’re going to create navigation links.

Click the + sign and choose Link as your page type. For your first Link, name this ‘Sign up.’ Then, in Outseta, copy the URL from the ‘Sign up Link’ box and paste it in the Link space in Squarespace. Click Save. Do this again with the Log out link and the profile link from Outseta. Once you’re done. create a Community Link page and paste in the URL for your Circle community. Click the gear icon next to Link and toggle ‘Open in New Window.’ Move this page up to sit under Sign Up.

Lastly, create a sign-up page in Squarespace that is not linked. This is going to be where you send people who try to enter your Community but are not a member. On this page, you can either create a button that links to your Outseta Sign Up pop up or you can embed the sign up form.

Now we are going to set up the SSO with Circle. Head to the Settings tab of your Circle community. Click on Single Sign-On. When you’re setting up SSO with Circle, the first thing you need to set-up, if you’re using one is your custom domain. If you’re not using a custom domain, we recommend keeping ‘Allow members with a Circle account to sign in’ on to prevent getting locked out of Circle until everything is working correctly. Once you have enabled SSO, members won’t be able to sign up via Circle but you can set a sign-up link for members. In general, this should be a page on your website where people sign up for membership or access to your community. Then, under OAuth Provider, select Outseta from the drop down list. Let’s go ahead and copy this Callback URL here. And set your provider name. The provider name will show as a button on the login page as “Continue with X” X will be whatever you put here.

Now, let’s head back to Outseta and click on Settings → Integrations. Go to the OAuth tab, and click ‘Add OAuth Client.’ Enter a Name - keeping in mind that when a user logs into your community for the first time, they will be prompted with a screen asking for your permission to use whatever you put here to facilitate SSO. So you could put Squarespace here, Outseta, or the name of your company/community.

Now, here is where we are going to paste that callback URL. Once you’ve done that, click Add. Now, you’re going to copy the Client ID and paste it into Circle under the Client ID header. Then, grab the Client Secret from Outseta, and paste that in Circle under Secret Key. Finally, for your Outseta URL, paste in whatever your URL is for Outseta. Click Save.