# Configuration
Welcome to the "Configuration" page of the Custom Code for Lagom WHMCS Client Theme (opens new window)! This powerful tool empowers you to tailor your Lagom WHMCS Client Theme (opens new window) experience by injecting custom HTML, CSS, and JS code. With the ability to choose specific code locations, designate targeted pages, and even define display conditions based on customer login status, you have unparalleled flexibility to customize your client area exactly to your preferences.
# Code Instances List
On this page, you'll see a list of created "Custom Code". Here, users gain control over their customized code instances, providing a centralized space for easy management and optimization. Dive in to explore how effortlessly you can oversee and fine-tune your custom code, ensuring a seamless and tailored experience tailored to your unique needs.
Here is an explanation of the columns displayed in the "Custom Hours" table.
- Name - Display name of created custom code instance.
- Location - Displays the name of the "hook" that was utilized to inject a particular code instance. Learn more.
- Customer Status - Indicates the customer login statuses for which the specific code instance will be loaded. Learn more.
- Status - Shows if specific code instance is enabled or disabled.
- Actions
- Manage - Redirects to management page of selected instance.
- Deactivate/Deactivate - Deactivate or activate selected instance.
- Delete - Removes selected instance. This action can not be reversed.
# Code Management
Upon creating a new code instance or managing an existing one, you will be directed to the management page, detailed below.
# Code Editor
The "Code Editor" field enables you to input HTML, CSS, or JS code intended for display in the Lagom WHMCS Client Theme. This field automatically formats the code, ensuring easy and accurate composition of correctly formatted code snippets.
# General Settings
The General Settings box allows you to name your instance and determine whether it should be enabled or disabled.
- Name - Set the name of the custom code instance you are managing. This name will be displayed in the "Custom Code" table.
- Activate Instance - Choose if currently managed instance should be visible for your customers, or not.
# Code Display
The Code Display Panel is where you configure the display settings for your code instance. You can specify the specific pages where it should appear and precisely define the location within the Lagom WHMCS Client Theme where the created code should be injected. Further details will be covered in the articles below.
# Code Location
The Code Location fields specify the WHMCS output hook (opens new window) to be used for injecting custom code. It is important to ensure that the code you write is formatted correctly according to the chosen location. For instance, if you select ClientAreaHeadOutput, your code should be written to be compatible with the <head> tag.
There are several output hooks to choose from, and detailed descriptions of each option can be found in the articles below.
# ClientAreaHeadOutput
When this option is selected, your custom code will be injected before the closing of the <head> tag in the Lagom WHMCS Client Theme. You have the flexibility to use <title>, <style>, <meta>, <link>, <script>, and <base> tags in this location. Learn more (opens new window).
This location is managed by the {$headoutput} smarty tag, located in the templates/lagom2/header.tpl file.
# ClientAreaHeaderOutput
When this option is selected, your custom code will be injected immediately after the opening of the <body> tag in the Lagom WHMCS Client Theme. You have the flexibility to use any HTML, CSS, or JS code for this location.
This location is managed by the {$headeroutput} smarty tag, located in the templates/lagom2/header.tpl file.
# ClientAreaFooterOutput
When this option is selected, your custom code will be injected immediately after the closing of the <body> tag in the Lagom WHMCS Client Theme. You have the flexibility to use any HTML, CSS, or JS code for this location.
This location is managed by the {$footeroutput} smarty tag, located in the /templates/lagom2/core/layouts/footer/default/default.tpl file.
# ClientAreaProductDetailsOutput
When this option is selected, your custom code will be injected in Product Management page, for logged in customers in the Lagom WHMCS Client Theme. You have the flexibility to use any HTML, CSS, or JS code for this location.
This location is managed by the {$hookOutput} smarty tag, located in the /templates/lagom2/clientareaproductdetails.tpl file.
# ClientAreaDomainDetailsOutput
# ShoppingCartCheckoutOutput
# ShoppingCartConfigureProductAddonsOutput
# Customer Status
This setting allows you to determine the customer status for which a specific code instance should be displayed. You have the option to choose from all customers, only logged-in customers, or non-logged-in customers.
- All - Code instance will be shown for both logged in and logged out customers.
- Logged In - Code instance will be shown ONLY for logged in customers.
- Logged Out - Code instance will be shown ONLY for logged out instances.
# Display On Specific Pages
In this section, you can select from a list of Lagom WHMCS Client Theme pages on which a specific code instance should be displayed. You have the flexibility to choose a single page or select multiple pages.
This setting seamlessly integrates with the Lagom WHMCS Website Builder (opens new window) product. Once activated, it automatically lists all pages generated by our CMS, providing an extensive range of options for your code customization.
# WHMCS Hook Parameters & Smarty Tags
This feature provides quick access to WHMCS hook parameters and Smarty template tags directly within the code editor, allowing you to seamlessly integrate dynamic data.
With this functionality, you can retrieve specific data stored in the WHMCS database, such as company name, system URL, system date, and more. This opens up advanced configuration possibilities, enabling you to write custom code effortlessly, without needing to create or modify files on the WHMCS server.
Designed for both beginners and experienced developers, this feature enhances development speed while minimizing errors.
When enabled, the editor will display two helpful tables:
WHMCS Hook Parameters - a dynamic list of hook parameters, based on the selected Code Location.
Smarty Tags - a static list of Smarty tags, commonly used in WHMCS templates.
# WHMCS Hook Parameters
When you select a Code Location (e.g. ClientAreaHeaderOutput), the editor will show the list of available WHMCS parameters that are specific to that location.
Each hook output supports its own set of variables. For example, ClientAreaPage may give you access to client details, while ShoppingCartCheckoutOutput will offer cart-related variables.
Important: Using a variable that does not exist for the selected hook may cause the code to fail or break the page. Always choose parameters from the list shown for the selected location.
To make things easier, you can hover over any parameter to instantly copy its syntax and paste it into your code.
# Smarty Tags
This section provides a predefined list of commonly used Smarty tags that can be used in WHMCS template files and hook outputs.
Available functions include: for, foreach, foreachelse, if, elseif, else, while, debug, literal.
Unlike the hook parameters, this list is always visible and does not change based on the selected code location. These tags are useful when building conditions, loops, and other logic in your templates.
Here, you can also hover over any parameter to instantly copy its syntax and paste it into your code.