MediaStore Hosted Customer Flows

Cleeng's MediaStore Hosted Customer Flows offer a streamlined way to integrate a complete, conversion-optimized checkout, account management, and customer care system into your D2C subscription business. With configuration handled directly in the Cleeng Dashboard, you can quickly tailor the checkout flow, branding, and customer care options to your needs. Any changes are applied instantly to your live widget, with no need to update or redeploy your website code.

This article describes how the widgets work, what they offer, and provides step-by-step instructions on how to set them up for your business.

Understanding Hosted Customer Flows

MediaStore Hosted Customer Flows is Cleeng’s low-code solution for deploying a robust checkout and account management system quickly and efficiently. Unlike traditional integration methods that often demand extensive development time, this solution provides pre-built, customizable widgets compatible with any technology stack.

Key benefits

Main benefits for your business include:

• Rapid Deployment: Implement a fully functional checkout in minutes, significantly reducing the development time typically measured in months. This allows you to quickly launch new offers and respond to market demands.
• Reduced Development & Maintenance: Eliminate the need for dedicated frontend development and ongoing maintenance costs associated with building and maintaining your own checkout system. Cleeng manages the underlying infrastructure.
• Technology Stack Agnostic Solution: The widgets seamlessly integrate with any existing technology stack, providing flexibility and avoiding compatibility issues.
• Automatic Updates & Security: Benefit from automatic updates, security patches, and new feature releases without any manual intervention on your part. This ensures your checkout remains secure, compliant, and up-to-date with the latest functionalities.

Use Case

You can integrate Cleeng’s hosted customer flows by:

• Adding a script to your site.
• Placing a container for the widget.
• Configuring the widget with your publisher and offer IDs (see details in the Integration Guide below)
• Customizing the experience through the Cleeng dashboard and previewing before going live.

This approach allows you to focus on your core business while Cleeng manages the complexity of payments, compliance, and user experience.

In summary, Cleeng’s hosted customer flows solution is a fast, flexible, and secure way to manage subscriptions and payments with minimal technical effort.

MediaStore Hosted Customer Flows Configuration

The MediaStore Hosted Customer Flows provide a quick deployment option that can be set up in about a day. The following steps outline how to integrate the widgets and configure their appearance and behavior.

Step 1: Integration Guide

To get started with Cleeng's hosted customer flows, you'll first need to set up the basic integration. This involves embedding the widget on your website and connecting it to your Cleeng account. Please follow the instructions in the Integration Guides.

Step 2: Dashboard Configuration

Once the initial setup is complete and the widget is active on your site, you can manage all further customization and branding directly from the Cleeng Dashboard. This allows you to tailor the widget’s look and behavior—such as branding, checkout flow, and user account options—without touching any website code. 

Follow this guide to configure widgets in the Cleeng Dashboard. For additional details, see the descriptions provided below.

2.1 Customize Your Web Branding

To customize your branding:

1. Go to Cleeng Dashboard > Admin & Tools > Hosted Customer Flows.
2. Select the General Branding tab.
3. Adjust your brand styling:
   1. Background color: Choose a color for the widget background. Font color will automatically adjust for readability and WCAG compliance.
   2. Accent color: Select a secondary color applied to interactive elements (e.g., buttons, links).
   3. Panel color: Choose a color for the panel on the right side of the Checkout widget, the Sign-up widget, and the FAQ panel in the Customer Care widget.
   4. Payment panel color: Pick a color for the payment panel background.
   5. Border radius: Set the border radius for widget panels. You can choose a preset (e.g. Sharp or Rounded) or enter a custom value in pixels.
   6. Font family:  Select a font family for your widgets. You can choose from predefined fonts or provide a custom font URL.
4. Click Save to apply the changes to your live widget. 

The default look:

Customization examples:

2.2 Add the Pricing Page

Create a page on your website that displays your offers to customers. This page acts as the entry point for subscribers to view your pricing and choose a plan.

• You are free to design and structure the page according to your branding strategy.
• Cleeng provides a simple HTML snippet you can use as a starting point.
  
  Note: This is not a Cleeng-hosted solution.
• For details, see the Implementing Offer Pricing Page guide.

2.3 Configure Sign Up

To configure your authentication widget:

1. Go to Cleeng Dashboard > Admin & Tools > Hosted Customer Flows and select the Sign Up tab.
2. In the Sign Up Settings section, you can set:

   • Redirect URL after registration: Specify the page users should see after registering.

     Note: By default, after registration, the page refreshes and the user is redirected to the home page. You can change this behavior and redirect users to another page, such as the checkout page, by setting a different Redirect URL after registration.

• Identity Provider: choose which system authenticates your users. Select Cleeng or External:
  • Cleeng - for a built-in solution. This will display the Cleeng authentication widget.
  • External - to use your own login system (e.g. Okta, Auth0). If you select External, Cleeng registration or logging will not be shown. Additionally, the "Update profile" section of the user account widget will not be displayed either. 

3. Embed codes: copy the following code snippets and place the sign up widget on your website.

2.4 Configure Web Checkout Widget Behavior

To configure your web checkout widget:

1. Go to Cleeng Dashboard > Admin & Tools > Hosted Customer Flows and select the Checkout tab.
2. In the Checkout Settings section, you can set:
   • Terms & conditions URL: Enter the link to your Terms and Conditions page. Users who click the terms link in the widget will be taken to this URL.
   • Redirect URL after successful payment: Provide the page you want users to land on after they complete their payment.

3. Embed codes: copy the following code snippets and place the checkout widget on your website.

2.5 Configure Web User Account Widget Behavior

To configure your web user account widget:

1. Go to Cleeng Dashboard > Admin & Tools > Hosted Customer Flows and select the User Account tab.
2. In the Account Settings section, you can set:
   • Background color: Choose a color for the widget background. Font color will automatically adjust for readability and WCAG compliance.
   • Panel color: Choose a panel color for the account widget.
   • Card color: Choose a color for the box displaying the customer's current plan.
   • Accent color: Select a secondary color applied to interactive elements (e.g., buttons, links).
   • Payment panel color: Pick a color for the payment panel in the account widget.
   • Payment history: Decide if you want to hide the payment/transaction history section in the account widget.
   • Cancellation survey: Decide if you want to show a cancellation survey to your customers after they click the Cancel subscription button in My Account. 
   • Click Save to apply the changes to your live widget.

3. Embed codes: copy the following code snippets and place the user account widget on your website. 

Migration to Hosted Customer Flows

For current users of Cleeng's MediaStore API or Components, adopting hosted customer flows can be a gradual and seamless process. You can progressively embed new hosted widgets without disruption. 

All widgets are designed to be compatible with your existing backend logic, meaning there's no need to rewrite your infrastructure. The migration simply involves replacing or complementing your current front-end calls by embedding the Hosted Widgets script, configuring the widget placeholders, and adjusting settings through the Cleeng dashboard.

Full User Journey With Cleeng’s Hosted Customer Flows

Supported Features

Identity Management

Supported Offers

Checkout

My Account

User Support

Note that user support is a Hi5 product, it works only with Hi5 Licence.

The supported features within user support are:

• Branded FAQ center
• Chatbot
• Email Ticketing System

Customization options

Supported Currencies

You can accept payments in a variety of currencies from your users. Here is a complete list of supported customer currencies: 

1. AUD - Australian Dollar
2. BRL - Brazilian Real
3. CAD - Canadian Dollar
4. CHF - Swiss Franc
5. DKK - Danish Krone
6. EUR - Euro
7. GBP - Pound Sterling
8. GHS - Ghanaian Cedi
9. IDR - Indonesian Rupiah
10. INR - Indian Rupee
11. JPY - Japanese Yen
12. KES - Kenyan Shilling
13. KRW - South Korean Won
14. MNT - Mongolian Tugrik
15. MXN - Mexican Peso
16. MYR - Malaysian Ringgit
17. NGN - Nigerian Naira
18. NOK - Norwegian Krone
19. NZD - New Zealand Dollar
20. PHP - Philippine Peso
21. PLN - Polish Zloty
22. SEK - Swedish Krona
23. SGD - Singapore Dollar
24. THB - Thai Baht
25. TRY - Turkish Lira
26. TWD - New Taiwan Dollar
27. USD - US Dollar
28. VND - Vietnamese Dong
29. XAF - Central African Franc
30. XOF - CFA Franc
31. ZAR - South African Rand 

Read more about currencies in Cleeng.

Supported Languages

Hosted Customer Flows FAQs

How do I implement hosted customer flows?

To implement hosted customer flows, please follow the instructions in the Integration Guide..

How long does it take to build and deploy subscription components?

With hosted customer flows, integration takes minutes rather than weeks or months. If your current development cycle for subscription features spans weeks, it can dramatically accelerate your time-to-market. 

How does configuration management work?

You can customize widgets through Cleeng Dashboard without touching code. Configurations are stored securely and injected at build time for performance and security. Changes trigger automatic rebuilds and deployments. What’s more, real-time preview is available for testing configurations before deployment.

How does the preview feature work?

Hosted customer flows preview capability lets you see exactly how your checkout will appear to customers before going live. Simply make changes in the dashboard to view how your widgets will look like.

Do I need a dedicated team of frontend developers to implement hosted customer flows?

No, hosted customer flows eliminate the need for specialized frontend development for the subscription experience. Your existing team can integrate our hosted solution without deep React or frontend expertise.

How are payment processor integrations and PCI compliance handled?

Hosted customer flows include pre-integrated payment processors (Adyen, PayPal, etc.) with built-in PCI compliance handling. This removes the complexity and security burden from your development team. 

Can I use hosted customer flows solution on Smart TVs or native mobile apps?

No, it’s a solution for the web only.

What languages are supported for the MediaStore hosted customer flows?

The Mediastore hosted customer flows currently support English, German, French, Portuguese (Brazil), Portuguese (Europe), and Spanish.

You control which language the widget displays by setting a locale value during configuration of each widget by assigning the appropriate locale value to the language attribute in Step 2: Create a container for the widget. This determines which translation the widget loads. If you don’t specify a language, the widget uses English by default.

Customer Care (the pre-built help center) is always displayed in English.

After signing up, why are users redirected to the home page instead of the payment page?

After a user completes registration, the page refreshes and redirects them to your home page by default.

If you want users to go to another page, such as the checkout page, you can change this in the dashboard: Admin & Tools → Hosted Customer Flows → Sign Up → Redirect URL after registration.