The following snippet lets you redirect users to a plan-specific page when they change their plan in the profile embed. A less complex solution redirects to the same page for all plan changes.
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 first-time login, aka onboarding
👉 Redirect the user back to a protected content page they were attempting to access after login
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.
<!-- 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.
['plan-id-x']: '/success-x',
['plan-id-y']: '/success-y',
// Fallback is used for other changes than plan changes
// or if it there is not a plan specific page.
// ⚙️ Replace with your fallback path
["fallback"]: "/success"
};
// 2. Store the current plan
let currentPlanUid = null;
Outseta.on("accessToken.set", (payload) => {
currentPlanUid = payload["outseta:planUid"];
});
// 3. Redirect to the correct path on plan change
Outseta.on("subscription.update", (data) => {
const newPlanUid = data?.Plan?.Uid;
let redirectPath = plansToPaths["fallback"];
if (newPlanUid !== currentPlanUid) {
redirectPath = plansToPaths[newPlanUid] || redirectPath;
}
if (redirectPath) {
// Has redirect path, so let's redirect
const url = new URL(redirectPath, window.origin);
window.location = url.href;
}
})
</script>
<!-- ✨ Custom Code Snippet End ✨ -->
Configure the Snippet
Under each ⚙️ configure the script with your values.
When done, it should look something like this:
const plansToPaths = {
["L9Pxnp9J"]: "/success-pro",
["xmebqBQV"]: "/success-vip",
["fallback"]: "/success"
};
For a complete example, take a look at the Code Sandbox below.