Tips and Tricks to customize your Sign up and Login experience

This article contains some tips and tricks that help modify the default behaviors of Outseta's sign-up and login embeds. These are generally configurations designed for more technical users—many require editing Javascript.

You might also be looking for these tips:

👉 Redirect to a plan-specific page post login, aka when a user logs in
👉 Redirect to a plan-specific page post signup, ie. before they create a password
👉 Redirect to a plan-specific page post first-time login, aka onboarding
👉 Redirect the user back to a protected content page they were attempting to access after login

Keep users logged in across tabs

By default Outseta uses session storage, so users will not remain logged in across different tabs within their internet browser.

By making a small edit to the script contained in the header of your site, you can change to using local storage. Local storage is accessible to all tabs and is not cleared when the user closes the tab.

<!-- Outseta Script Options -->
<script>
  var o_options = {
    domain: '[your-domain].outseta.com',
    // ✨ Add the lines below to your sites's head
    tokenStorage: 'local',
  };
</script>

<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

Configure the Outseta Script by setting tokenStorage to "local" in your Outseta Script Options found in the code you've already added to your site's head (see bold above).

Redirect the user back to the same page they were on after login

Configure the Outseta Script by setting auth.authenticationCallbackUrl to window.location.href in your Outseta Script Options found in the code you've already added to your site's head (see bold below).

<!-- Outseta Script Options -->
<script>
  var o_options = {
    domain: '[your-domain].outseta.com',
    load: 'auth,customForm,emailList,leadCapture,nocode,profile,support',
    // ✨ Add the lines below to your sites's head
    auth: {
      authenticationCallbackUrl: window.location.href
    },
  };
</script>

<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

Setting a value for auth.authenticationCallbackUrl overrides the POST LOGIN URL set on the AUTH > SIGN UP AND LOGIN page.

window.location.href grabs the current page's URL, "href" stands for Hypertext Reference.

Restrict sign ups to users from specific countries

You can make an edit the the Outseta code in the header of your website (adding the auth.registrationDefaults  parameter) so that only specific countries show up as an option when a user enters their billing address into Outseta's sign up embed.

In the example below, I've configured this for the United Kingdom (GB). It's possible that users who are not actually located in the United Kingdom still select this option, but this is the best method to reinforce that they need to be based in the a specific geography.

<script>
var o_options = {
  domain: 'yourdomain.outseta.com',
  countries: 'GB',
  auth: {
    registrationDefaults: {
      Account: {
        BillingAddress: {
          Country: 'United Kingdom of Great Britain and Northern Ireland'
        }
      }
    }
  }
};
</script>

Please note that the domain line (bolded) also needs to be updated to reflect your Outseta account URL. 

Remove the "Cancel Subscription" link from the profile embed

If you want to hide the "Cancel Subscription" link from the profile embed you can hide it with a bit of CSS. This makes it so customers can still change their plan, but can't cancel their subscription without contacting you.

1. Go to AUTH > EMBEDS > CUSTOMIZE DESIGN. Click on CUSTOM CSS.

2. Enter the following in the text area to remove the "Cancel Subscription" link from the Plan tab of the profile embed.

.o--App--profileWidget .state-plan .o--color-danger {
  display: none;
}

3. Enter the following in the text area to remove the "Cancel Subscription" link from the Billing tab of the profile embed.

.o--App--profileWidget .state-billing .o--color-danger {
  display: none;
}

4. Click SAVE.

If you need help with any of the tips or tricks mentioned in this article, please email us at support(at)outseta.com.