The following snippet lets you redirect users to a plan-specific page after they log in. It will override the value in Auth > Sign up and Login > Login settings > Post Login URL the first time a user logs in.
Depending on your need, you might be looking for:
👉 Redirect to a plan-specific page post signup, ie. before they create a password
👉 Redirect to a plan-specific page post all logins, aka when a user logs in
👉 Redirect the user back to a protected content page they were attempting to access after login
Prerequisite
For this snippet to work, you'll need to set up an Auth > Sign up and Login > Sign up settings > Show advanced options > Sign up Confirmation URL.
It can be any URL on your site with the Outseta script and custom snippet included; for instance, it could be the signup page or the home page if you use the popup embeds.
The snippet
Add the provided custom code snippet (found between <!-- ✨ Custom Code Snippet Start ✨ --> and <!-- ✨ Custom Code Snippet End ✨ -->) to the head of your site below the Outseta script, which should already be in your site's head tag.
The script will 1. map your plan's unique IDs with their respective pages, and 2. redirect the user to the correct page after they log in the first time.
Remember to substitute lines in Step 1 with your plan UIDs and paths.
<!-- Outseta Script Options -->
<script>
var o_options = {
domain: '[your-domain].outseta.com',
};
</script>
<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>
<!-- ✨ Custom Code Snippet Start ✨ -->
<script>
// 1. Map your plan UIDs with their respective plan specific pages
const plansToPaths = {
// Create one line per plan (as many as you’d like),
// replacing the examples with your plan UIDs and plan paths
['planUidA']: '/path-to-plan-A-page',
['planUidB']: '/path-to-plan-B-page',
['L9PozjQJ']: '/plan-pro-gold',
};
Outseta.on('redirect', (redirectUrl) => {
const searchParams = new URLSearchParams(window.location.search);
const confirmationToken = searchParams.get('confirmationToken'); const redirectURL = new URL(redirectUrl); const accessToken = redirectURL.searchParams.get('access_token');
if (confirmationToken && accessToken) { // This is a redirect happening post login // to the Post Login URL, let's change that const jwtPayload = Outseta.getJwtPayload(accessToken); const planUid = jwtPayload['outseta:planUid']; const path = plansToPaths[planUid]; // Redirect to the page configured for the plan, // or let Outseta do its default thing if none is configured if (path) { const planRedirectURL = new URL(path, window.origin); // Redirect to the plan specific URL, // with the accessToken conserved planRedirectURL.searchParams.set('access_token', accessToken); window.location.href = planRedirectURL.href; return false; } } });
</script>
<!-- ✨ Custom Code Snippet End ✨ -->
To find your plan UIDs, go to Billing > Plans, then the name of any given plan. The UID is an alphanumeric value in the URL structure of the page (see screenshot below).
