/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Configuration

Main Notifications Page
Configure Notification
Message Variables
- General
- Timer
Media Manager
- Predefined Icons
- Custom Icons
Buttons Manager
- Buttons List
- Configure Button
Export/Import
- Export
- Import
Tips
- General
- Alerts

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.

Name - Shows name of created notification, by clicking on this text you'll be redirected to the management page.
Start Date - Display date when notification will START showing in Lagom WHMCS Client Theme. No starting date is set when - is visible.
End Date - Display date when notification will STOP showing in Lagom WHMCS Client Theme. No end date is set when - is visible.
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.
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 (opens new window). 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

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

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

# Selected Pages

Choose for what specific pages this notification should be shown. You can select multiple options. This filter will list below pages:

Client Area - Pages listed in "Page Manager" under "Client Area" category.
Order Process - Pages listed in "Page Manager" under "Order Process" category.
Product Groups - List of all visible "Product Groups" created in WHMCS admin area (opens new window).
Support Departments - List of all "Support Departments" create in WHMCS admin area (opens new window).
CMS Pages - List of all pages generated by Lagom Website Builder (opens new window) product

# Excluded Pages

Choose on what specific pages, selected notification should NOT be shown. You can select multiple options.

# Custom URL Configuration

This option allows you to specify custom URLs where the notification should be displayed or excluded. This is useful for targeting specific URLs or keywords that are not part of the predefined page categories. After selecting Custom URL in either the Selected Pages or Excluded Pages sections, you will see the following fields:

Page URL / Keyword - Enter the specific URL or keyword where you want the notification to appear or be excluded. For example, you can enter a full URL like https://demo.rsstudio.net/lagom/store/web-hosting or just a keyword that is a part of the URL like hosting.
Condition - Choose "is exactly" if the URL must match exactly, or "contains" if the URL should include the specified text. This flexibility allows you to target notifications based on partial matches or exact URLs.
Use the "Add more" button to include additional URLs or keywords. Click on the "Remove" button on the right to delete the corresponding condition.

Example Use Case

Exact URL Matching:
- Use Case: Suppose you want to display a notification only on the main page of the SupportCenter module. URL: https://www.examplehost.com/index.php?m=SupportCenter
- Condition: is exactly
- Explanation: This setup ensures the notification appears only on the specific page and not on any subpages, providing targeted messaging for users on that page.
Partial URL Matching:
- Use Case: Imagine you need the notification to show on the SupportCenter module's main page and all its subpages.
- Keyword: SupportCenter
- Condition: contains
- Explanation: By using this configuration, the notification will appear on any page URL that includes the keyword, ensuring it shows on both the main page and related subpages like SupportCenter&action=settings.

# Client Filters

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

Client Status - Define for what type of visitors this notification should be displayed.
- Logged In Client
- Logged Out Client
Client(s) - Select specific clients for whom this notification should be displayed. Clients can be managed in your WHMCS admin area (opens new window). Multiple selections are allowed. This filter applies only to logged-in clients.
- If you cannot find a particular item in the list, start typing its name, and the desired item will appear.
Group - Define the client groups for which this notification should be shown. Client groups can be set up in your WHMCS admin area (opens new window). Multiple selections are allowed. This filter applies only to logged-in clients.
Client Country - Choose the countries for which this notification should be shown to clients. You can configure client countries in your WHMCS system (opens new window). Multiple selections are allowed. This filter applies only to logged-in clients.
Marketing Emails Opt-in Status - Enables filtering clients based on their marketing email preferences – whether they have opted in or opted out of receiving marketing communications.
Days Since Sign Up - Allows you to set a specific number of days since a user signed up to trigger a notification. For example, setting this to 31 will show a notification to users who signed up 30 days ago or less. This feature is designed to target new clients, ensuring they receive important messages during their initial engagement period.

# Services Assigned To Client Filters

"Services Assigned To Client 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.

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.
- If you cannot find a particular item in the list, start typing its name, and the desired item will appear.
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).
Servers List - Select which servers should be assigned to your client. Multiple selections are allowed for this filter.
Servers Group(s) - Select which server groups should be assigned to your client. Multiple selections are allowed for this filter.
Billing Cycle - Choose "Billing Cycle" (opens new window) assigned to the client service. You can select multiple options for this filter.
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.
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.
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.
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.
Filtered Service(s) - Choose number of services required to be assigned to a customer’s account to trigger the notification.
- Disabled - Filter will be ignored.
- None - Notification is displayed if no service is assigned to the customer's account.
- Less Than - Notification is displayed if the total number of services acquired by the customer is lower than the specified amount.
- More Than - Notification is displayed if the total number of services acquired by the customer exceeds the specified amount.

# Services Not Assigned To Client Filters

"Services Not Assigned To Client Filters" allows you to define which services cannot be assigned to a client’s account in order to display notificaiton. These filters apply only to logged-in clients and will not affect users who are not logged in.

Service(s) – Specify which service(s) cannot be assigned to a client. This filter lists all services configured in the WHMCS Admin Area. Multiple selections are supported. If you cannot find a particular item in the list, start typing its name, and the desired item will appear.

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

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.
- If you cannot find a particular item in the list, start typing its name, and the desired item will appear.
Status - Define what TLD status should be assigned to the client domain. You can select multiple options in this filter.
Registrar - Define with what domain registrar need to be assigned to the client domain. You can select multiple options in this filter.
Billing Cycle - Choose what billing cycle need to be assigned to the client domain. You can select multiple options in this filter.
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.
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.
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.
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.
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.
Filtered Domain(s) - Choose number of domains required to be assigned to a customer’s account to trigger the notification.
- Disabled - Filter will be ignored.
- None - Notification is displayed if no domain is assigned to the customer's account.
- Less Than - Notification is displayed if the total number of domains acquired by the customer is lower than the specified amount.
- More Than - Notification is displayed if the total number of domains acquired by the customer exceeds the specified amount.

# Shopping Cart Filters

"Shopping Cart Filters" is a feature in the Lagom Client Notifications extension that allows you to display targeted messages based on a customer’s current shopping cart session.

Cart Items - Controls the required number of products in the shopping cart for the notification to be displayed.
- Disabled - Filter will be ignored.
- None - Notification will be displayed only when the cart is empty.
- Less Than - Notification will be displayed if the number of products in the cart is lower than the specified value.
- More Than - Notification will be displayed if the number of products in the cart exceeds the specified value.
Cart "Currency" Amount - Define the required cart value for the notification to be displayed on the view cart page. This filter can be configured separately for each available currency on your website.
- Disabled - Filter will be ignored.
- Less Than – The notification will be displayed if the total value of products in the cart is lower than the specified amount.
- More Than – The notification will be displayed if the total value of products in the cart exceeds the specified amount.
Cart Products - Defines product-related conditions that trigger the notification.
- Disabled - Filter will be ignored.
- Contains all selected - Notification will be displayed only if all selected products are present in the cart.
- Contains any of selected - Notification will be displayed if at least one of the selected products is in the cart.
- Does not contain any of selected - Notification will be displayed only if none of the selected products are in the cart.
Cart Promocode - Determines whether the notification should be displayed based on the usage of a discount code during checkout.
- Disabled - Filter will be ignored.
- Applied - Notification will be displayed if a promotion code has been applied on the view cart page. This option also allows you to specify which exact promo code should trigger the notification.
- Not Applied - Notification will be displayed if no promotion code has been applied on the view cart page.

# Display Conditions

Define the conditions under which your clients can close specified notification, as well as when this notification will be redisplayed.

# Display Close Icon

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

# Choose When Notification Should Be Shown Again

This option allows you to define when a notification should reappear after being closed by the customer.

Show After Every Page Reload – The notification will appear each time the page is reloaded.
Show At The User’s Next Login – The notification will appear the next time the user logs into their account. For guest customers notification will be displayed after each pager reload.
Show After a Specific Number of Days – The notification will reappear after a specified number of days. When this option is selected, the following additional settings will be available:
- Enter Number of Days – Specify the number of days after which the notification will be shown again.
- Require Confirmation Checkbox – When enabled, the customer must check the checkbox before closing the notification. If the checkbox is not checked, the notification will reappear upon the next page reload. If disabled, the notification will not reappear, and no confirmation will be needed from the customer.
Do Not Show Again After Closing – The notification will not reappear once it is closed.

# Notification Style

# Notification Type

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

# Alert

Display notification as "Alert" box, shown below page title.

Display notification as "Modal" shown on page load. You can display multiple modals on single page.

# Floating Alert

Display notifications as floating alerts above the top menu. These alerts remain affixed to the top of the browser window, ensuring your notification is always prominently visible as customers navigate your website.

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

Default - Standard notification, which display icon in gray color, and removes left bar from "Alert" notification type.
Info - Informational notification, containing blue accent colors.
Success - Success notification, containing green accent colors.
Warning - Warning notification, containing orange accent colors.
Danger - Danger notification, containing red accent colors.
Primary - Notification with primary color style, which displays icon in gray color. You can change Primary gradient colors in the Style Manager (opens new window).
Secondary - Notification with secondary color style, which displays icon in gray color. You can change Secondary gradient colors in the Style Manager (opens new window).
Gray - Standard notification with gray background. You can change Gray gradient colors in the Style Manager (opens new window).

# 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

Right - Buttons will be aligned to the right for the alert.
Bottom - Buttons will be placed a below alert description, and will be aligned to the left side.

Left - Buttons will be aligned to the left of the modal content.
Center - Buttons will be centered.
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.

# Page Load

When this setting is selected, the modal will display automatically when the customer loads a page matching the previously configured "Display Rules." Additionally, you can define a delay for how long after the page loads the modal should appear.

# Exit Intent

When the "Exit Intent" option is selected, the modal will only display when the customer attempts to leave your website. This provides an opportunity to present an additional call-to-action, such as offering more information or a promotion, before they exit.

# Click

This option allows you to display the modal only when triggered manually. For example, you can configure a modal to appear when a specific button in the client area is clicked. To achieve this, follow these steps:

Add the class open-modal-christmas to the button that should trigger the modal, for example in page section.
Use WHMCS hooks or the Lagom Custom Code (opens new window) extension to include the following JavaScript script:

document.addEventListener('DOMContentLoaded', function () {
    // Attach click event to all anchors with the class 'open-modal-christmas'
    document.querySelectorAll('.open-modal-christmas').forEach(function (anchor) {
        anchor.addEventListener('click', function (event) {
            event.preventDefault(); // Prevent the default behavior of the anchor
            // Open the Bootstrap modal with the class 'modal-christmas-sale'
            var modalElement = document.querySelector('.modal-christmas-sale');
            if (modalElement) {
                var modal = new bootstrap.Modal(modalElement, {
                    keyboard: true // Allow closing the modal with the Escape key
                });
                modal.show(); // Display the modal
            } else {
                console.error('Modal element with the class "modal-christmas-sale" was not found.');
            }
        });
    });
});

Create a modal and assign the appropriate class to it, which will be used to identify and open the modal using the script provided above. In this case, the class will be modal-christmas-sale.

The example above has been implemented on our demo page to showcase various modals generated by the Client Notification extension. See Demo Page (opens new window)

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

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

Small - modal with 300px width.
Medium - modal with 448px width.
Large - modal with 560px width.
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".

# 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:

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.

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.

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

Edit - "Pen" icon, allows you to replace currently chosen graphic. When clicked "Media Manager" modal will be shown.
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.

Add New -
Edit -
Remove -

# Notification Settings

# General

Name - Notification name, used only for backend purposes, this name will be listed in "Notification List" table.
Custom Class - Allows to assign custom class, which then can be used for advanced purposes like custom styling, via CSS file.
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.

Start Date - Set the date when notification should start showing.
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.

# 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:

# General

{Services} - Number of "Services" which fits configured filter in this notification.
{Domains} - Number of "Domains" which fits configured filter in this notification
{Unpaid Invoices} - Number of "Unpaid Invoices" of the currently logged in customer.
{Overdue Invoices} - Number of "Overdue Invoices" of the currently logged in customer.
{Total Due Invoices Balance} - Total amount of "Due Invoices" of the currently logged in customer.
{Client Name} - Full name of currently logged in customer.
{Client First Name} - First name of currently logged in customer.
{Client Last Name} - Last name of currently logged in customer.
{Client Email Address} - Email address of currently logged in customer.
{Client Company Name} - Company name of currently logged in customer.
{Client Credit Balance} - Credit balance of currently logged in customer.

# Timer

Timer is a feature that let's you add a countdown to your notification, measuring and displaying the remaining time for an event, such as timed limited promotion. It has two sizes and four graphic styles to choose from. Read the information below to learn how to configure the timer.

In order to enable Timer, you need to enable the Display Time feature and utilize {Alert Expiry Counter} variable in your message. This variable supports the size and style modifiers listed in the table below.

# Timer Sizes

# Size Default

This size is the default, meaning you don’t need to modify the message variable—simply use {Alert Expiry Counter}.

# Size Small

To use the "Small" size, simply add Size-Small to the variable. It should look like this: {Alert Expiry Counter Size-Small}.

# Size Extra Small

To use the "Extra Small" size, simply add Size-Extra-Smal to the variable. It should look like this: {Alert Expiry Counter Size-Extra-Small}.

# Timer Styles

The timer is designed similarly to the one available in Lagom Website Builder, offering four distinct styles to choose from.

# Style-1 (Default)

To use "Style-4," simply add Style-1 to the variable. The complete format will look like this: {Alert Expiry Counter Style-1 Size-Small}.

# Style-2 (Bordered)

To use "Style-4," simply add Style-2 to the variable. The complete format will look like this: {Alert Expiry Counter Style-2 Size-Small}.

# Style-3 (Boxed)

To use "Style-4," simply add Style-3 to the variable. The complete format will look like this: {Alert Expiry Counter Style-3 Size-Small}.

# Style-4 (Separated)

To use "Style-4," simply add Style-4 to the variable. The complete format will look like this: {Alert Expiry Counter Style-4 Size-Small}.

# Timer Types

Timers allow you to display dynamic countdowns inside your messages. You can choose different timer types depending on how you want the time to be calculated and displayed.

# Reset

This timer type restarts the countdown every 24 hours, starting from the time defined in the Start Date. The Start Date must be set for this timer to work. Optionally, you can also define an End Date if you want the countdown to stop at a certain point.

All time calculations are based on the server’s time zone.

To enable this timer type, add the Type-Reset modifier to the variable used in your message.

Example:

{Alert Expiry Counter Type-Reset}

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

Lagom Small - Displays default Lagom font icon package that includes small UI Icons. These icons are in size 12x12px.
Lagom Medium - Displays default Lagom font icon package that contains medium UI Icons. These icons are in size 18x18px.
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" (opens new window)

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", 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

Add New -"Add New" link opens "Button Manager" modal, which allows you to configure and add new button.
Edit - "Pen" icon allows you to edit existing buttons, once clicked "Button Manager" modal will open.
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" (opens new window).

List of options available for this field:

Extra Small - Button with 30px height.
Small - Button with 36px height.
Default - Button with 44px height.
Large - Button with 52px height.

# Button Style

Allows you to select button style.

List of options available for this field:

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

# Button Type

Choose button color, which are defined in "Style Manager" (opens new window).

List of options available for this field:

Primary
Secondary
Default
Info
Success
Warning
Danger.

# Button Text

Enter text which will be shown in created button.

# Button Link Type

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

← Changelog Predefined Notifications →

# Configuration

# Main Notifications Page

# Notification List

# Import Notification

# Create Notification

# Configure Notification

# Display Rules

# Page Filters

# Page Categories

# Selected Pages

# Excluded Pages

# Custom URL Configuration

# Client Filters

# Services Assigned To Client Filters

# Services Not Assigned To Client Filters

# Service Configurable Option Filters

# Domain Filters

# Shopping Cart Filters

# Display Conditions

# Display Close Icon

# Choose When Notification Should Be Shown Again

# Notification Style

# Notification Type

# Alert

# Modal

# Floating Alert

# Notification State

# Notification Buttons Location

# Options for "Alert" notification type

# Options for "Modal" notification type

# Modal Display Trigger

# Page Load

# Exit Intent

# Click

# Modal Display Delay

# Modal Size

# Display Default Icons

# Alert

# Modal

# Enter Number of Days

# 0 Days

# >=1 Days

# Notification Content

# Choose Language To Edit

# Title

# Message

# Icon

# Buttons

# Notification Settings

# General

# Display Time

# Last Modification

# Message Variables

# General

# Timer

# Timer Sizes

# Size Default

# Size Small

# Size Extra Small

# Timer Styles

# Style-1 (Default)

# Style-2 (Bordered)

# Style-3 (Boxed)

# Style-4 (Separated)

# Timer Types

# Reset

# Media Manager

# Predefined Icons

# UI Icons

# Modal

# Alert

# SVG Icons

# Modal

# Alert

# SVG Illustrations

# Modal

# Alert

# Custom Icons

# Media Library

# Modal