CP Commerce Admin Applet

Purpose and Overview

The CP Commerce Admin Applet is the central backend for your entire Customer Portal (CP) — the front-facing website and mobile app where your end-customers browse products, place orders, book events, and interact with your brand.

Instead of relying on developers to push website changes, this applet gives Marketing, E-Commerce, and Operations teams direct control over what customers see, how they interact, and what they can do — all from a single administrative console.

Key Features Overview

Who Benefits from This Applet?

E-Commerce & Marketing Teams:

• Build and manage website layouts, banners, and menus without developer support
• Create dynamic forms and surveys for customer feedback
• Set up events, activities, and bookable facilities
• Launch targeted newsletter campaigns and push notifications

B2B Account Managers:

• Enforce corporate spending limits on wholesale customer accounts
• Control which portal content is visible to specific customer groups
• Manage user registrations and block problematic accounts

Operations & IT Admins:

• Configure shipping providers and delivery fee logic
• Manage iOS and Android app version requirements
• Set up third-party integrations (Google Analytics, reCAPTCHA, social logins)
• Generate digital signature key pairs for API security

Customer Support:

• Moderate product reviews and ratings before they go public
• View and manage submitted customer forms
• Block abusive or defaulting users from the portal

What Problems Does This Solve?

The Fragmented Portal Management Problem:

Managing an e-commerce customer portal traditionally requires:

• Developer involvement for every website layout change
• Separate tools for forms, surveys, and event bookings
• No centralized control over mobile app versioning
• Manual tracking of B2B spending limits
• Disconnected review moderation processes

The CP Commerce Admin Solution:

• Visual website management — Configure layouts, menus, and banners from one console
• Built-in form builder — Template and dynamic forms with submission tracking
• Integrated event engine — Calendar, facility, and activity booking all in one place
• Automated B2B controls — Spending limits auto-enforced at checkout
• Review moderation — Approve or reject customer reviews before they go live
• Mobile app governance — Force mandatory updates for outdated app versions
• One applet, complete control — No more switching between disconnected tools

Key Features Overview

Key Concepts

Understanding the CP Commerce Framework

The CP Commerce Admin controls the admin-side configuration that drives what customers see on the Customer Portal (the front-end).

The CP Commerce Hierarchy

CP Commerce Admin Applet
│
├── Website (Core entity)
│   ├── Details (branch, pricing, merchant, menus, shipping config)
│   ├── App Version (iOS / Android)
│   ├── Manage Image (website image library)
│   ├── Digital Signature (API key pairs)
│   ├── Post Registration Config
│   ├── 3rd Party Auth Config (Google, Facebook, Apple, etc.)
│   ├── Layout Instance (website page builder)
│   ├── Reviews (Review Settings + Review Votes)
│   ├── Menu List (navigation menu builder)
│   ├── Country Config (locale, language, settlement methods)
│   ├── Label List (content classification tags)
│   └── Content Category
│
├── Shipping Provider (3PL integration)
├── Rating (star ratings management)
├── Review (review moderation)
├── Users (portal user management)
├── Newsletter Topic (email campaign topics)
├── Notification (push notifications)
├── Template Form (reusable form templates)
├── Dynamic Form (survey/questionnaire builder)
├── Submitted Form (form response inbox)
├── Spending Limit (B2B budget controls)
├── Blocked Customers (blacklist management)
├── Facilities (bookable spaces)
├── Activity (programs/classes within facilities)
├── Activity Category (grouping for activities)
├── Calendar (admin calendar view)
├── Events (event management)
└── Schedule (scheduler view)

The “Golden Chain” of Website Setup

Before a customer can use your portal, three things must be linked correctly:

1. Website → Branch → Merchant — The storefront must know which branch and merchant entity it belongs to.
2. Website → Pricing → Pricebook — The system must know how to price items (Pricing Scheme, Entity Pricing, or Ecomsync by Branch).
3. Website → Layout → Menu — The visual structure (which pages to show, which navigation menus to use) must be configured.

Quick Start Guide

Get up and running quickly with these essential workflows.

For E-Commerce Admins: Launch Your First Website

Goal: Create and publish a basic Customer Portal website.

1. Navigate to the Website section from the sidebar (default landing page)
2. Create Website: Click "+" → Enter Website Title (e.g., “My Brand Store”) → Select Branch → Choose Pricing Model → Select Membership Class → Click Create
3. Configure Details: In the edit view, assign:
   • Top Menu, User Menu, Left-side Menu, Bottom Menu
   • Default Layout Routing (the homepage layout)
   • Default Authentication Portal
   • Content Category
   • Sales Order Printable Format
4. Build Layout: Go to the Layout Instance tab → Click "+" to create your first page layout → Use the Website Builder button to visually design the page
5. Set Up App Versions (if mobile): Go to App Version tab → Add iOS and Android version entries
6. Publish: Set Status to Active → Click Save

What happens next? Your Customer Portal is now live and accessible to customers. They can browse, register, and place orders based on your layout and pricing configuration.

Pro Tip: Enable “App Version Update Check” checkbox and set the App Store URLs to auto-prompt users with outdated mobile apps to update.

For Marketing Teams: Create a Customer Survey

Goal: Build a dynamic form, publish it to the portal, and review submissions.

1. Navigate to Dynamic Form from the sidebar
2. Create: Click "+" → Enter form title (e.g., “Customer Satisfaction Q1”)
3. Add Questions: Open the form → Go to the Question tab → Add questions (text, multiple choice, dropdown, file upload)
4. Review Responses: When customers submit, their answers appear in the Response tab
5. Or use Template Forms: Navigate to Template Form to create reusable form templates with managed images

What happens next? The form is available on the Customer Portal. As customers submit, you can view, filter, and export their responses from either the Response tab within the Dynamic Form or from the Submitted Form section in the sidebar.

For Operations: Set Up a Shipping Provider

Goal: Connect a delivery service so customers see shipping options at checkout.

1. Navigate to Shipping Provider from the sidebar
2. Create: Click "+" → Enter provider name (e.g., “J&T Express”)
3. Configure Edit View:
   • Main Details tab: Set provider type (Flat Rate or Table Rate)
   • Table Rate tab (if applicable): Define rates by weight, destination, or order value
   • API Details tab: Enter the provider’s API credentials for real-time rate calculation
4. Link to Website: Go back to the Website Edit → Check “Enable Shipping Fee Process” → Select the Shipping Fee Option → Choose Shipping Price Book or set a delivery charges item code

What happens next? Customers see delivery options and rates at checkout. The system calculates costs based on your configured rules.

The Webstore Management Dashboard

Goal: Provide Store Managers a unified, simplified front-end console to configure their website without needing to navigate the complex backend ERP menus.

When an administrator clicks the Website Builder button from the backend (or navigates to https://[your-store-url]/page/website-builder/layout-menu/webstore), they are greeted by the Webstore Management Dashboard.

This dashboard acts as an aggregated shortcut center, presenting the most critical e-commerce configuration tools as large, easy-to-click tiles.

The 10 Dashboard Tiles

Dashboard Access Controls & Visibility

Not every store employee should have access to the entire Webstore Dashboard.

To enforce Role-Based Access Control (RBAC) or to simply declutter the interface for smaller stores, super-administrators can hide specific tiles from the frontend dashboard.

To hide a tile:

1. Navigate to the Website Edit > Details tab in the backend CP Commerce Applet.
2. Scroll down to the Hide Website Builder Elements section.
3. Check the respective boxes (e.g., Hide Voucher Management or Hide Image Manager).
4. Save the website configuration. The specified tiles will immediately vanish from the frontend Webstore Dashboard for all managers.

Website Management (website route)

Website Listing

The default landing page of the applet. Shows all configured website/storefront entities.

Listing View:

• Each row = one website entity
• Key columns: Website Code, Website Title, Status
• Click any row to open the edit view

Website Create

Creating a new website — Field-by-Field Guide:

After clicking Create, you are taken to the full edit view with many more fields and tabs.

Website Edit — Tabs Overview

When you select a website to edit, you’ll see the full configuration panel with the following tabs:

Details Tab (Deep Dive)

This is the most field-heavy tab. Here’s the full configuration:

App Version Tab (Deep Dive)

Manages iOS and Android mobile app version tracking with two sub-tabs:

Creating an App Version Entry:

Manage Image Tab (Deep Dive)

The Manage Image tab serves as the central asset library for your storefront. Here, you upload and organize specifically formatted images that are later referenced in branding, layout banners, and product displays.

Image Listing Grid:

Digital Signature Tab

Generate and manage cryptographic key pairs (RSA/DSA) used to digitally sign API requests between the Customer Portal and external ERP systems. This ensures data integrity and authenticity.

Post Registration Config Tab

Define automated actions that occur immediately after a new customer finishes the registration process.

3rd Party Auth Config Tab

Centralize all external API integrations for authentication, security (reCAPTCHA), and analytics. Each provider has its own sub-tab:

Layout Instance Tab

The Layout Instance tab is the control center for your site’s pages. A “Layout Instance” represents a specific page (e.g., Homepage, About Us, Landing Page).

How the Visual Website Builder Works

Accessible via the Website Builder button in the header, this drag-and-drop environment allows you to design your pages using a hierarchical node system:

1. Rows: Horizontal containers that define the page flow.
2. Columns: Vertical dividers inside rows to control content width.
3. Widgets: Functional UI components (Product Sliders, Banners, Form Embeds).

Configuration Palette:

• Elements Palette (Left): Drag Rows, Columns, and Widgets onto the canvas.
• Interactive Canvas (Center): Rearrange elements visually.
• Properties Panel (Right): Configure the specific settings for the selected element.

Widget Reference Guide

Below is the complete catalog of all available widgets, organized by category. When configuring a node as a Widget, select the appropriate Widget ID from the dropdown and configure its parameters.

🏗️ Structure & Header Widgets

🛍️ Product Display Widgets

🧭 Navigation & Menu Widgets

🛒 E-Commerce Workflow Widgets

👤 User Account & Membership Widgets

📋 Form & Interaction Widgets

Menu List Tab

Manage the navigation structures utilized by the Generic Header, Footer, and Vertical Menu widgets.

Posts Tab

Manage individual content entries like blog articles, news items, and announcements. This is where you create the “Static Pages” referenced by layout widgets.

User Agreement Tab

Central repository for legal documents such as Privacy Policies and Terms of Use. These documents are referenced in registration and checkout widgets.

Reviews Tab

Configure how the product review and rating system functions on the storefront.

Label List Tab

Create classification labels used to tag and filter content across the website. These are often used as “Category Groups” in widgets.

Content Category Tab

Define logical groupings for products and posts to enable organized browsing.

Account Tab

View and manage the administrative details of customer accounts associated with this website.

Branch Tab

Manage the physical branch locations or pickup points linked to this specific digital storefront.

Region Tab

Define the geographical regions used for shipping calculation and content localization.

Country Tab

Configure country-level localization, including languages and payment methods available to customers in specific nations.

Voucher Management Tab

Link and manage discount vouchers and promotional coupons that customers can use during checkout.

Commission Scheme Tab

Define how sales commissions are calculated for agents or affiliates linked to this website.

Language Tab

Configure the multi-language support settings for the storefront Frontend.

Settlement Method Tab

Link the payment settlement gateways (Stripe, Bank Transfer, Card, etc.) available for this website’s checkout process.

Shipping Providers (shipping-provider route)

What is the Shipping Provider section?

Configure third-party logistics (3PL) providers that appear as delivery options during customer checkout.

Shipping Provider Edit — Tabs:

Dynamic Forms (dynamic-form route)

What are Dynamic Forms?

A built-in survey and questionnaire builder. You design questions, and customers fill in responses directly on the Customer Portal.

Dynamic Form Edit — Tabs:

Template Forms (template-form route)

Reusable form templates with built-in image management. Useful for creating standardized registration or feedback forms.

Template Form Edit — Tabs:

Submitted Forms (submitted-form route)

The central inbox for all customer form submissions across both Dynamic Forms and Template Forms. Admins can view, filter, export, and take action on submitted responses.

Events & Facilities Booking Engine

Facilities (facilities route)

Define bookable physical spaces or assets.

Facilities Edit — Tabs:

Activities (activity route)

Programs, classes, or services offered within a facility.

Activity Edit — Tabs:

Activity Categories (activity-category route)

Group activities into logical categories (e.g., “Fitness”, “Workshops”, “Consultation”). Helps customers filter and browse available programs.

Events (events route)

Create specific occurrences (e.g., “Summer Mega Sale Launch — July 15”).

Event Edit — Tabs:

Calendars (calendars route)

Admin calendar view for managing scheduled events and bookings.

Calendar Edit — Tabs:

Schedule (schedule route)

Scheduler view for visualizing bookings across facilities and time slots.

Spending Limits (spending-limit route)

What are Spending Limits?

Automated financial controls for B2B customer accounts. Set maximum purchasing amounts per period (daily, monthly, yearly).

Real-World Scenario:

Company: XYZ Corp
Purchasing Manager: Ahmad
Spending Limit: RM 5,000 / month

Scenario: Ahmad's cart totals RM 6,200
Result: Checkout is BLOCKED — exceeds monthly limit
Action: Finance approves an exception, or Ahmad splits the order

Ratings & Reviews

Ratings (rating route)

Manage product/service star ratings submitted by customers.

Rating Edit — Tab:

Reviews (review route)

Moderate written product/service reviews before they appear publicly on the portal.

Review Edit — Tab:

Users (users route)

Portal user management — view all registered Customer Portal users.

Users Edit — Tab:

Blocked Customers (blocked-customers route)

Blacklist management — block abusive, fraudulent, or defaulting users from accessing the Customer Portal entirely.

Newsletter Topics (newsletter-topic route)

Create topic-based mailing lists. Customers subscribe to topics they care about.

Newsletter Topic Edit — Tabs:

Notifications (notification route)

Send push notifications to Customer Portal mobile app users.

Notification Edit — Tabs:

Each notification can have Posts (sub-items) with their own tabs:

Configuration & Settings

Access via the Settings sidebar menu item.

Feature Visibility (Settings > Feature Visibility)

Toggle which features are visible/accessible in the applet. This is the default settings landing page.

Default Settings (Settings > Default Selection)

Set system-wide default values that auto-populate when creating new records.

Field Configuration (Settings > Field Settings)

Configure which fields are visible, required, or hidden across different forms in the applet.

Webhook (Settings > Webhook)

Configure outbound webhooks to notify external systems when events occur (e.g., new form submission, new review, new user registration).

Permission Management

Personalization

Access via the Personalization sidebar menu item.

Personal Default Settings (Personalization > Personal Default Selection)

Set your own personal default values. These only affect your account and override system defaults where applicable.

Sidebar (Personalization > Sidebar)

Customize which sidebar menu items you see. Hide sections you don’t use to declutter your workspace.

FAQ

Q: I created a website but customers can’t see it. What’s wrong? A: Check three things: (1) Status must be set to Active. (2) A Default Layout Routing must be assigned so the homepage has content. (3) The Branch and Merchant must be correctly linked.

Q: Can I have multiple websites for different countries or brands? A: Yes. Each website entity can be linked to a different branch, pricing scheme, and country configuration. Use the Country Config tab within each website to manage locale-specific settings.

Q: The mobile app is showing “Update Required” but my users already have the latest version. A: Go to Website Edit > App Version > iOS/Android. Ensure the Version Number exactly matches the semantic version submitted to the App Store / Play Store (e.g., “3.5.2” not “v3.5.2”). A mismatch triggers a false mandatory update prompt.

Q: How do Spending Limits affect regular B2C customers? A: They don’t. Spending Limits are designed for B2B Corporate customer groups only. B2C retail customers have no spending cap — their purchases are limited only by their payment method at checkout.

Q: I can’t see some sidebar menu items that other team members can see. A: Check two things: (1) Your Permission Set in Settings may not include access to those features. Ask your admin to verify. (2) Your Personalization > Sidebar settings may have those items hidden.

Q: How do I make a form available on the Customer Portal? A: Create the form in Dynamic Form or Template Form, add your questions, and the form automatically becomes accessible on the portal. The Submitted Form section in the sidebar collects all responses.

Q: What’s the difference between “Review” in the sidebar and “Reviews” tab inside website edit? A: The Review sidebar item is a global moderation queue for all product reviews across all websites. The Reviews tab inside Website Edit is for configuring review settings (rules, vote options) specific to that website.

Q: Customers report they can’t log in with Google on the portal. A: Go to Website Edit > 3rd Party Auth Config > Google Login and verify the OAuth Client ID and Secret are correctly configured and not expired. Also check that the redirect URI matches your portal domain.