PUQ Mautic

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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings announcements-admin.png

Frontend

Announcements widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings call-to-action-admin.png

Frontend

Call To Action widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings contact-form-admin.png

Frontend

Contact Form widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings custom-code-admin.png

Frontend

Custom Code widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings domain-search-admin.png

Frontend

Domain Search widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings domain-tld-admin.png

Frontend

Domain TLD widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings feature-grid-admin.png

Frontend

Feature Grid widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor intelligent-domain-search-admin.png

Frontend View

Intelligent Domain Search widget on the frontend 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor mini-menu-admin.png

Frontend View

Mini Menu widget on the frontend 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor page-background-admin.png

Frontend View

Page Background applied on the frontend 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor product-cards-01-admin.png

Frontend Styles

Style: default product-cards-02-style-default.png

Style: bold product-cards-03-style-bold.png

Style: border product-cards-04-style-border.png

Style: glass product-cards-05-style-glass.png

Style: list product-cards-06-style-list.png

Style: line product-cards-07-style-line.png

Style: tile product-cards-08-style-tile.png

Style: split product-cards-09-style-split.png

Style: minimal product-cards-10-style-minimal.png

Style: wave product-cards-11-style-wave.png

Style: wave-alt 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor promo-slider-01-admin.png

Frontend Styles

Style: default promo-slider-02-style-default.png

Style: cards 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor question-answer-01-admin.png

Frontend Styles

Style: default question-answer-02-style-default.png

Style: border question-answer-03-style-border.png

Style: bubble question-answer-04-style-bubble.png

Style: grid question-answer-05-style-grid.png

Style: minimal question-answer-06-style-minimal.png

Style: cards question-answer-07-style-cards.png

Style: neon question-answer-08-style-neon.png

Style: tabs question-answer-09-style-tabs.png

Style: timeline question-answer-10-style-timeline.png

Style: split 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget in the page editor separator-admin.png

Frontend View

Separator widget on the frontend 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings slider-logos-admin.png

Frontend

Slider Logos widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings tabs-accordion-01-admin.png

Style Templates

Default style tabs-accordion-02-style-default.png

Border style tabs-accordion-03-style-border.png

Cards style tabs-accordion-04-style-cards.png

Minimal style tabs-accordion-05-style-minimal.png

Neon style 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings testimonials-01-admin.png

Style Templates

Default style testimonials-02-style-default.png

Cards style testimonials-03-style-cards.png

Circle style testimonials-04-style-circle.png

Fade style testimonials-05-style-fade.png

Grayscale style testimonials-06-style-grayscale.png

Grid style testimonials-07-style-grid.png

Border style testimonials-08-style-border.png

Neon style testimonials-09-style-neon.png

Tooltip style 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings text-editor-tinymce-admin.png

Frontend

Text Editor TinyMCE widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings timeline-01-admin.png

Style Templates

Default style timeline-02-style-default.png

Cards style timeline-03-style-cards.png

Minimal style timeline-04-style-minimal.png

Border style timeline-05-style-border.png

Neon style timeline-06-style-neon.png

Grid style timeline-07-style-grid.png

Ribbon style timeline-08-style-ribbon.png

Fade style timeline-09-style-fade.png

Tooltip style timeline-10-style-tooltip.png

Grayscale style timeline-11-style-grayscale.png

Circle style timeline-12-style-circle.png

Neon Alt style 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin settings video-embed-admin.png

Frontend

Video Embed widget frontend render 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

Page Manager addon WHMCS

Order now | Download | FAQ

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 widget admin — editor mode 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 widget admin — preview mode 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 widget frontend render 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 widget — generated PDF 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