Page Manager WHMCS Addon Description Changelog 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 Order now | Download | Community 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 Documentation: https://doc.puq.info/books/page-manager-whmcs-addon All Versions / Download: https://download.puqcloud.com/WHMCS/addons/PUQ_WHMCS-Page-Manager/ Support: https://puqcloud.com/submitticket.php?step=2&deptid=1 Community: https://community.puqcloud.com/ Direct download link for the latest version: 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/ Installation Step 1: Unzip the Archive On your WHMCS server (or locally): unzip PUQ_WHMCS-Page-Manager-latest.zip Step 2: Copy the Module Files Copy the extracted module directory directly to your WHMCS directory: # 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 Log in to the WHMCS admin area. Navigate to System Settings > Addon Modules (or Setup > Addon Modules in older WHMCS versions). Find PUQ Page Manager in the list and click Activate. Click Configure, enter your License Key, and select the admin groups allowed to access the module. 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: Deactivate the addon module in Setup > Addon Modules. Make a backup of your WHMCS files and database. Download the latest version for your PHP version. Extract the ZIP and overwrite the existing files in the modules/ directories. 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 Order now | Download | Community To activate the module and set up permissions, follow these steps: Log in to your WHMCS Admin Area. Navigate to System Settings > Addon Modules (or Setup > Addon Modules in older WHMCS versions). Locate PUQ Page Manager in the list and click Activate. Once activated, click Configure next to the module name. 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. 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 Order now | Download | Community 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: Log in to your WHMCS Admin Area. 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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: All Visitors: Open to everyone. Guests Only: Visible only to logged-out users. Clients Only: Visible only to logged-in users. 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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 Order now | Download | Community 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. Promo Slider PUQ Page Manager module WHMCS Order now | Download | Community The Promo Slider widget renders an image carousel with text overlays and call-to-action buttons. Each slide can have a heading, description, foreground image, background image, and a button link. Ten visual styles are available, including cinematic, parallax, and split-screen layouts. Admin View promo-slider-01-admin.png Frontend Styles promo-slider-02-style-default.png promo-slider-03-style-cards.png promo-slider-04-style-cinema.png promo-slider-05-style-glass.png promo-slider-06-style-hero.png promo-slider-07-style-kenburns.png promo-slider-08-style-magazine.png promo-slider-09-style-minimal.png promo-slider-10-style-neon.png promo-slider-11-style-split.png promo-slider-12-style-split-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-cards, puq-cinema, puq-glass, puq-hero, puq-kenburns, puq-magazine, puq-minimal, puq-neon, puq-split) height Slider height (e.g. 500px) Background & Options Setting Description Background image URL of the background image for the widget container Background color Background color of the widget container Disable Navigation Buttons Hide the previous/next arrow buttons on the slider 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 Slides Use the + button to add slide entries. Each slide has the following fields: Field Description Header Heading text for the slide Header size Font size selector for the heading Header color Color of the heading text Description Body text or subtitle for the slide Description size Font size selector for the description Description color Color of the description text IMG URL of the foreground image displayed on the slide Background IMG URL of the background image for the slide Button text Label for the call-to-action button Button URL Destination URL for the call-to-action button Slides can be reordered with the up/down arrows and removed with the delete button. Question Answer PUQ Page Manager module WHMCS Order now | Download | Community The Question Answer widget renders a FAQ or Q&A section with expandable answers. Each entry has a question and a rich-text answer. Ten visual styles are available, including accordion, grid, bubble, tabbed, and timeline layouts. Admin View question-answer-01-admin.png Frontend Styles question-answer-02-style-default.png question-answer-03-style-border.png question-answer-04-style-bubble.png question-answer-05-style-grid.png question-answer-06-style-minimal.png question-answer-07-style-cards.png question-answer-08-style-neon.png question-answer-09-style-tabs.png question-answer-10-style-timeline.png question-answer-11-style-split.png Settings Layout Setting Description width Widget container width (e.g. 100%, 900px) margin-top Top margin of the widget block margin-bottom Bottom margin of the widget block Style Visual style template (puq, puq-border, puq-bubble, puq-cards, puq-grid, puq-minimal, puq-neon, puq-split, puq-tabs, puq-timeline) Colors Setting Description Question text (color_1) Color of the question text Question panel (color_2) Background color of the question panel Question panel hover (color_3) Background color of the question panel on hover Answer text (color_4) Color of the answer text Answer panel (color_5) Background color of the answer panel Color 6 (color_6) Additional accent color used by certain styles 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 above the Q&A list (e.g. Frequently Asked Questions) Text color Color of the header text Disable header Hide the header text Q&A Items Use the + button to add question and answer pairs. Each row contains: Field Description Question The question text displayed in the collapsed panel Answer The answer content shown when the panel is expanded (supports rich text) Items can be reordered with the up/down arrows and removed with the delete button. Separator PUQ Page Manager module WHMCS Order now | Download | Community The Separator widget inserts a decorative dividing line between page sections. Ten visual styles are available, including dashed, dotted, double, gradient, wave, zigzag, diamond, and ornament variants. Admin View separator-admin.png Frontend View separator-frontend.png Styles 10 style templates are available: puq (default), puq-dashed, puq-diamond, puq-dots, puq-dotted, puq-double, puq-gradient, puq-ornament, puq-wave, puq-zigzag. 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-dashed, puq-diamond, puq-dots, puq-dotted, puq-double, puq-gradient, puq-ornament, puq-wave, puq-zigzag) 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 Separator Setting Description Separator color Color of the decorative line or shape Slider Logos PUQ Page Manager module WHMCS Order now | Download | Community The Slider Logos widget renders a horizontally scrolling logo carousel. Logos are automatically duplicated to create a seamless infinite loop. Each logo entry supports a name, image URL, and an optional link. Admin Settings slider-logos-admin.png Frontend slider-logos-frontend.png Settings Color Settings Setting Type Default Description color_1 color #6420c0 Primary accent color color_2 color #0de1b9 Secondary accent color color_3 color #6420c0 Tertiary accent color color_4 color #d41111 Fourth accent color color_5 color #a484d5 Fifth accent color color_6 color #000000 Sixth accent color Header Setting Type Default Description header text Our partners Heading text displayed above the logo strip header_text_color color #000000 Color of the header text disable_header checkbox off Hide the header entirely Scroll Settings Setting Type Default Description scroll select left Scroll direction: left or right scroll_speed select 20 Animation speed: 5 (Very fast), 10 (Fast), 20 (Medium), 30 (Slowly), 40 (So slow), 60 (Very Very Slow) Logos Each logo entry is a row in the visual editor with the following fields: Field Description logo_name Display name of the logo (used as alt text and tooltip) logo_img URL of the logo image logo_url Optional link URL when the logo is clicked Logos 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 logo strip style puq-border Logos displayed with a border frame puq-cards Logos rendered inside card containers puq-circle Logos cropped and displayed in circular frames puq-fade Fade transition effect on logo edges puq-grayscale Logos displayed in grayscale, colorized on hover puq-grid Logos arranged in a grid layout puq-neon Neon glow effect on logos puq-ribbon Logos displayed with a ribbon overlay puq-tooltip Logos show a tooltip with the logo name on hover Tabs / Accordion PUQ Page Manager module WHMCS Order now | Download | Community The Tabs / Accordion widget renders content sections that are toggled by clicking a tab or accordion header. It supports two modes — tabbed navigation and collapsible accordion — with rich HTML content in each section body. Admin Settings tabs-accordion-01-admin.png Style Templates tabs-accordion-02-style-default.png tabs-accordion-03-style-border.png tabs-accordion-04-style-cards.png tabs-accordion-05-style-minimal.png tabs-accordion-06-style-neon.png Settings Content Settings Setting Type Default Description mode select accordion Display mode: tabs (horizontal tab bar) or accordion (collapsible sections) default_open number 0 Zero-based index of the tab or section to open by default Color Settings Setting Type Default Description color_1 color #333333 Tab or accordion header text color color_2 color #f5f5f5 Tab or accordion header background color color_3 color #e8e8e8 Tab or accordion header hover color color_4 color #666666 Content panel text color color_5 color #ffffff Content panel background color color_6 color #337ab7 Active tab or accordion accent color Header Setting Type Default Description header text Tabs Heading text displayed above the widget header_text_color color #333333 Color of the header text disable_header checkbox off Hide the header entirely Items Each item is a row in the visual editor with the following fields: Field Description title Label shown on the tab button or accordion header content Rich HTML content displayed in the panel body (stored base64-encoded) Items 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 Testimonials PUQ Page Manager module WHMCS Order now | Download | Community The Testimonials widget displays customer reviews and quotes with optional star ratings. It supports both a grid and slider layout and is fully configurable with colors, column count, and per-item photo, name, role, company, and testimonial text. Admin Settings testimonials-01-admin.png Style Templates testimonials-02-style-default.png testimonials-03-style-cards.png testimonials-04-style-circle.png testimonials-05-style-fade.png testimonials-06-style-grayscale.png testimonials-07-style-grid.png testimonials-08-style-border.png testimonials-09-style-neon.png testimonials-10-style-tooltip.png Settings Content Settings Setting Type Default Description layout select grid Display mode: grid (static columns) or slider (carousel) columns select 3 Number of columns in grid layout: 1, 2, 3, or 4 show_rating checkbox off Show star rating below each testimonial Color Settings Setting Type Default Description color_1 color — Author name text color color_2 color — Role and company text color color_3 color — Testimonial quote text color color_4 color — Star rating color color_5 color — Card background color color_6 color — Quote mark and accent color Header Setting Type Default Description header text Testimonials Heading text displayed above the widget header_text_color color #000000 Color of the header text disable_header checkbox off Hide the header entirely Items Each testimonial is a row in the visual editor with the following fields: Field Description name Full name of the reviewer role Job title or role of the reviewer company Company or organization name photo_url URL of the reviewer's photo text Testimonial quote text (stored base64-encoded) rating Star rating: 1 through 5 stars Items 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 Text Editor TinyMCE PUQ Page Manager module WHMCS Order now | Download | Community The Text Editor TinyMCE widget embeds a full WYSIWYG TinyMCE editor directly inside the EditorJS page editor. It allows rich HTML content to be authored visually and rendered on the frontend with full formatting support, including headings, lists, tables, images, links, and inline styles. Admin Settings text-editor-tinymce-admin.png Frontend text-editor-tinymce-frontend.png Settings Content Settings Setting Type Description text rich HTML (TinyMCE editor) Full HTML content authored in the WYSIWYG editor. Supports headings, bold, italic, lists, tables, images, links, blockquotes, and embedded iframes. 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 style — renders content with the page theme colors invert_text_colors Inverts text colors for use on dark backgrounds Timeline PUQ Page Manager module WHMCS Order now | Download | Community The Timeline widget renders a chronological sequence of events. Each entry has a date, an icon, a dot color, a title, and a description. The timeline supports vertical and horizontal layouts with an optional alternating sides mode. Admin Settings timeline-01-admin.png Style Templates timeline-02-style-default.png timeline-03-style-cards.png timeline-04-style-minimal.png timeline-05-style-border.png timeline-06-style-neon.png timeline-07-style-grid.png timeline-08-style-ribbon.png timeline-09-style-fade.png timeline-10-style-tooltip.png timeline-11-style-grayscale.png timeline-12-style-circle.png timeline-13-style-neon-alt.png Settings Content Settings Setting Type Default Description layout select vertical Timeline orientation: vertical or horizontal alternate checkbox off Alternate event cards between left and right sides of the timeline axis Color Settings Setting Type Default Description color_1 color — Event title text color color_2 color — Event description text color color_3 color — Event date text color color_4 color — Timeline line and dot color color_5 color — Event card background color color_6 color — Icon and accent color Header Setting Type Default Description header text Our History Heading text displayed above the widget header_text_color color #000000 Color of the header text disable_header checkbox off Hide the header entirely Items Each timeline entry is a row in the visual editor with the following fields: Field Description date Date or time label for the event (e.g. 2024, January 2025) icon Font Awesome icon class for the timeline dot (e.g. fas fa-star) color Dot color for this specific entry (overrides the global dot color) title Title of the event description Description text for the event (stored base64-encoded) Items 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 Video Embed PUQ Page Manager module WHMCS Order now | Download | Community The Video Embed widget embeds a video from YouTube, Vimeo, or a custom URL into the page. The aspect ratio, playback options, and container dimensions are all configurable. Admin Settings video-embed-admin.png Frontend video-embed-frontend.png Settings Video Settings Setting Type Default Description video_url text — URL of the video to embed (YouTube, Vimeo, or direct video file URL) provider select youtube Video provider: youtube, vimeo, or custom aspect_ratio select 16:9 Aspect ratio of the video player: 16:9, 4:3, or 1:1 Playback Options Setting Type Default Description autoplay checkbox off Start video playback automatically when the page loads muted checkbox off Mute the video audio (required for autoplay in most browsers) loop checkbox off Loop the video continuously controls checkbox on Show playback controls on the video player Dimensions Setting Type Default Description video_width text — Override width of the video player (e.g. 800px, 100%) video_height text — Override height of the video player (e.g. 450px) 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 video embed container style Markdown PUQ Page Manager module WHMCS Order now | Download | Community The Markdown widget renders Markdown content as a printable A4-styled document on the client area. The admin side provides a Markdown source editor with a one-click preview toggle, and the frontend optionally exposes a "Download as PDF" button that produces an A4 PDF file. Admin Settings The widget has two view modes that toggle with a single button. Editor mode In editor mode the full Markdown source is shown in a syntax-friendly textarea. Click Show preview to switch to the rendered preview. markdown-admin.png Preview mode Preview mode renders the Markdown using the same parser as the frontend (without the A4 paper styling). Click Show editor to go back to the source. markdown-admin-preview.png Frontend On the client area the content is rendered inside an A4-sized paper element with a soft shadow and serif typography, similar to a printed document. markdown-frontend.png If the Show "Download as PDF" button option is enabled, a button is displayed above the document. Clicking it generates and downloads a real A4 PDF file produced from the rendered HTML. markdown-pdf.png Settings Content Setting Type Default Description markdown textarea — Markdown source. Standard Markdown syntax is supported (headings, lists, links, images, code blocks, tables, blockquotes, inline HTML). The Show preview / Show editor button switches between the source textarea and the rendered preview without leaving the editor. Document Options Setting Type Default Description show_download_pdf checkbox off Show the Download as PDF button above the document on the frontend. disable_a4 checkbox off Disable the A4 paper layout. The content is rendered as a regular full-width block instead of a fixed-size sheet. pdf_filename text document Base file name for the generated PDF (without .pdf extension). The Download as PDF button label is fully translatable via the addon language files (Download as PDF, Generating... keys). Layout Settings Setting Type Default Description width text 210mm Width of the paper sheet. Examples: 210mm (A4), 180mm, 800px, 70%. Numeric-only values are interpreted as a percentage. margin_top text — CSS top padding of the widget container (e.g. 20px). margin_bottom text — CSS bottom padding of the widget container (e.g. 20px). style select puq Visual style template. background_image text — URL of the background image rendered behind the paper. 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. Tip: Paper width is controlled by the width field. If the field is empty the default 210mm (A4) is used. Use mm, px, or % units explicitly — bare numbers are treated as percentages. Style Templates Template Description puq Default A4 document style: serif typography, sans-serif headings, soft shadow, rounded corners. Notes Markdown is parsed on the client side using marked.js (loaded from a CDN on first use and cached for further widgets on the page). PDF generation uses html2pdf.js (loaded on demand the first time the user clicks the download button). The widget is a standard EditorJS block — multiple Markdown blocks can be placed on the same page; each one keeps its own settings and content. For mobile screens (< 800px) the paper expands to 100% width automatically so it remains readable on small devices. The fixed A4 width is preserved on tablets and desktops. When Disable A4 paper layout is enabled, the document is rendered without the paper sheet (no fixed width, no shadow, no minimum height) — handy if you only need the Markdown rendering on a regular page section.