Subscription Management Widget In Wix

• Your Wix site is integrated with SubscriptionFlow.
• Your domain is whitelisted in SubscriptionFlow.
• You have the SubscriptionFlow Site Code and Client UUID.
   

1. Navigate to SubscriptionFlow Portal Manager

• Login to your SubscriptionFlow Admin Panel.
• Go to SubscriptionFlow Administration Setting → Customer Portal.
• Copy your unique site code and UUID for the portal script.
   

  

2. Get the In-App Portal Scripts

A. Go to Customer Portal -> In-App Portal
Header Script:
<script src="https://yourorg.subscriptionflow.com/portalflow-inapp.js" data-sf-site="yourorg"></script>
Replace 'yourorg' with your actual SubscriptionFlow site code.

B. Go to Customer Portal -> Single Sign-On
Create Portal Session Script:
const portalFlow = new window.PortalFlowInApp();
portalFlow.createPortalSession('your-client-id', 'user@example.com');

3. Create a Member-Only Page in Wix

In the Wix Editor:

• Go to Menus & Pages → + Add Page
• Name it something like Manage Subscriptions
• Make sure it is restricted to "Members Only"

4. Add the HTML iFrame Widget

• In the page, drag and drop an HTML iframe element from the Embed section
• Set the ID of the iframe to html1 (in properties panel)
• Paste the following HTML code into the widget:

HTML Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://yourwebsite.subscriptionflow.com/portalflow-inapp.js?v=1.0.3" data-sf-
site="yourwebsite"> </script>
<div style="padding-top: 25px;">
<a id="manageAccountBtn" href="javascript:void(0)" data-sf-type="portal" data-sf-scale="full"
style="transition: all 0.2s ease, visibility 0s; padding-right: 16px; padding-left: 16px; width: 
100%; color: #000; font-size: 50px; text-align: center; display: flex; justify-content: center;"> <span 
class="loader"></span> </a>
</div>
<script>
$(document).ready(function () {
const portalFlow = new window.PortalFlowInApp();
let sessionCreated = false;
window.addEventListener("message", (event) => {
try {
if (event.data && event.data.email) {
if (!sessionCreated) {
portalFlow.createPortalSession("YOUR-UUID-HERE", event.data.email);
sessionCreated = true;
let checkButtonInterval = setInterval(() => {
let $btn = $("#manageAccountBtn");
if ($btn.css("opacity") === "1" && $btn.css("pointer-events") === "auto") {
$btn.click();
clearInterval(checkButtonInterval);
}
}, 500);
setTimeout(() => {
$("#manageAccountBtn").hide();
}, 7000);
}
}
} catch (error) {
console.error("Error:", error);
}
});
});
</script>

Replace:
Replace yourwebsite with your actual site code and YOUR-UUID-HERE with your SubscriptionFlow UUID.

import wixUsers from 'wix-users';
$w.onReady(async function () {
if (wixUsers.currentUser.loggedIn) {
try {
const email = await wixUsers.currentUser.getEmail();
console.log("User email:", email);
// Send email to HTML widget
const $iframe = $w("#html1");
$iframe.postMessage({ email: email });
} catch (err) {
console.error("Failed to get email:", err);
}
} else {
await wixUsers.promptLogin();
}
});