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