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