Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Configuration

Learn how to correctly configure and use Client Notification for Lagom WHMCS Client Theme (opens new window). This extension allows you to display different types of notifications for your WHMCS clients, on selected pages in Lagom WHMCS Client Theme (opens new window).

# Main Notifications Page

# Notification List

Below is a description of columns shows in "Notifications" table.

  1. Name - Shows name of created notification, by clicking on this text you'll be redirected to the management page.
  2. Start Date - Display date when notification will START showing in Lagom WHMCS Client Theme. No starting date is set when - is visible.
  3. End Date - Display date when notification will STOP showing in Lagom WHMCS Client Theme. No end date is set when - is visible.
  4. Status - Display notification status
    • Published - Notification is published and will be shown in Lagom WHMCS Client Theme.
    • Disabled - Notification will NOT be shown in Lagom WHMCS Client Theme.
  5. Actions
    • Manage - Redirects to management page of selected notification.
    • Deactivate - Deactivate selected notification.
    • Duplicate - Allows to quickly duplicate the notification and all its settings. Duplicated notification will be shown on the list with "duplicate" at the end of notification name.
    • Delete - Removes selected notification. This action can not be reversed.

# Import Notification

Each of the notification can be easily exported, and then imported by clicking "Import" button. Learn more about Export/Import functionality.

# Create Notification

By clicking "Add New" button, you will be redirected to configuration page to perform required configuration, and then save your new notification.

# Configure Notification

# Display Rules

Define for what conditions specific notification should be shown for your clients in Lagom WHMCS Client Theme. By clicking on the "on/off" button in right side of each panel, you will be able to enable and configure specific filters, as shown in below video.

# Page Filters

Important: Pages selected via "Selected Pages" and "Excluded Pages", which relate to the ordering process, will not work for the Lagom One Step Order Form module.

"Page Filters" allows to choose on what specific pages, this notification will be shown for your clients in Lagom WHMCS Client Theme.

  1. Page Categories - Choose for what page categories, specific notification should be shown. There are two different categories defined:
    • Client Pages - all pages except WHMCS order process pages. These pages can be found in "Page Manager" under "Client Area" category.
    • Order Pages - all pages except WHMCS client area pages. These pages can be found in "Page Manager" under "Order Process" category.
    • Website Pages - option will be visible only when "CMS" display rule will be activated in the system. Once selected specific notification will be shown on all pages generated by the Lagom Website Builder (opens new window) product.
  2. Selected Pages - Choose for what specific pages this notification should be shown. You can select multiple options. This filter will list below pages:
  3. Excluded Pages - Choose on what specific pages, selected notification should NOT be shown. You can select multiple options.

# Client Filters

"Client Filters" allows to choose for what clients, this notification should be shown in Lagom WHMCS Client Theme (opens new window).

  1. Client Status - Define for what type of visitors this notification should be displayed.
    • Logged In Client
    • Logged Out Client
  2. Client(s) - Choose for what specific "Client" this notification should be shown. Clients can be created in your WHMCS admin area (opens new window). You can select multiple options for this filter. This filter works only for logged in clients.
  3. Group - Choose for what "Client Group" this notification should be shown. Client groups can be defined in your WHMCS admin area (opens new window). You can select multiple options for this filter. This filter works only for logged in client.
  4. Client Country - Choose for what "Client Country" this notification should be shown. Client country can be defined in your WHMCS system (opens new window). You can select multiple options for this filter. This filter works only for logged in client.

# Service Filters

"Services Filters" lets you to decide what services and its configuration need to be assigned to the client account. All filters in this group works ONLY for logged in client, and will NOT be applied for not logged in client.

  1. Service(s) - Choose what service(s) need to be assigned to your client. This filter will list all service(s) configured in WHMCS admin area (opens new window). You can select multiple options for this filter.
  2. Status - Choose what status need to be assigned to the client service. You can select multiple options for this filter. WHMCS offer below statuses for "Services":
    • Pending — Service is awaiting provisioning.
    • Active — Service is activated and running.
    • Completed — Useful for one-time services to indicate they have been performed (no further invoices will be generated).
    • Suspended — Service is temporarily stopped, used automatically for overdue services.
    • Terminated — Service is permanently stopped and data removed, used automatically for overdue services (no further invoices will be generated).
    • Cancelled — Service is permanently stopped and data removed at the client's request (no further invoices will be generated).
    • Fraud — Order was marked as fraud (no further invoices will be generated).
  3. Billing Cycle - Choose "Billing Cycle" (opens new window) assigned to the client service. You can select multiple options for this filter.
  4. Registration Date - Choose exact "Registration Date" by choosing the "start" date for the first field only, or define date range by adding the "end" date to the second field.
  5. Next Due Date - Choose exact "Due Date" date by choosing the "start" date for the first field only, or define date range by adding the "end" date to the second field.
  6. Days Until Due Date - Choose exact amount until "Due Date", by entering the value for the first field only, or define the range by adding value to the second field. Leave empty to ignore that filter.
  7. Days After Due Date - Choose exact amount after "Due Date", by entering the value for the first field only, or define the range by adding value to the second field. Leave empty to ignore that filter.

# Service Configurable Option Filters

"Configurable Options Filters" shows ONLY when "Service Filters" is enabled and "Service(s)" field has products which have configurable options assigned in your WHMCS product settings (opens new window).

List of fields in this filter depend on configurable option types assigned to specific product. Configurable options can be created and managed in WHMCS admin area (opens new window).

# Domain Filters

"Domain Filters" lets you to decide what domain and its configuration need to be assigned to the client account, so this notification will be shown in Lagom WHMCS Client Theme (opens new window). All filters in this group works ONLY for logged in client, and will NOT be applied for not logged in client.

  1. TLD(s) - Define what domain TLD need to be assigned to your client account, so this notification should be show. This filter list all TLDs configured in your WHMCS admin area (opens new window). You can select multiple options for this filter.
  2. Status - Define what TLD status should be assigned to the client domain. You can select multiple options in this filter.
  3. Registrar - Define with what domain registrar need to be assigned to the client domain. You can select multiple options in this filter.
  4. Billing Cycle - Choose what billing cycle need to be assigned to the client domain. You can select multiple options in this filter.
  5. Registration Date - Choose exact "Registration Date" by choosing the "start" date for the first field only, or define date range by adding the "end" date to the second field.
  6. Days Since Activation - Choose exact amount since "Activation", by entering the value for the first field only, or define the range by adding value to the second field. Leave empty to ignore that filter.
  7. Expiry Date - Choose exact "Expiry Date" date by choosing the "start" date for the first field only, or define date range by adding the "end" date to the second field.
  8. Days Until Due Date - Choose exact amount until "Due Date", by entering the value for the first field only, or define the range by adding value to the second field. Leave empty to ignore that filter.
  9. Days After Due Date - Choose exact amount after "Due Date", by entering the value for the first field only, or define the range by adding value to the second field. Leave empty to ignore that filter.

# Notification Style

# Notification State

Define what style should be used for notification. This option changes color of the icon in "Modal", additionally it defines the color of left bar for "Alert" notification type.

  1. Default - Standard notification, which display icon in gray color, and removes left bar from "Alert" notification type.
  2. Info - Informational notification, containing blue accent colors.
  3. Success - Success notification, containing green accent colors.
  4. Warning - Warning notification, containing orange accent colors.
  5. Danger - Danger notification, containing red accent colors.

# Notification Type

Decide type of the notification. You can choose from multiple options, listed below.

  1. Alert - Display notification as "Alert" box, shown below page title.
  1. Modal - Display notification as "Modal" shown on page load. You can display multiple modals on single page.
  1. Floating Alert (Soon!) - Display notification as floating alert. This option will be available in 1.2.0 version.

# Notification Buttons Location

Choose location of the buttons created via "Buttons Manager". This section display different option, based on selected Notification Type.

# Options for "Alert" notification type
  1. Right - Buttons will be aligned to the right for the alert.
  2. Bottom - Buttons will be placed a below alert description, and will be aligned to the left side.
# Options for "Modal" notification type
  1. Left - Buttons will be aligned to the left of the modal content.
  2. Center - Buttons will be centered.
  3. Right - Buttons will be aligned to the right of the modal content.

This setting allows you to choose when the modal should appear on a specific page. You can select either "Page Load" for it to appear when the page loads or "Exit Intent" to trigger it when the user intends to leave the page.

This feature allows you to set a specific time delay before the modal appears on your website. You can customize the delay duration to optimize the user experience. Enter amount in seconds.

This option will show up when "Modal" type has been selected in "Notification Type" field. You can choose from below options.

  1. Small - modal with 300px width.
  2. Medium - modal with 448px width.
  3. Large - modal with 560px width.
  4. Extra Large - modal with 800px width.

# Display Default Icons

Decide if default icon should be shown in modals or alerts.

Different icons will be shown based on selected "Notification State".

# Display Close Icon

After creating new notification, "Display Close Icon" option is enabled by default. When this option is disabled, "Close" icon will be removed from selected notification.

# Alert

When "Display Close Icon" option is activated for "Alert" notification type, "close" icon is shown in top right corner.

Below is detailed information, what happen for "modal" notification type, based on state of "Display Close Icon" option:

  1. Activated - When "Display Close Icon" option is activated, "close" icon is shown in top right corner. Visitors will be able to close that modal by clicking on the "close" icon, or by clicking outside the modal body.
  1. Deactivated - When "Display Close Icon" option is deactivated, "close" button will be removed, additionally customer won't be able to close the modal by clicking outside the modal body. This option will customers to read the message and perform specific action. Modal can be closed by adding button via "Buttons Manager"

# Enter Number of Days

This option will be shown only if "Display Close Icon" will be enabled.

Different actions will be made, based on selected value.

# 0 Days

When value is set to 0, after closing the notification, it will be shown again with every page reload.

# >=1 Days

If amount of day is set to be greater than or equal to 1, customer choice is remembered for specified amount of days. For example if you set amount to be 10, then "alert" won't be show for 10 days after customer clicks on the "close" icon.

For "modal" notification type, to remember this actions, customers will be forced to click additional checkbox, which will be shown in the bottom of the modal.

# Notification Content

# Choose Language To Edit

You can create notification in multiple languages, this option allows you to decide for what language following content customization will be made.

# Title

Title string will be shown in "modals" and "alerts":

You can leave this field empty, so no "heading" will be shown, which will allow you to create modal, where graphics fills the whole top space, as in below example:

# Message

Set notification message. This fields allows to perform advanced actions on your text, or use the tool to place your own HTML code.

# Message Variables

Starting from version 1.1.0 of this product, you have the capability to insert variables into your messages, which will then be replaced with specific numbers or strings. Explore the list of available variables

  1. {Services} - Number of "Services" which fits configured filter in this notification.
  2. {Domains} - Number of "Domains" which fits configured filter in this notification
  3. {Unpaid Invoices} - Number of "Unpaid Invoices" of the currently logged in customer.
  4. {Overdue Invoices} - Number of "Overdue Invoices" of the currently logged in customer.
  5. {Total Due Invoices Balance} - Total amount of "Due Invoices" of the currently logged in customer.
  6. {Client Name} - Full name of currently logged in customer.
  7. {Client First Name} - First name of currently logged in customer.
  8. {Client Last Name} - Last name of currently logged in customer.
  9. {Client Email Address} - Email address of currently logged in customer.
  10. {Client Company Name} - Company name of currently logged in customer.
  11. {Client Credit Balance} - Credit balance of currently logged in customer.

# Icon

Replace the "default icon" for alert with selected icon, and place new icon or graphic in the modal. Learn more about "Media Manager" modal.

  1. Edit - "Pen" icon, allows you to replace currently chosen graphic. When clicked "Media Manager" modal will be shown.
  2. Remove - "Trash" icon, allows you to remove currently assigned icon. This action will not remove the graphic from the them, but will clear the selection.

# Buttons

Create your own buttons, using the "Buttons Manager" modal.

  1. Add New -
  2. Edit -
  3. Remove -

# Notification Settings

# General

  1. Name - Notification name, used only for backend purposes, this name will be listed in "Notification List" table.
  2. Custom Class - Allows to assign custom class, which then can be used for advanced purposes like custom styling, via CSS file.
  3. Publish Notification - Once activated, your notification will be shown in Lagom WHMCS Client Theme.

# Display Time

By activating the "Display Time" function, you will be able to configure time range, for which notification will be shown.

  1. Start Date - Set the date when notification should start showing.
  2. End Date - Set the date when notification should stop showing.

# Last Modification

Display date and time when notification has been saved, additionally it shows who performed last modification.

# Media Manager

"Media Manager" modal gives you multiple options to assign icons, illustrations or custom graphics to your notification.

# Predefined Icons

Predefined icons, is a group of icons and illustrations, which already exist in Lagom WHMCS Client Theme, and you can easily use them by selecting specific icon via the "Media Manager" modal.

# UI Icons

When you choose an icon from below tabs, it will replace the default icon shown in notifications, only when "Display Default Icon" option is selected.

  1. Lagom Small - Displays default Lagom font icon package that includes small UI Icons. These icons are in size 12x12px.
  2. Lagom Medium - Displays default Lagom font icon package that contains medium UI Icons. These icons are in size 18x18px.
  3. Font Awesome - Displays icons available in WHMCS by default, which are made from FontAwesome (opens new window) font icons.

Selected UI icon replace the "default icon" in modal, as shown in below example:

# Alert

Selected UI icon replace the "default icon" in alert, as shown in below example:

# SVG Icons

These are default SVG icons used in Lagom WHMCS Client Theme. SVG icons are loaded from the /templates/lagom2/assets/svg-icon directory, so it is possible to add your own SVG graphics by creating new .tpl file. Because these icons are added to the theme as SVG code, you can easily change their colors via the "Style Manager"

Selected SVG icon is shown above the modal content, as below example:

# Alert

Selected SVG icon replace the "default icon" in alert, as shown in below example:

# SVG Illustrations

These are default SVG illustrations used in Lagom WHMCS Client Theme. SVG illustrations are loaded from the /templates/lagom2/assets/svg-illustrations directory, so it is possible to add your own SVG graphics by creating new .tpl file.

Selected SVG illustration is shown above the modal content, as below example:

# Alert

Selected SVG illustration replace the "default icon" in alert and are placed in container which has maximu width of 160px.

# Custom Icons

Custom Icons is a grup of tabs, which allows you to upload your own icons or graphics, and then assign them to created notification.

# Media Library

Media library tab displays graphics, which has been previously uploaded using "Upload Custom Icon" tab.

Custom graphic is always shown above the modal content, without paddings, thanks to this you are able to upload full width graphics, as in below example:

However if you'd like to use this graphic as icon shown the same as ["SVG Icons"]#svg-icons), you have to assign modal-custom-icon class to "Custom Class" field, so your icon will be positioned as below:

# Alert

Custom graphics in alerts are shown in container, which has maximum width of 160px. You can easily modify this by adding custom CSS rules to the custom css file.

# Upload Custom Graphic

Uploaded graphics are stored in /templates/lagom2/assets/img/page-manager

# Buttons Manager

Our "Button Manager" modal, allows you to easily build and assign custom buttons to your notifications.

# Buttons List

  1. Add New -"Add New" link opens "Button Manager" modal, which allows you to configure and add new button.
  2. Edit - "Pen" icon allows you to edit existing buttons, once clicked "Button Manager" modal will open.
  3. Remove - "Trash" icon, allows you to remove existing buttons.

# Configure Button

# Button Size

Allows you to choose button size, which are defined in "Style Manager".

List of options available for this field:

  1. Extra Small - Button with 30px height.
  2. Small - Button with 36px height.
  3. Default - Button with 44px height.
  4. Large - Button with 52px height.

# Button Style

Allows you to select button style.

List of options available for this field:

  1. Solid - Button with solid background.
  2. Outline - Button with transparent background and solid border.
  3. Link - Button without background and border.

# Button Type

Choose button color, which are defined in "Style Manager".

List of options available for this field:

  1. Primary
  2. Secondary
  3. Default
  4. Info
  5. Success
  6. Warning
  7. Danger.

# Button Text

Enter text which will be shown in created button.

Choose the action, which should be made once clicked on created button.

# Custom URL

When "Custom URL" option is selected, additional field will be shown, where you can enter your custom URL, which then will be assigned to this button.

# WHMCS Page

When "WHMCS Page" option is selected, additional select field will be shown. This field allows you to select a link to WHMCS page. Once selected, our addon automatically generate the URL and assign it to the button.

# Close Notification

When "Close Notification" option is selected, our addon generate a button, which close specific notification once clicked, as seen on below examples:

# Button Custom Classes

This field allows you to assign custom classes to your button, which gives you advanced possibilities to perform further customization, via CSS or JS files.

# Open URL in New Window

When "One URL in New Window" is selected, once button is clicked, URL will be opened as new browser tab.

# Show icon

This option allows you to assign icon to the created button, from predefined icon list.

# Export/Import

Client Notification for Lagom WHMCS Client Theme contains functionality, which allows you to easily export and import notifications. This way you can build them on your development server and then import to production server, without need to perform complicated migration of the database and extension files.

# Export

To export your existing notification, you have to click "Export" button in management page. Our extension will generate a .zip file, with notification configuration and custom graphics if uploaded via "Media Manager". This file will be save on your computer.

# Import

Previously exported notification, can be easily imported by clicking on "Import" button. You have to upload .zip file which has been generated by the addon. Imported notification will be shown on notification lists as "Disabled", so it won't be visible for your customers, until published.

# Tips

# General

# Add Emoji icons to your notification description

You can easily add additional expression to your messages by adding emoji icons to the message content, as shown in below video:

# Alerts

# Center SVG icons/graphics vertically

If you'd like to center your SVG icon or graphic vertically, you need to add alert-icon-v-center class to in "Custom Class" field in notification settings.

Once done, your icon should be centered as below example

← Update →