Overview
This guide explains how to generate a front-end integration with Cleeng using Hosted Widgets through the Base44 Vibe Code Platform. The objective is to enable a seamless D2C (Direct-to-Consumer) subscription flow, where users can browse offers, register, purchase, and manage their accounts through a unified interface.
Introduction
When combining Base44 with Cleeng Hosted Customer Flows, the goal is to simplify the process of offering subscriptions and managing users while maintaining a smooth customer experience. Base44 helps teams build and customize front-end experiences quickly, while Cleeng provides the subscription and identity layer behind the scenes. Together, they allow publishers and D2C providers to focus on delivering content without having to reinvent the subscription or entitlement logic.
The benefit of this approach is that you can integrate subscription flows, account management, and payment handling directly into your Base44-built front end with minimal effort. Instead of custom coding login forms, subscription pages, or account dashboards, Cleeng Hosted Customer Flows provide ready-made, secure components that plug into Base44. This combination reduces development time, ensures compliance with industry standards, and lets you move faster from concept to launch.
1. Prerequisites
Before starting, ensure you have:
- A Cleeng Publisher Account
- Cleeng Hosted Customer Flows Documentation
- Basic knowledge of HTML and file management
- Access to the Base44 account for hosting and building your D2C website
- Access to a preferred server or hosting service for final deployment
2. Set Up Cleeng Hosted Customer Flows
- Create a production account at Cleeng.
- Familiarize yourself with the Hosted Cutomer Flows (Auth, Checkout, Account).
- Copy the Cleeng widget code into separate HTML files:
- auth.html → for the Cleeng Authentication/SSO
- checkout.html → for Checkout and Payments
- account.html → for the Subscriber Account Management
3. Configure Base44
- Log in to the Base44 website builder.
- Generate your D2C Offer Cards. You can use prompts like:
Example JSON Prompt: (editable to your style/information requirements)
Create a responsive subscription pricing UI with two side-by-side pricing cards (Monthly and Annual).
Design requirements:
- Gradient background (your colors).
- Title at the top: "Choose Your Plan".
- Subtitle: "Get premium access with flexible subscription options".
- Two pricing cards with rounded corners, white background, shadow.
- Card 1 (Monthly):
- Header: "Monthly"
- Price: "$9" / "per month"
- Features: Premium content access, HD streaming quality, Cancel anytime, 24/7 support
- CTA button: "Get Monthly Plan" (purple gradient button)
- Card 2 (Annual):
- Header: "Annual"
- Price: "$85" / "per year"
- Tag in top-right corner: "Save 22%" (orange badge)
- Features: Premium content access, HD streaming quality, Priority support, Exclusive content
- CTA button: "Get Annual Plan" (purple gradient button)
- Highlight the Annual plan subtly to emphasize savings.
- Layout should be mobile-responsive.
Result:
3. Upload your prepared Cleeng Pro HTML files (auth, checkout, myaccount) into Base44.
Ask Base44 (via prompt or configuration) to integrate the Offer Cards with Cleeng Hosted Widgets.
Prompt Example:
Implement auth-aware routing for the Subscribe buttons using vanilla JS (no frameworks).
Files we will upload:
- auth.html → Cleeng Authentication/SSO
- checkout.html → Cleeng Checkout + Adyen payment
- account.html → Subscriber Account Management
Behavior:
1) On the Offers page (current page with the offer cards), each "Subscribe" button has data-offer-id.
- If user is NOT logged in (no valid Cleeng JWT), clicking "Subscribe" must redirect to:
auth.html?redirect=checkout.html&offerId=<OFFER_ID>
- If user IS logged in, clicking "Subscribe" must redirect to:
checkout.html?offerId=<OFFER_ID>
2) In auth.html:
- Render Cleeng Auth/SSO widget.
- On successful login, read URL params (redirect, offerId) and navigate automatically to:
<redirect>?offerId=<OFFER_ID>
(Default redirect to checkout.html if param missing.)
3) In checkout.html:
- Read offerId from URL and preselect that offer in the Cleeng Checkout widget.
- If the page loads and the user is NOT logged in, auto-redirect to:
auth.html?redirect=checkout.html&offerId=<OFFER_ID>
- On successful purchase, redirect to account.html.
4) In account.html:
- Render Cleeng MyAccount widget. If user not logged in, redirect to:
auth.html?redirect=account.html
Implementation details:
- Provide small inline JS helpers in each file to parse query params and check auth (e.g., isLoggedIn() from presence/validation of Cleeng JWT).
- Add click handlers to all .subscribe-btn elements on the Offers page; default their href to auth.html (progressive enhancement).
- No external libraries; all code self-contained.
Acceptance criteria:
- Logged-out user clicking Subscribe → sees Auth, then auto-lands in Checkout for the same offer.
- Logged-in user clicking Subscribe → lands directly in Checkout for that offer.
- After successful payment → lands in account.html.
- Direct navigation to checkout.html while logged out → sends user to Auth and then back to Checkout with the same offer.
Result:
To change the colors of the Auth, Checkout, and Account widgets to match your brand style, please go to the Cleeng Dashboard. See Widgets Customization documentation for step-by-step guidance.
4. Testing the Integration
Once configured, test the full flow in your environment:
- Click an Offer Card on your Base44 site.
- Register a new account using the Cleeng Auth widget (SSO).
- Purchase the selected offer.
- Navigate to MyAccount:
- Edit profile settings (e.g., name)
- Cancel the created subscription.
Verify each step works as expected and data is reflected correctly in your Cleeng dashboard.
5. Deployment
If testing is successful:
- Click Publish in the top-right corner of the Base44 platform.
- Run a final test with a real payment method before going live.
Summary
With this setup, your Base44 D2C site is now fully integrated with Cleeng Pro, enabling user registration, subscription purchases, and account management in a streamlined flow.
- Flexibility: Hosted Widgets are responsive and can be styled to match your D2C brand.
- APIs: For advanced use cases, you may call Cleeng APIs directly to extend beyond the widget functionality. Refer to Cleeng's documentation for more details. If you plan to use the Cleeng API with Cleeng Pro, work with a certified Cleeng Pro partner.