# Page Manager WHMCS Addon
# Description
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
## PUQ Page Manager WHMCS Module
**PUQ Page Manager** is an addon module for WHMCS that allows you to create and manage custom pages using a powerful block widget editor (EditorJS). It includes 24 built-in widgets, multilingual support, SEO optimization, page analytics, password protection, revision history, and WHMCS page rewrites — all without writing any code.
- - - - - -
## Key Features
- **Block Widget Editor** — visual page builder powered by EditorJS with drag-and-drop block management
- **24 Built-in Widgets** — Hero Section, Product Cards, Promo Slider, Testimonials, Timeline, FAQ, Team Slide, Contact Form, Tabs/Accordion, Markdown, and many more
- **Multiple Style Variants** — most widgets include 5–11 design styles selectable from the admin panel
- **Full Background Control** — every widget supports background image, color, shadow, and border-radius settings
- **Multilingual Pages** — create page translations for any language with translation status tracking (Translated / Needs Update / Not Translated)
- **SEO Optimization** — Open Graph meta tags, keywords, canonical URL, meta robots, Schema JSON-LD, custom CSS and JS per page
- **Page Analytics** — track page views, unique views, top pages, and views per day
- **Revision History** — automatic revision tracking with content preview and one-click restore
- **Password Protection** — protect individual pages with passwords, with customizable appearance (gradient presets, colors, icon, card style)
- **Visibility Control** — restrict pages to all visitors, guests only, clients only, or specific client groups
- **WHMCS Page Rewrites** — replace the WHMCS home page, footer, domain register page, or any custom URL pattern with your pages
- **Import / Export** — export individual pages or all pages as JSON, import on another WHMCS installation
- **Parent Pages & Sorting** — organize pages in a hierarchy with parent pages and custom sort order
- **Scheduled Publishing** — set pages as Draft, Published, Scheduled, or Archived
- **WHMCS Product Integration** — Product Cards and Domain widgets pull live pricing data from WHMCS
- **TinyMCE Widget** — embed rich HTML content using the TinyMCE WYSIWYG editor within the block editor
- **Custom Code Widget** — insert raw HTML, CSS, and JavaScript
- **License system** — online/offline license verification with graceful degradation
- **English language interface**
- - - - - -
## System Requirements
Requirement
Minimum
**WHMCS**
8.x+, 9.x+
**PHP**
7.4, 8.1, 8.2, 8.3, 8.4
**ionCube Loader**
v15+
- - - - - -
## Module Components
Component
Type
Directory
Addon Module
`puq_page_manager`
`modules/addons/puq_page_manager/`
- - - - - -
## Links
- **Product page:** [https://puqcloud.com/whmcs-addon-puq-page-manager.php](https://puqcloud.com/whmcs-addon-puq-page-manager.php)
- **Documentation:** [https://doc.puq.info/books/page-manager-whmcs-addon](https://doc.puq.info/books/page-manager-whmcs-addon)
- **Support:** [https://puqcloud.com/submitticket.php](https://puqcloud.com/submitticket.php?step=2&deptid=1)
- **Community:** [https://community.puqcloud.com/](https://community.puqcloud.com/)
- - - - - -
## Screenshots
### Admin Area — Dashboard
*02-dashboard.png*
### Admin Area — Pages
*03-pages.png*# Changelog
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
## v4.0.0 — 2026-09-15
### Major Architecture & Features Upgrade
- **Universal ionCube Loader v15 Support:** Fully re-encoded using the latest ionCube 15 compiler, guaranteeing seamless execution across PHP 7.4, 8.1, 8.2, 8.3, and 8.4 environments.
- **Unencoded Hooks Architecture (v4.0.0 Standard):** Refactored `hooks.php` into an open, unencoded entrypoint delegating to `lib/puqPageManagerHooks.php` for bulletproof dynamic hook registration and error isolation across all WHMCS environments.
- **Instant Demo Content Generation (Quick Start):** Added a 1-click **Create Demo Pages** button in the Pages management area. Automatically seeds a full suite of preconfigured showcase pages (Home, About Us, Widget Gallery) with styled widget blocks, vibrant color palettes, and English placeholders for instant testing and onboarding.
- **Analytics & Page View Reset Controls:** Added per-page view count reset controls in the page editor alongside a global **Reset All Views** action on the Analytics dashboard for effortless testing and statistics maintenance.
- **Dual Ukrainian Language Pack Support:** Added full simultaneous support for both `ukranian.php` (historical WHMCS slug) and `ukrainian.php` (standard grammatical slug) to ensure seamless native localization across all WHMCS distribution setups.
- **Comprehensive Multi-language i18n Audit:** Audited and synchronized translation keys across all 25+ language files, enforcing typographic apostrophe standards (`’`) to eliminate JavaScript syntax breakage in dynamic frontend notifications.
- **Clean Admin & Widget AJAX Interception:** Fixed an issue where admin AJAX endpoints (e.g. `getDashboard`, page lists, settings) could be wrapped in WHMCS admin HTML templates, causing infinite loading spinners. Added early hook interception and strict output buffer cleansing.
- **Enhanced WHMCS 8.x & WHMCS 9+ Compatibility:** Modernized request routing and custom rewrite pipelines to ensure smooth operation on latest WHMCS releases.
- **Improved Performance & Reliability:** Optimized page lookup caching and cleaner exception handling in frontend render loops.
- - - - - -
## v1.2 — 2026-07-16
### Improvements & Standardization
- **Enhanced PHP 8.1+ Compatibility:** Improved internal AJAX routing and error handling by replacing deprecated legacy termination calls with modern exception throwing, ensuring smooth execution on strict WHMCS 8.x environments.
- **Optimized License Verification:** Eliminated log bloat by skipping redundant log entries during successful local (offline) license validations, keeping your WHMCS system logs clean and focused.
- **Admin Interface Upgrade:** Redesigned the module's administrative navigation bar to match the latest PUQ Bootstrap 3 standard. Added a quick-access "Help" menu with direct links to Documentation, Website, and the Community Forum.
- **Updated Marketing Assets:** Generated high-resolution, standard-compliant cover images and marketplace banners with updated PUQ Software branding while preserving custom module iconography.
- - - - - -
## v1.1 — 2026-04-27
### New Features
- **New widget: Markdown.** A4-styled document renderer with a Markdown source editor on the admin side and a printable A4 paper layout on the frontend. Includes an optional **Download as PDF** button (uses html2pdf.js), a **Disable A4 paper layout** option for plain in-page rendering, configurable paper width, and a custom PDF file name.
- **Live preview toggle in the Markdown widget.** Single-button switch between the Markdown source and the rendered preview.
- **Translatable widget labels.** `puqWidgetHelpers` now exposes the current language to widget templates via `$lang`. Added `Download as PDF` and `Generating...` translation keys (English, Russian, Ukrainian).
### Improvements
- **Editor loading indicator.** The page editor now shows a progress bar with per-step status while loading widget scripts, EditorJS core, and TinyMCE — instead of a blank screen.
- **Asset cache busting.** Widget JS and the EditorJS core are now loaded with a `?v={version}` query string, so updates take effect on the next page load without manual cache clearing.
### Fixes
- Fixed editor toolbar ("+" / settings) sometimes appearing on the wrong side because EditorJS was being initialized inside a hidden container.
- Fixed text alignment inheritance in document-style widgets (markdown content was rendered centered because of the shared background wrapper).
- - - - - -
## v1.0 — 2026-02-22
First release.
### New Features
- Block widget editor powered by EditorJS with drag-and-drop block management
- Built-in widgets: Announcements, Call To Action, Contact Form, Custom Code, Domain Search, Domain TLD, Feature Grid, Hero Section, Intelligent Domain Search, Map, Mini Menu, Page Background, Product Cards, Promo Slider, Question Answer, Separator, Slider Logos, Tabs / Accordion, Team Slide, Testimonials, Text Editor TinyMCE, Timeline, Video Embed
- Multiple style variants per widget (5–11 design templates)
- Full background control per widget: background image, color, shadow, border radius
- Multilingual page support with translation status tracking
- SEO fields: OG Title, OG Description, OG Image, Keywords, Canonical URL, Meta Robots, Schema JSON-LD
- Custom CSS and JavaScript per page
- Page analytics: views, unique views, top pages, views per day chart
- Revision history with content preview and one-click restore
- Password-protected pages with customizable appearance and quick presets
- Page visibility control: all visitors, guests only, clients only, client groups
- WHMCS page rewrites: replace home page, footer, domain register, or custom URL patterns
- Import and export pages as JSON (individual or bulk)
- Parent pages and custom sort order
- Page statuses: Draft, Published, Scheduled, Archived
- WHMCS product integration: Product Cards and Domain widgets pull live pricing
- Dashboard with statistics, recent changes, top viewed pages, system info
- One-click page creation from the pages list
- License verification system with online/offline modes
- English language interface# Installation and Configuration
Guide to install, activate, configure and update the PUQ Page Manager WHMCS module.
# WHMCS Module Installation and Update
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
## System requirements
| Requirement | Minimum |
|-------------|---------|
| **WHMCS** | 8.x+, 9.x+ |
| **PHP** | 7.4, 8.1, 8.2, 8.3, 8.4 |
| **ionCube Loader** | v15+ |
> **Note:** The module uses ionCube encoding. Make sure ionCube Loader is installed and active on your server.
---
## Download
The module can be ordered and downloaded from PUQ Cloud:
- **Order Module:** [https://puqcloud.com/whmcs-addon-puq-page-manager.php](https://puqcloud.com/whmcs-addon-puq-page-manager.php)
- **Documentation:** [https://doc.puq.info/books/page-manager-whmcs-addon](https://doc.puq.info/books/page-manager-whmcs-addon)
- **All Versions / Download:** [https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/)
- **Support:** [https://puqcloud.com/submitticket.php?step=2&deptid=1](https://puqcloud.com/submitticket.php?step=2&deptid=1)
- **Community:** [https://community.puqcloud.com/](https://community.puqcloud.com/)
- **Direct download link for the latest version:**
```bash
wget https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/PUQ_WHMCS-Page-Manager-latest.zip
```
> All versions can be found at this link:
> [https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/)
---
## Installation
### Step 1: Unzip the Archive
On your WHMCS server (or locally):
```bash
unzip PUQ_WHMCS-Page-Manager-latest.zip
```
### Step 2: Copy the Module Files
Copy the extracted module directory directly to your WHMCS directory:
```bash
# For addon modules:
cp -r PUQ_WHMCS-Page-Manager/puq_page_manager /var/www/html/whmcs/modules/addons/
```
### Step 3: Activate and Configure the Addon Module
1. Log in to the WHMCS admin area.
2. Navigate to **System Settings > Addon Modules** (or **Setup > Addon Modules** in older WHMCS versions).
3. Find **PUQ Page Manager** in the list and click **Activate**.
4. Click **Configure**, enter your **License Key**, and select the admin groups allowed to access the module.
5. Click **Save Changes**.
---
## File Structure
Structure of files after a successful installation:
```
whmcs/
├── modules/
│ └── addons/
│ └── puq_page_manager/ # Addon files
```
---
## Update Procedure
To update the module to a newer version:
1. **Deactivate** the addon module in **Setup > Addon Modules**.
2. Make a backup of your WHMCS files and database.
3. Download the latest version for your PHP version.
4. Extract the ZIP and overwrite the existing files in the `modules/` directories.
5. **Reactivate** the addon module in **Setup > Addon Modules** (this will trigger database migrations). All settings and client data are safe during this process.
# Activation and permissions
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
To activate the module and set up permissions, follow these steps:
1. Log in to your WHMCS Admin Area.
2. Navigate to **System Settings > Addon Modules** (or **Setup > Addon Modules** in older WHMCS versions).
3. Locate **PUQ Page Manager** in the list and click **Activate**.
4. Once activated, click **Configure** next to the module name.
5. In the configuration panel:
- Enter your **License key** (provided upon purchase).
- Under **Access Control**, select the administrative role groups (e.g., Full Administrator, Support) that are permitted to access and manage this module.
6. Click **Save Changes**.
*module-activation-access-control.png*
# Admin Area
Managing custom pages, system layouts, templates, and general settings from the WHMCS Admin Interface.
# Admin Area Overview
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
This page provides an overview of the administrative interface and actions available to administrators.
## Accessing the Admin Area
To access the admin area of the module:
1. Log in to your WHMCS Admin Area.
2. Navigate to **Addons > PUQ Page Manager** (or the corresponding provisioning menu for server modules).
## Management Actions
The admin interface allows performing the following actions:
- **Create Page**: Click the "Create New Page" button. It generates a default editor page.
- **Export Page**: Download individual page layouts as JSON format.
- **Import Page**: Upload previously exported JSON layouts directly into the builder.
- **Clone Page**: Instantly copy an existing page structure.
- **Delete Page**: Deletes the page configuration.
## Settings
Explain settings and tools:
- **General Settings**: Manage default page, SEO tags, and page rewrites.
- **Analytics**: Track page views, unique views, top pages, and views per day.
## Screenshot
*02-dashboard.png*
# Dashboard
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Dashboard is the main screen of PUQ Page Manager. It provides a quick overview of your pages, recent activity, and system information.
*02-dashboard.png*
---
## Overview Cards
At the top of the dashboard, four cards display key statistics:
| Card | Description |
|------|-------------|
| **Total Pages** | Total number of pages created |
| **Published Pages** | Pages with "Published" status |
| **Draft Pages** | Pages with "Draft" status |
| **Archived Pages** | Pages with "Archived" status |
---
## Top Viewed Pages
A table showing the most viewed pages, sorted by total views. Displays the page name and view count.
---
## System Info
The right-side panel shows:
| Metric | Description |
|--------|-------------|
| **Total Views** | Combined view count across all pages |
| **Total Revisions** | Number of saved page revisions |
| **Available Widgets** | Number of widgets available in the editor |
---
## Recent Changes
A table listing the most recent page edits, including the page name, who made the change, the language, and when the change was made.
---
## Navigation
The top navigation bar provides access to all module sections:
| Tab | Description |
|-----|-------------|
| **Dashboard** | This page — overview and statistics |
| **Pages** | List of all pages, add new page |
| **Analytics** | Page view statistics and charts |
| **Settings** | General settings, page rewrites, import/export, password page appearance |
| **Help** | Links to documentation, website, and community |
# Pages
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Pages section allows you to view, create, edit, and manage all your custom pages.
*03-pages.png*
---
## All Pages
The pages list displays all created pages in a table with the following columns:
| Column | Description |
|--------|-------------|
| **ID** | Unique page identifier |
| **Name** | Page title |
| **URL** | The URL slug used to access the page |
| **Status** | Current status: Published, Draft, Scheduled, or Archived |
| **Views** | Total page view count |
| **Created** | Date and time when the page was created |
| **Actions** | Edit, view, duplicate, export, delete |
---
## Add New Page & Quick Start (Demo Pages)
- **Add Page**: Click the **Add Page** button at the top of the pages list to create a blank new page and open the editor immediately.
- **Create Demo Pages**: Click the **Demo** button to instantly generate preconfigured, production-ready showcase pages (including a homepage, an about us page, and complete widget demonstration pages). All widgets are populated with balanced color palettes and English content to kickstart evaluation and design.
---
## Page Editor
Clicking **Edit** on any page opens the page editor. The editor is organized into collapsible panels:
### General Settings
| Field | Description |
|-------|-------------|
| **Name** | Page title displayed in the browser tab and page header |
| **URL** | URL slug for the page (e.g., `my-page` → `yourdomain.com/index.php?m=puq_page_manager&page=my-page`) |
| **Parent Page** | Optional parent page for hierarchical organization |
| **Sort Order** | Numeric value for sorting pages (lower = first) |
| **Status** | Draft, Published, Scheduled, or Archived |
| **Reset Views** | Click the reset button next to the view counter to reset this page’s total views back to zero |
### Visibility & Access
| Field | Description |
|-------|-------------|
| **Visibility** | Who can see the page: All Visitors, Guests Only, Clients Only, or Client Groups |
| **Required Login** | If enabled, visitors must log in to view the page |
| **Password Protection** | Protect the page with a password |
### Content
The block widget editor (EditorJS) is the main content area. You can add, arrange, and configure widgets by clicking the **+** button or using the toolbar. Each widget block can be moved up/down, duplicated, or deleted.
### SEO
| Field | Description |
|-------|-------------|
| **OG Title** | Open Graph title for social media sharing |
| **OG Description** | Open Graph description |
| **OG Image** | Open Graph image URL |
| **Keyword(s)** | Meta keywords |
| **Canonical URL** | Canonical URL for SEO |
| **Meta Robots** | Meta robots directive (index/noindex, follow/nofollow) |
| **Schema JSON-LD** | Structured data in JSON-LD format |
| **Custom CSS** | Custom CSS styles for this page only |
| **Custom JS** | Custom JavaScript for this page only |
### Languages
The Languages panel allows you to manage translations for the page. You can:
- Add translations for any language
- Copy content from another language
- Track translation status: **Translated**, **Needs Update**, **Not Translated**
- Delete translations
### Revisions
The Revisions panel shows the revision history for the page. Each revision stores a snapshot of the page content. You can:
- Preview the content of any revision
- Restore a previous revision with one click
---
## Import / Export
- **Export Page** — export a single page as a JSON file (available from the page actions menu)
- **Export All Pages** — export all pages as a single JSON file (available from the Settings page)
- **Import Page** — import a page from a JSON file (available from the Settings page)
# Analytics
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Analytics page provides insights into page views and visitor activity.
*04-analytics.png*
---
## Overview Cards
Four cards at the top display key metrics:
| Card | Description |
|------|-------------|
| **Total Views** | Total page views across all pages (all time) |
| **Today** | Page views recorded today |
| **This Week** | Page views for the current week |
| **This Month** | Page views for the current month |
---
## Views per Day
A horizontal bar chart showing the number of page views per day. Each bar represents one day with the exact view count displayed.
---
## Top Pages
A table listing the most popular pages, sorted by total views:
| Column | Description |
|--------|-------------|
| **Name** | Page title |
| **URL** | Page URL slug |
| **Total Views** | Total number of views |
| **Unique Views** | Number of unique visitors |
---
## Reset Statistics
Administrators can flush analytics data at any time:
- **Reset All Views**: Use the reset button in the header of the Analytics tab to clear view history across all pages and start fresh with tracking.
# Settings
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Settings page allows you to configure page rewrites, import/export pages, and customize the password protection page appearance.
*05-settings.png*
---
## Page Rewrites
Page rewrites allow you to replace standard WHMCS pages with your custom pages.
### Built-in Rewrites
| Rewrite | Description |
|---------|-------------|
| **Rewrite Home Page** | Replace the WHMCS home page with a custom page |
| **Rewrite Footer** | Replace the WHMCS footer with a custom page |
| **Rewrite Domain Register** | Replace the domain registration page with a custom page |
Each rewrite has a YES/NO toggle and a page selector dropdown.
### Custom Page Rewrites
You can create custom rewrites to replace any WHMCS page URL with your custom page.
Click **+ Add Rewrite** to add a new rule. Each rule has:
| Field | Description |
|-------|-------------|
| **WHMCS Page** | The URL pattern to match (supports `*` wildcard) |
| **Custom Page** | The page to display instead |
| **Active** | Enable or disable the rewrite |
> **Note:** Use `*` as a wildcard. Example: `*knowledgebase*` matches any URL containing "knowledgebase".
---
## Import / Export
| Action | Description |
|--------|-------------|
| **Export** | Select a page from the dropdown and click "Export" to download it as a JSON file |
| **Export All Pages** | Export all pages as a single JSON archive |
| **Import** | Upload a JSON file to import a page |
---
## Password Page Appearance
Customize the look and feel of the password protection page that visitors see when accessing a password-protected page.
*06-settings-password-appearance.png*
### Quick Presets
Choose from built-in color presets to quickly style the password page: Default, Ocean, Sunset, Forest, Dark, Rose, Corporate, Neon, Gold, Cherry, Arctic, Charcoal, Lavender, Emerald.
### Customization Options
| Setting | Description |
|---------|-------------|
| **Gradient Start Color** | Start color of the background gradient |
| **Gradient End Color** | End color of the background gradient |
| **Card Background** | Background color of the password card |
| **Text Color** | Color of the text on the card |
| **Card Border Radius** | Corner rounding of the card (in pixels) |
| **Header Icon** | FontAwesome icon class displayed at the top of the card |
| **Error Color** | Color of the error message when an incorrect password is entered |
| **Card Shadow** | Enable or disable the card drop shadow |
A **live preview** on the right side of the settings shows how the password page will look in real time as you adjust the settings.
Click **Reset to Defaults** to restore the default appearance settings.
# Client Area
Viewing pages, widgets rendering, visibility control, and interacting with protected content from the Client Area.
# Client Area Overview
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
This page describes the client area interface and actions available to active service clients.
## Accessing the Client Area
Pages are available via clean, search-engine-friendly URLs mapped by the administrator (e.g., `https://yourdomain.com/page-url-name/`).
## Client Actions
Within the control area, clients can:
- **View Custom Pages**: Access seamlessly integrated custom pages in the WHMCS frontend.
- **Unlock Password Protected Pages**: Clients will be prompted with a secure login card to unlock the content if a page is password protected.
## Visibility Settings
Pages can be restricted to specific user scopes:
1. **All Visitors**: Open to everyone.
2. **Guests Only**: Visible only to logged-out users.
3. **Clients Only**: Visible only to logged-in users.
4. **Client Groups**: Restricts access to members of specific client groups defined in WHMCS.
## Screenshot
*client-overview.png*
# Widgets
PUQ Page Manager includes 24 built-in widgets for the block editor. Each widget can be added to any page, configured with custom settings, and styled with multiple design variants.
# Announcements
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Announcements widget displays the latest announcements pulled directly from the WHMCS `tblannouncements` table. It renders a configurable list of announcement entries with optional dates, excerpts, and read-more links.
---
## Admin Settings
*announcements-admin.png*
---
## Frontend
*announcements-frontend.png*
---
## Settings
### Content Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **count** | number | `5` | Number of announcements to display |
| **show_date** | checkbox | off | Show the announcement publication date |
| **show_excerpt** | checkbox | off | Show a text excerpt below the announcement title |
| **excerpt_length** | number | `200` | Maximum number of characters for the excerpt |
| **link_text** | text | `Read more` | Label text for the link to the full announcement |
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the background image |
| **background_color** | color | `#FFFFFF` | Background color of the widget container |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default announcement list style |
# Call To Action
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Call To Action widget renders a prominent banner with a heading, subtitle, description, and up to two action buttons. It is designed to direct visitors toward a key conversion goal such as signing up, purchasing, or contacting support.
---
## Admin Settings
*call-to-action-admin.png*
---
## Frontend
*call-to-action-frontend.png*
---
## Settings
### Content Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **heading** | text | — | Main heading text |
| **subtitle** | text | — | Subtitle displayed below the heading |
| **description** | textarea | — | Longer descriptive text below the subtitle |
| **layout** | select | `center` | Content alignment: `center`, `left`, or `horizontal` |
| **text_color** | color | `#333333` | Color applied to all text content |
---
### Button 1
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **button_text** | text | — | Label for the primary button |
| **button_url** | text | — | URL the primary button links to |
| **button_color** | color | `#337ab7` | Background color of the primary button |
| **button_target** | select | `_self` | Link target: `Same tab` or `New tab` |
---
### Button 2
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **button2_text** | text | — | Label for the secondary button |
| **button2_url** | text | — | URL the secondary button links to |
| **button2_color** | color | `#6c757d` | Background color of the secondary button |
| **button2_target** | select | `_self` | Link target: `Same tab` or `New tab` |
---
### Button Options
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **button_size** | select | `md` | Size of both buttons: `sm`, `md`, or `lg` |
| **button_rounded** | checkbox | off | Apply rounded corners to both buttons |
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the background image |
| **background_color** | color | `#FFFFFF` | Background color of the widget container |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default call-to-action style |
# Contact Form
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Contact Form widget renders a fully customizable form that submits visitor messages directly to a WHMCS support department. Form fields are configurable with a visual editor supporting multiple input types, validation patterns, and required flags.
---
## Admin Settings
*contact-form-admin.png*
---
## Frontend
*contact-form-frontend.png*
---
## Settings
### Form Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **department_id** | text | — | WHMCS support department ID to receive submitted tickets |
| **subject_default** | text | — | Pre-filled subject line for the generated support ticket |
| **success_message** | text | `Thank you! Your message has been sent.` | Message shown to the visitor after a successful submission |
| **button_text** | text | `Send Message` | Label on the submit button |
| **button_color** | color | `#6420c0` | Background color of the submit button |
---
### Form Fields
Fields are defined with a visual row editor. Each row has the following columns:
| Column | Description |
|--------|-------------|
| **Name** | Internal field name (used as the form input `name` attribute) |
| **Label** | Human-readable label shown above the field |
| **Type** | Input type: `text`, `email`, `textarea`, `select`, `tel`, `number`, or `hidden` |
| **Options** | Comma-separated list of options for `select` type fields |
| **Pattern** | Optional regex validation pattern (e.g. `^[A-Za-z]+$`) |
| **Required** | Checkbox — marks the field as mandatory |
Default fields: `name` (text, required), `email` (email, required), `message` (textarea, required).
Fields can be added, removed, and reordered using the visual editor.
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the background image |
| **background_color** | color | `#FFFFFF` | Background color of the widget container |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default contact form style |
# Custom Code
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Custom Code widget allows you to insert raw HTML, CSS, and JavaScript directly into any page. All three code fields are presented as dark-themed monospace editors. HTML and CSS are injected into the page output; JavaScript is executed after the page loads.
---
## Admin Settings
*custom-code-admin.png*
---
## Frontend
*custom-code-frontend.png*
---
## Settings
### Code Settings
| Setting | Type | Description |
|---------|------|-------------|
| **html** | textarea (dark editor) | Raw HTML markup to inject into the page |
| **css** | textarea (dark editor) | CSS rules applied to the page when this block is rendered |
| **js** | textarea (dark editor) | JavaScript executed after page load |
Code is stored base64-encoded internally to preserve special characters and formatting.
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the background image |
| **background_color** | color | `#FFFFFF` | Background color of the widget container |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default custom code container style |
# Domain Search
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Domain Search widget renders a domain search form using WHMCS domain functionality. Visitors can type a domain name, search for availability, initiate a domain transfer, or browse all pricing. All UI elements are fully color-customizable.
---
## Admin Settings
*domain-search-admin.png*
---
## Frontend
*domain-search-frontend.png*
---
## Settings
### Color Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **color_1** | color | `#4f1998` | Primary UI color (e.g. background gradient start) |
| **color_2** | color | `#0de1b9` | Secondary UI color (e.g. background gradient end) |
| **color_3** | color | `#000000` | Tertiary UI color |
| **color_4** | color | `#000000` | Quaternary UI color |
| **color_5** | color | `#000000` | Fifth UI color |
| **color_6** | color | `#000000` | Sixth UI color |
---
### Header
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **header** | text | `Secure your domain name` | Heading text displayed above the search input |
| **header_text_color** | color | `#000000` | Color of the header text |
| **disable_header** | checkbox | off | Hide the header entirely |
---
### Search Button
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **search_button_name** | text | `Search` | Label on the search button |
| **search_button_color** | color | `#6420c0` | Background color of the search button |
| **search_button_text_color** | color | `#0de1b9` | Text color of the search button |
---
### Input Placeholder
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **placeholder** | text | `eg. example.com` | Placeholder text inside the domain input field |
| **placeholder_text_color** | color | `#a484d5` | Color of the placeholder text |
| **disable_placeholder** | checkbox | off | Hide the placeholder text |
---
### Transfer Button
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **transfer_button_name** | text | `Transfer` | Label on the domain transfer button |
| **transfer_button_color** | color | `#6420c0` | Background color of the transfer button |
| **transfer_button_text_color** | color | `#0de1b9` | Text color of the transfer button |
| **disable_transfer_button** | checkbox | off | Hide the transfer button |
---
### View All Pricing Button
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **view_all_pricing_button_name** | text | `View all pricing` | Label on the pricing button |
| **view_all_pricing_button_color** | color | `#0de1b9` | Background color of the pricing button |
| **view_all_pricing_button_text_color** | color | `#6420c0` | Text color of the pricing button |
| **disable_view_all_pricing_button** | checkbox | off | Hide the view all pricing button |
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the background image |
| **background_color** | color | `#FFFFFF` | Background color of the widget container |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default domain search style |
# Domain TLD
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Domain TLD widget displays domain extension pricing fetched from the WHMCS `GetTLDPricing` API. TLD entries can be defined manually in the admin editor or pulled randomly from WHMCS. Each TLD supports a promotional label (Hot, New, Sale), an IDN flag, and a custom image.
---
## Admin Settings
*domain-tld-admin.png*
---
## Frontend
*domain-tld-frontend.png*
---
## Settings
### Display Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **max_show** | number | `0` | Maximum number of TLD entries to display (0 = show all) |
| **show_randomly_whmcs** | checkbox | off | Pull TLD pricing randomly from WHMCS instead of using the manual list |
---
### Header
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **header** | text | `Secure your domain name` | Heading text above the TLD table |
| **header_text_color** | color | `#000000` | Color of the header text |
| **disable_header** | checkbox | off | Hide the header entirely |
| **year** | text | `year` | Label used for the pricing period (e.g. `year`, `/yr`) |
---
### Promotional Labels
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **hot_label** | text | `Hot` | Text shown on the Hot badge |
| **hot_color** | color | `#d51111` | Background color of the Hot badge |
| **hot_text_color** | color | `#ffffff` | Text color of the Hot badge |
| **new_label** | text | `New` | Text shown on the New badge |
| **new_color** | color | `#5cb75c` | Background color of the New badge |
| **new_text_color** | color | `#4f1998` | Text color of the New badge |
| **sale_label** | text | `Sale` | Text shown on the Sale badge |
| **sale_color** | color | `#eeac4e` | Background color of the Sale badge |
| **sale_text_color** | color | `#000000` | Text color of the Sale badge |
| **idn_label** | text | `IND` | Text shown on the IDN badge |
| **idn_color** | color | `#767676` | Background color of the IDN badge |
| **idn_text_color** | color | `#fdfdfd` | Text color of the IDN badge |
---
### View All Pricing Button
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **view_all_pricing_button_name** | text | `View all pricing` | Label on the pricing button |
| **view_all_pricing_button_color** | color | `#0de1b9` | Background color of the pricing button |
| **view_all_pricing_button_text_color** | color | `#6420c0` | Text color of the pricing button |
| **disable_view_all_pricing_button** | checkbox | off | Hide the view all pricing button |
---
### Color Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **color_1** | color | `#6420c0` | Primary UI color |
| **color_2** | color | `#0de1b9` | Secondary UI color |
| **color_3** | color | `#6420c0` | Tertiary UI color |
| **color_4** | color | `#d41111` | Quaternary UI color |
| **color_5** | color | `#a484d5` | Fifth UI color |
| **color_6** | color | `#000000` | Sixth UI color |
---
### TLD Entries
TLD entries are managed with a visual table editor. Each row defines one TLD:
| Column | Description |
|--------|-------------|
| **TLD** | The domain extension (e.g. `.com`, `.net`) |
| **IMG** | URL of a logo or flag image for the TLD |
| **Promotion** | Badge to display: none, `Hot`, `New`, or `Sale` |
| **IDN** | Checkbox — marks the TLD as IDN-supported |
Rows can be added, removed, and reordered using the arrow buttons.
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the background image |
| **background_color** | color | `#FFFFFF` | Background color of the widget container |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default domain TLD pricing table style |
# Feature Grid
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Feature Grid widget renders a responsive grid of feature cards. Each card displays a Font Awesome icon, a title, a description, and an optional link. The grid layout, icon appearance, card alignment, and visual options are all configurable.
---
## Admin Settings
*feature-grid-admin.png*
---
## Frontend
*feature-grid-frontend.png*
---
## Settings
### Section Header
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **heading** | text | — | Section heading displayed above the grid (e.g. `Why Choose Us`) |
| **heading_align** | select | `center` | Alignment of the heading: `center`, `left`, or `right` |
| **subtitle** | text | — | Short description displayed beneath the heading |
---
### Grid Layout
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **columns** | select | `3` | Number of columns: `2`, `3`, or `4` |
| **gap** | select | `24` | Spacing between cards: `16` (Small), `24` (Medium), or `32` (Large) pixels |
---
### Icon Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **icon_color** | color | `#337ab7` | Color applied to all feature icons |
| **icon_shape** | select | `rounded` | Icon background shape: `rounded` (rounded square), `circle`, or `none` (no background) |
| **icon_size** | select | `md` | Icon size: `sm` (Small), `md` (Medium), or `lg` (Large) |
---
### Card Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **card_align** | select | `center` | Content alignment inside each card: `center` or `left` |
| **title_color** | color | `#2c3e50` | Color of the card title text |
| **link_text** | text | `Learn more` | Label for the optional card link |
| **show_border** | checkbox | off | Add a border around each card |
| **show_shadow** | checkbox | on | Add a drop shadow to each card |
| **show_accent** | checkbox | off | Add a colored accent line at the top of each card |
---
### Feature Items
Items are managed with a visual row editor. Each row defines one feature card:
| Column | Description |
|--------|-------------|
| **Icon** | Font Awesome class for the icon (e.g. `fas fa-server`, `fas fa-shield-alt`) |
| **Title** | Feature card heading text |
| **Description** | Short description text inside the card |
| **Link URL** | Optional URL the card title or link text points to |
Items can be added and removed using the editor controls.
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the background image |
| **background_color** | color | `#FFFFFF` | Background color of the widget container |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default feature grid style |
# Hero Section
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Hero Section widget renders a full-width banner intended for the top of a page. It supports a badge tag, title, subtitle, description, two action buttons, overlay effects, a background video, and parallax scrolling. All typography, layout, and background options are configurable.
---
## Admin Settings
*hero-section-admin.png*
---
## Frontend
*hero-section-frontend.png*
---
## Settings
### Content Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **badge** | text | — | Small tag displayed above the title (e.g. `New Release`, `Special Offer`) |
| **title** | text | — | Main hero heading |
| **subtitle** | text | — | Secondary line of text below the title |
| **description** | textarea | — | Longer descriptive paragraph below the subtitle |
---
### Button 1
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **button_text** | text | — | Label for the primary button |
| **button_url** | text | — | URL the primary button links to |
| **button_color** | color | `#337ab7` | Background color of the primary button |
| **button_target** | select | `_self` | Link target: `Same tab` or `New tab` |
---
### Button 2
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **button2_text** | text | — | Label for the secondary button |
| **button2_url** | text | — | URL the secondary button links to |
| **button2_color** | color | `#ffffff` | Background color of the secondary button |
| **button2_target** | select | `_self` | Link target: `Same tab` or `New tab` |
---
### Typography and Alignment
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **text_color** | color | `#ffffff` | Color applied to all text content in the hero |
| **text_align** | select | `center` | Horizontal alignment of content: `center`, `left`, or `right` |
| **vertical_align** | select | `center` | Vertical alignment of content: `center`, `top`, or `bottom` |
---
### Dimensions and Overlay
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **height** | text | `80vh` | CSS height of the hero section (e.g. `80vh`, `600px`) |
| **overlay_color** | color | `#000000` | Color of the semi-transparent overlay on top of the background |
| **overlay_opacity** | number | `40` | Opacity of the overlay (0 = fully transparent, 100 = fully opaque) |
| **video_url** | text | — | URL of a `.mp4` video file to use as the background |
---
### Button Options
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **button_rounded** | checkbox | on | Apply rounded corners to both buttons |
| **parallax** | checkbox | off | Enable parallax scrolling effect on the background image |
---
### Layout Settings
| Setting | Type | Default | Description |
|---------|------|---------|-------------|
| **width** | text | — | CSS width of the widget container (e.g. `800px`, `100%`) |
| **margin_top** | text | — | CSS top margin (e.g. `20px`) |
| **margin_bottom** | text | — | CSS bottom margin (e.g. `20px`) |
| **style** | select | `puq` | Visual style template |
| **background_image** | text | — | URL of the hero background image |
| **background_color** | color | `#1a1a2e` | Fallback background color when no image is set |
| **disable_background_shadow** | checkbox | off | Remove the drop shadow from the container |
| **disable_background_radius_top** | checkbox | off | Remove the top border radius from the container |
| **disable_background_radius_bottom** | checkbox | off | Remove the bottom border radius from the container |
| **disable_background** | checkbox | off | Disable the background container entirely |
| **full_width** | checkbox | off | Stretch the widget to the full page width |
---
## Style Templates
| Template | Description |
|----------|-------------|
| `puq` | Default hero section style |
# Intelligent Domain Search
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Intelligent Domain Search widget provides an advanced domain search experience that displays TLD availability, pricing, and buy/transfer actions directly on the page. It pulls live TLD data from WHMCS and presents results in a structured results panel with per-extension availability status and pricing.
---
## Admin View
*intelligent-domain-search-admin.png*
---
## Frontend View
*intelligent-domain-search-frontend.png*
---
## Settings
### Layout
| Setting | Description |
|---------|-------------|
| **width** | Widget container width (e.g. `100%`, `800px`) |
| **margin-top** | Top margin of the widget block |
| **margin-bottom** | Bottom margin of the widget block |
| **Style** | Visual style template (1 style available: `puq`) |
### Colors
| Setting | Description |
|---------|-------------|
| **Color 1** | Primary accent color |
| **Color 2** | Secondary accent color |
| **Color 3** | Color 3 |
| **Color 4** | Color 4 |
| **Color 5** | Color 5 |
| **Color 6** | Color 6 |
### Background
| Setting | Description |
|---------|-------------|
| **Background image** | URL of the background image for the widget container |
| **Background color** | Background color of the widget container |
| **Disable Shadow** | Remove the drop shadow from the widget container |
| **Disable Radius top** | Remove top corner rounding |
| **Disable Radius bottom** | Remove bottom corner rounding |
| **Disable Background** | Remove the background panel entirely |
| **Full width** | Stretch the widget to the full page width |
### Header
| Setting | Description |
|---------|-------------|
| **Header** | Heading text displayed above the search bar (e.g. `Secure your domain name`) |
| **Text color** | Color of the header text |
| **Disable header** | Hide the header text |
### Search Button
| Setting | Description |
|---------|-------------|
| **Search button name** | Label for the search action button (e.g. `Search`) |
| **Button color** | Background color of the search button |
| **Text color** | Text color of the search button |
### Placeholder
| Setting | Description |
|---------|-------------|
| **Placeholder** | Placeholder text inside the search input (e.g. `eg. example.com`) |
| **Text color** | Color of the placeholder text |
| **Disable placeholder** | Hide the placeholder text |
### View All Pricing Button
| Setting | Description |
|---------|-------------|
| **View all pricing button name** | Label for the pricing link button (e.g. `View all pricing`) |
| **Button color** | Background color of the button |
| **Text color** | Text color of the button |
| **Disable view all pricing button** | Hide the view all pricing button |
### Transfer Button
| Setting | Description |
|---------|-------------|
| **Transfer button name** | Label for the transfer action (e.g. `Transfer`) |
| **Button color** | Background color of the transfer button |
| **Text color** | Text color of the transfer button |
### Buy Button
| Setting | Description |
|---------|-------------|
| **Buy button name** | Label for the buy/add to cart action (e.g. `Buy`) |
| **Button color** | Background color of the buy button |
| **Text color** | Text color of the buy button |
### Result Labels
| Setting | Description |
|---------|-------------|
| **Search results label** | Section heading for primary results (e.g. `Search results`) |
| **Search results text color** | Color of the search results label |
| **Disable search results** | Hide the search results label |
| **Other extensions label** | Section heading for additional TLD results (e.g. `Other extensions`) |
| **Other extensions text color** | Color of the other extensions label |
| **Disable other extensions** | Hide the other extensions section |
| **Available label** | Status label for available domains (e.g. `Available`) |
| **Available text color** | Color of the available status label |
| **Already reserved label** | Status label for taken domains (e.g. `Already reserved`) |
| **Already reserved text color** | Color of the reserved status label |
| **Renew label** | Label used for renewal actions (e.g. `Renew`) |
| **Renew text color** | Color of the renew label |
### Other Extensions Button
| Setting | Description |
|---------|-------------|
| **Show other extensions button name** | Label for the expand button (e.g. `Show other extensions`) |
| **Button color** | Background color of the expand button |
| **Text color** | Text color of the expand button |
| **Number other results** | Number of additional TLD results to show (e.g. `10`) |
# Map
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Map widget embeds an interactive OpenStreetMap into the page. You can set the geographic coordinates, zoom level, a marker title, and control the appearance of the map container. The map supports scroll-zoom toggle and an optional drop shadow.
---
## Admin View
*map-admin.png*
---
## Frontend View
*map-frontend.png*
---
## Settings
### Layout
| Setting | Description |
|---------|-------------|
| **width** | Widget container width (e.g. `100%`, `800px`) |
| **margin-top** | Top margin of the widget block |
| **margin-bottom** | Bottom margin of the widget block |
| **Style** | Visual style template (1 style available: `puq`) |
### Background
| Setting | Description |
|---------|-------------|
| **Background image** | URL of the background image for the widget container |
| **Background color** | Background color of the widget container |
| **Disable Shadow** | Remove the drop shadow from the widget container |
| **Disable Radius top** | Remove top corner rounding |
| **Disable Radius bottom** | Remove bottom corner rounding |
| **Disable Background** | Remove the background panel entirely |
| **Full width** | Stretch the widget to the full page width |
### Map
| Setting | Description |
|---------|-------------|
| **Latitude** | Geographic latitude of the map center (e.g. `52.2297`) |
| **Longitude** | Geographic longitude of the map center (e.g. `21.0122`) |
| **Zoom** | Initial zoom level, from 1 (world) to 18 (street level); default is `14` |
| **Marker Title** | Tooltip text shown when hovering over the map marker |
| **Map Height** | Height of the map iframe (e.g. `400px`) |
| **Border Radius** | Corner rounding of the map container (e.g. `12px`) |
### Options
| Setting | Description |
|---------|-------------|
| **Shadow** | Add a drop shadow beneath the map |
| **Disable scroll zoom** | Prevent the map from zooming when the user scrolls over it |
# Mini Menu
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Mini Menu widget renders a compact horizontal navigation menu strip. Each item can link to any URL with optional new-tab opening and box-style display. Three style variants are available: a default inline strip, a bottom-anchored bar, and a static positioned menu.
---
## Admin View
*mini-menu-admin.png*
---
## Frontend View
*mini-menu-frontend.png*
---
## Styles
3 style templates are available: `puq` (default), `puq-bottom`, `puq-static`.
---
## Settings
### Layout
| Setting | Description |
|---------|-------------|
| **width** | Widget container width (e.g. `100%`, `800px`) |
| **margin-top** | Top margin of the widget block |
| **margin-bottom** | Bottom margin of the widget block |
| **Style** | Visual style template (`puq`, `puq-bottom`, `puq-static`) |
### Colors
| Setting | Description |
|---------|-------------|
| **Buttons background** (`color_1`) | Background color of the menu buttons |
| **Button text** (`color_2`) | Text color of the menu buttons |
| **Button border** (`color_3`) | Border color of the menu buttons |
| **Buttons background hover** (`color_4`) | Background color on hover |
| **Button text hover** (`color_5`) | Text color on hover |
| **Button border hover** (`color_6`) | Border color on hover |
### Background
| Setting | Description |
|---------|-------------|
| **Background image** | URL of the background image for the widget container |
| **Background color** | Background color of the widget container |
| **Disable Shadow** | Remove the drop shadow from the widget container |
| **Disable Radius top** | Remove top corner rounding |
| **Disable Radius bottom** | Remove bottom corner rounding |
| **Disable Background** | Remove the background panel entirely |
| **Full width** | Stretch the widget to the full page width |
### Header
| Setting | Description |
|---------|-------------|
| **Header** | Optional heading text displayed above the menu |
| **Text color** | Color of the header text |
| **Disable header** | Hide the header text |
### Menu Items
Each menu item row contains the following fields:
| Field | Description |
|-------|-------------|
| **Menu item name** | Display label for the navigation link |
| **URL** | Destination URL for the link |
| **New Tab** | Open the link in a new browser tab when checked |
| **Box** | Display style variant for the individual button |
Use the **+** button to add new menu items. Items can be reordered with the up/down arrows and removed with the delete button.
# Page Background
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Page Background widget sets the background for the entire page. Unlike content widgets, it does not render a visible block in the page flow — instead it applies a full-page background using an image, a solid color, or a looping video. Only one Page Background widget should be placed per page.
---
## Admin View
*page-background-admin.png*
---
## Frontend View
*page-background-frontend.png*
---
## Settings
| Setting | Description |
|---------|-------------|
| **Style** | Template variant (1 style available: `puq`) |
| **Darken background** | Overlay opacity applied on top of the background image or video (0–99%) |
| **Background image** | URL of the background image |
| **Background color** | Fallback solid color when no image or video is set |
| **Background video (mp4)** | URL to the `.mp4` video file for a looping background video |
| **Background video (ogg)** | URL to the `.ogg` video file (fallback for browsers that do not support mp4) |
| **Background video (webm)** | URL to the `.webm` video file (fallback for browsers that do not support mp4) |
# Product Cards
### PUQ Page Manager module **[WHMCS](https://puqcloud.com/link.php?id=77)**
##### [Order now](https://puqcloud.com/whmcs-addon-puq-page-manager.php) | [Download](https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/) | [Community](https://community.puqcloud.com/)
The Product Cards widget displays WHMCS products with their pricing and descriptions in a card layout. Products can be loaded automatically from a WHMCS product group or added manually. Each card supports hot/new/sale badge overlays and an Order Now button. Ten visual styles are available.
---
## Admin View
*product-cards-01-admin.png*
---
## Frontend Styles
*product-cards-02-style-default.png*
*product-cards-03-style-bold.png*
*product-cards-04-style-border.png*
*product-cards-05-style-glass.png*
*product-cards-06-style-list.png*
*product-cards-07-style-line.png*
*product-cards-08-style-tile.png*
*product-cards-09-style-split.png*
*product-cards-10-style-minimal.png*
*product-cards-11-style-wave.png*
*product-cards-12-style-wave-alt.png*
---
## Settings
### Layout
| Setting | Description |
|---------|-------------|
| **width** | Widget container width (e.g. `100%`, `1200px`) |
| **margin-top** | Top margin of the widget block |
| **margin-bottom** | Bottom margin of the widget block |
| **Style** | Visual style template (`puq`, `puq-bold`, `puq-border`, `puq-glass`, `puq-line`, `puq-list`, `puq-minimal`, `puq-split`, `puq-tile`, `puq-wave`) |
| **Card width** | Fixed width for each product card (e.g. `300px`) |
### Colors
| Setting | Description |
|---------|-------------|
| **Product name** (`color_1`) | Color of the product name text |
| **Group name** (`color_2`) | Color of the product group name text |
| **Price** (`color_3`) | Color of the price value |
| **Billing cycle** (`color_4`) | Color of the billing cycle label |
| **Description** (`color_5`) | Color of the product description text |
| **Card background** (`color_6`) | Background color of each product card |
| **Card border** (`color_7`) | Border color of each product card |
### Background
| Setting | Description |
|---------|-------------|
| **Background image** | URL of the background image for the widget container |
| **Background color** | Background color of the widget container |
| **Disable Shadow** | Remove the drop shadow from the widget container |
| **Disable Radius top** | Remove top corner rounding |
| **Disable Radius bottom** | Remove bottom corner rounding |
| **Disable Background** | Remove the background panel entirely |
| **Full width** | Stretch the widget to the full page width |
### Header
| Setting | Description |
|---------|-------------|
| **Header text** | Main heading text above the product cards (e.g. `Our products`) |
| **Header text color** | Color of the heading text |
| **Header description** | Subheading or description text below the main heading |
| **Header description color** | Color of the description text |
| **Disable header** | Hide the header section |
| **Header background image** | URL of a background image for the header area |
| **Header background color** | Background color of the header area |
| **Fix header background** | Fix the header background image during scroll (parallax) |
| **Darken header background** | Apply a darkening overlay on the header background |
### Badges
| Setting | Description |
|---------|-------------|
| **Hot label** | Text for the "Hot" badge (e.g. `Hot`) |
| **Hot color** | Background color of the Hot badge |
| **Hot text color** | Text color of the Hot badge |
| **New label** | Text for the "New" badge (e.g. `New`) |
| **New color** | Background color of the New badge |
| **New text color** | Text color of the New badge |
| **Sale label** | Text for the "Sale" badge (e.g. `Sale`) |
| **Sale color** | Background color of the Sale badge |
| **Sale text color** | Text color of the Sale badge |
### Order Now Button
| Setting | Description |
|---------|-------------|
| **Order Now button name** | Label for the order button (e.g. `Order Now`) |
| **Button color** | Background color of the order button |
| **Text color** | Text color of the order button |
### Product Source
| Setting | Description |
|---------|-------------|
| **Show products from group** | Automatically load all products from a WHMCS product group |
| **Show price** | Which price to display: `First price`, `Best price`, `Monthly price`, `Semi annual price`, `Annual price`, `Biennially price`, or `Triennially price` |
| **Show behind the list** | Append the auto-loaded group products after the manually listed products |
### Manual Products
Use the **+** button to add individual products manually. Each product row allows you to select a product by name/image and configure its display options. Items can be reordered with the up/down arrows and removed with the delete button.