General Configuration

• Client Area
  • Basic Settings
  • Customization Options
  • Branding
  • Code Examples
• Admin Area
• Security
• Other
• SEO

This article provides comprehensive information about the general configuration options available in PanelAlpha. Configuring your PanelAlpha application through these settings will provide the essential data needed to initialize the system and enable full management of WordPress instances.

To begin the configuration process, navigate to Configuration → General in your admin panel.

Client Area

The Client Area section contains essential configuration options for your client panel. These settings control how your application appears and functions for end users.

Basic Settings

1. Application Name - Set the name of your application that will be visible to your clients. This serves as the primary identifier for your application within the client area.

2. Application URL - Configure the URL that clients will use to access your application. To modify this setting:

   • Click the Change Domain button
   • Enter the new domain name
   • Test the connection
   • Save changes by clicking Save New URL

3. Default Language - Select the default language for the client area. Currently, English is the only available language. Support for multiple languages will be introduced in future versions.

4. Default Date Format - Choose the default date format that will be used to display dates throughout the client area.

Customization Options

1. Client Area Header - Add custom JavaScript code to modify the header section of your client area. You can use this to add navigation menus, notification bars, or other custom elements.

2. Client Area CSS - Apply custom CSS styling to modify the appearance of your client area. Use this to:

   • Add brand icons or custom buttons
   • Modify fonts, colors, or menu display
   • Introduce new visual elements

3. Client Area Footer - Add custom JavaScript code to modify the footer section. This is commonly used for adding live chat features or additional navigation elements.

Branding

The PanelAlpha platform allows for highly personalized branding of your client area. To access branding options, navigate to Configuration → General → Client Area → Branding and click the Configure button.

You will be redirected to the client area preview. Click the Customize tab on the right side of the screen to open the style manager.

Style Manager

Customize your client area to align with your brand's aesthetic using the live-preview form.

1. Change Mode - Choose between Dark and Light mode for your client area interface.

2. Let Users Switch - When enabled, allows users to toggle between light and dark mode themselves.

3. Change Logo (Light Mode) - Upload your logo for display in the top left corner during light mode. Supported formats: .jpg, .png, .svg

4. Change Logo (Dark Mode) - Upload your logo for display in the top left corner during dark mode. Supported formats: .jpg, .png, .svg

5. Change Favicon - Upload a favicon icon to be associated with your website. Supported formats: .jpg, .png, .svg

6. Choose Color Scheme - Select from 5 default color schemes to brand your client area. This affects buttons, menu items, and section colors.

7. Customize Primary Colors - Fine-tune each primary color by clicking on the color preview and selecting from the color palette.

8. Additional Settings - Background shadows are enabled by default. Use this option to disable shadows if desired.

Once configured, save your changes. Use the Restore Default button to return to the original styling.

Code Examples

Custom Banner

Here's an example of JavaScript code for adding a custom banner (suitable for header or footer customization):

<script type="text/javascript">
const customBanner = document.createElement('div');
customBanner.innerText = 'Custom Banner';
customBanner.style.position = 'fixed';
customBanner.style.bottom = '10px';
customBanner.style.left = '10px';
customBanner.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
customBanner.style.color = 'white';
customBanner.style.padding = '10px';
customBanner.style.borderRadius = '5px';
customBanner.style.zIndex = '1000';
document.body.appendChild(customBanner);
</script>

Live Chat Integration

Example JavaScript code for implementing LiveChat (opens new window) in your client area. Remember to replace the license number with your actual license:

   <!-- Start of LiveChat (www.livechat.com) code -->
   <script>
    window.__lc = window.__lc || {};
    window.__lc.license = 28067890;
    window.__lc.integration_name = "manual_onboarding";
    ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
   </script>
   <noscript><a href="https://www.livechat.com/chat-with/28067890/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechat.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a></noscript>
   <!-- End of LiveChat code -->

3. Custom button - Here’s an example of how to add a custom button that redirects to your "Support" services. To do this, first, add the button using JavaScript, then use CSS to style it.

   • JavaScript (JS) - Add the button to your client area. Remember that the code provided is just an example; please adjust the content and functionality to suit your specific needs.

    const observer = new MutationObserver((mutationsList, observer) => {
    const targetElement = document.querySelector('.navbar__menu-items');
    if (targetElement) {
    document.querySelector('.navbar__menu-items').prepend(Object.assign(document.createElement('a'), {classList: 'custom-btn', href: '#', textContent: 'Support', target: '_blank' }));
    observer.disconnect(); // Stop observing
    }
    }); 
   

observer.observe(document.body, { childList: true, subtree: true });

**CSS Styling:**
```css
.v-application a.custom-btn {
text-transform: capitalize;
font-size: 18px;
line-height: 26px;
letter-spacing: 0px;
transition: color 0.3s ease;
color: var(--v-text-darken2);
margin-right: 40px;
font-weight: 600 !important;
}
.v-application a.custom-btn:hover {
color: var(--v-primary-base);
}

This code creates a "Support" button that redirects users to your support page, styled to match your theme.

Admin Area

The Admin Area section contains configuration options for your administrative panel. These settings control the basic functionality and appearance of the admin interface.

1. Admin URL - Configure the URL for accessing your application admin area. To modify this setting:

   • Click the Change Domain button
   • Enter the new domain name
   • Test the connection
   • Save changes by clicking Save New URL

   Important: If the Admin URL differs from the client area Application URL, cookies will stop working, making it impossible to log in as a user.

2. Default Language - Select the default language for the admin area. Currently, English is the only available language. Support for multiple languages will be introduced in future versions.

3. Default Date Format - Choose the default date format that will be used to display dates throughout the admin area.

Security

This section allows you to configure important security settings to enhance the protection of your PanelAlpha application and ensure user accounts remain secure.

1. User Force Reset Password - Enable this option to require a password reset for newly created users. When enabled, users must set a new password upon their first login, ensuring they have a unique and secure password.

2. Force Clients to Enable 2FA - Enable this option to require two-factor authentication (2FA) for newly created users. This adds an additional layer of security by requiring users to provide a second form of verification beyond their password.

3. Delay Requirement for 2FA - Specify the time frame after which users will be required to set up two-factor authentication following their account creation. Available options:

   • None - Forces 2FA setup immediately upon first login (no delay)
   • 24 hours
   • 48 hours
   • 7 days
   • 30 days

Other

This section contains various important configuration options that are essential for the effective operation of your PanelAlpha application.

1. Invitations Expiry Days - Set the number of days that invited users have to accept invitations to access their instance. This defines the timeframe within which users must respond to invitations.

2. Invitations Resend Limit Minutes - Specify the number of minutes after which an invitation may be resent to invited users. This setting helps manage invitation reminders and ensures users receive invitations if they haven't responded within the specified timeframe.

3. Statistics Retention Period - Define how long to keep website traffic statistics before they are automatically removed. Older statistics will be permanently deleted to save storage space.

4. Order Service Link - Configure the URL to which users are redirected when ordering a new service.

5. Order Domain Link - Set the URL to which users are redirected when ordering a new domain for their instance. This streamlines the process for users acquiring additional domains.

6. Order Custom SSL Certificate Link - Configure the URL to which users are redirected when ordering a custom SSL certificate.

7. Unsuspend Service Link - Set the URL to which users are redirected when they need to unsuspend their service. This link allows users to easily navigate to the appropriate page and follow the necessary steps to reactivate their suspended service.

8. Support Link - Configure the URL to which users are redirected when seeking assistance from the support team.

SEO

This section allows you to configure Search Engine Optimization (SEO) settings to improve your application's visibility in search engines and enhance its appearance when shared on social media platforms.

1. SEO - Enable or disable SEO settings for your site. When enabled, this option activates all SEO-related functionality and allows you to configure various optimization parameters to improve your application's search engine ranking and visibility.

2. Search Engine Indexing - Choose whether search engines can index your site. This setting controls the visibility of your application in search engine results:

   • Allow indexing - Permits search engines to crawl and index your site, making it discoverable through search results
   • Prevent indexing - Blocks search engines from indexing your site, keeping it private from search results (useful for staging environments or private installations)

3. SEO Title - Enter the title that will appear in search engine results and browser tabs. This is one of the most important SEO elements as it directly impacts click-through rates from search results. Keep it concise (50-60 characters) and include relevant keywords that describe your application's purpose.

4. SEO Description - Provide a brief description of your site for search engines. This meta description appears below the title in search results and should be compelling enough to encourage users to click through to your site. Aim for 150-160 characters and include key benefits or features of your PanelAlpha application.

5. Social Image - Upload an image to be displayed when your site is shared on social media platforms or messaging apps. Supported file formats include JPEG, JPG, and PNG.