How to integrate Outseta's sign up, login, and profile embeds

Description:

Learn to use Outseta to add login functionality, profiles + payments to any website or web app

Notes

Watching this Video will take Approximately: 

14m 21s

Reading this lesson will take approximately: 

14m 21s

The Original Source of this content may include additional useful information or context, and will likely contain links to any content, templates or resources mentioned by the narrator. You can find visit the source below:

Lesson Content:

How to integrate Outseta's sign up, login, and profile embeds

Outseta provides pre-configured embeds that allow you to easily sign-up new users, let them login to your website or product, and give them the ability to manage their subscription or membership—all without writing any code.

These widgets can be configured by non-technical users using our visual builder, then integrating them with your website or product is as simple as dropping code snippets into your pages. Here's a quick overview of each:

Sign-up embed—Allows users to choose from your subscription options, enter their credit card information, and sign-up for your product or service.

Login embed—Allows users to login to your site with an email address/password or Gmail account.

Profile embed—Allows users to manage their own account information, upgrade or downgrade their subscription, maintain their payment information, and invite new team members.

These embeds can be implemented to open as pop-ups when a link or call-to-action button is clicked on your site, or they can be directly embedded into any website page.

This post and the video below will demonstrate this process on a Webflow website, but the steps are the same for any website builder. Here's the site we'll work with: outseta-demo.webflow.io

Before you can use the sign-up widget you 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 complete the other sign up and login settings. The video above gives an overview of each of these settings.

With these steps completed, you're ready to integrate Outseta's sign-up, login, and profile embeds with your website.

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 pop-ups when a call-to-action button or link is clicked. Start by adding sign up, login, and profile buttons or links somewhere on your site—you should also add a logout link. Please note that the "Profile" and "Logout" buttons or links will only display for users who have logged in to your product or website.

With these items in place, integrating Outseta takes about 2 minutes!

1. Go to AUTH > EMBEDS and copy the Quick Start head script.

OutsetaQuickStart

2. Paste the Quick Start head script into the header of all your website pages.

OutsetaQuickStartHeaderScript

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

OutsetaSignUpPopUpTriggerLink

4. Back in your website editor, click on your sign-up link or button and input the sign up link URL that you grabbed from within Outseta. Users who click on your button or link will be redirected to that URL, which is pre-configured to open Outseta's widgets as a pop-up.

OutsetaSignUpLink

5. Repeat this same process for your login, profile, and logout buttons or links as well. PUBLISH your changes—Outseta is now fully integrated with your site!

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

Instead of using Outseta's Quick Start script and opening the embeds as pop-ups, you can choose to embed the widgets 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 your existing website pages.

Follow the steps outlined below to embed the widgets in your website pages.

1. With 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 plans and payment terms 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 in real time to reflect the changes you've made to the sign up embed.

OutsetaSignUpEmbed

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.

OutsetaSignUpPageScript

Complete this process for your sign-up, login, and profile pages.

3. IMPORTANT—If you've chosen to add the embeds directly to your website pages rather than opening them as pop-ups, you need to add one additional l script to the header of all your website pages in Webflow 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 the header of all of your website pages:

<script>
var o_options = {
 domain: "domain.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 domain reflects your Outseta login URL.

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


Tools used in this Tutorial