General Configuration

• Client Area
  • Exemplary code snippets
• Admin Area
• Security
• Other
• SEO

This article provides information about the general configuration options available in PanelAlpha.com. Starting the configuration of your PanelAlpha application at this point will provide the most basic data needed to initiate the system and enable you to fully and easily manage WordPress instances.

Begin the configuration process by navigating to the "Configuration" section and selecting "General".

Client Area

Client Area is the initial section where essential information about your client panel is provided.

These include:

1. Application Name - the application name is the name of your application that will be visible to your clients. It serves as an identifier for your application within the client area.

2. Application URL - the URL that your clients will use to access your application. Provide the URL to your application so that your clients can easily access it. Press the "Change Domain" button, type in the domain name, test connection and save changes by pressing Save New URL button.

3. Default Language - choose the default language that will be used in the client area. Currently, only the English language is available by default. In future versions of the application the support for multilanguage will be introduced.

4. Default Date Format - Select a default date format that will be used to display dates in the client area.

5. Client Area Header - Customize your PanelAlpha client area by providing your JavaScript code (custom.js). The header section will be appropriately adjusted according to the provided code snippet. For example, you can enter code to add a navigation menu or a notification bar to the client area.

6. Client Area CSS - Customize the PanelAlpha client area by adding your own CSS code to modify any element. You can introduce new elements, such as brand icons or custom buttons linking to your website, or modify existing elements like fonts, colors, or menu display.

7. Client Area Footer - Customize your PanelAlpha client area by providing your JavaScript code (custom.js). The footer section will be adequately adjusted according to the provided code snippet. For example, you can enter code to add a live chat feature to the client area.

8. Branding - Branding is an important aspect of your application and has been explained in detail in a dedicated section. Refer to the dedicated section to learn how to customize single elements of your client area.

Exemplary code snippets

1. Custom banner - That is how an exemplary JavaScript code snippet for a custom banner may look like (either 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>
   

2. Live chat - Here is an exemplary JavaScript code snippet for implementing a live chat (opens new window) in your client area. Remember to adjust the license number, as the example below uses a fake license number:

   <!-- 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 - Style the button to match your branding.

   .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);
   }
   

   The above code will create a "Support" button that redirects users to your support page, and the CSS will style it to fit your theme. Adjust the styles as needed to match your brand.

Admin Area

Admin Area is the next section where you will need to proceed to provide crucial information about your admin panel.

1. Admin URL - the URL directing to your application admin area. Press the "Change Domain" button, type in the domain name, test connection and save changes by pressing "Save New URL" button. Keep in mind that 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 - choose the default language that will be used in the client area. Currently, only the English language is available by default. Currently, only the English language is available by default. In future versions of the application the support for multilanguage will be introduced.

3. Default Date Format - Select a default date format that will be used to display dates in the admin area of your PanelAlpha.

Security

In this section, you can configure important security settings to enhance the protection of your PanelAlpha application and ensure user accounts remain secure.

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

2. Force Clients to Enable 2FA - Check 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 just their password.

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

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

Other

In the final section, you will find various unrelated but crucial data fields that must be filled in to effectively utilize the application.

1. Invitations Expiry Days - determine the number of days that invited users have to accept invitations in order to access their instance. You can specify a suitable timeframe within which users should 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 you manage invitation reminders and ensure that users receive the invitation if they haven't responded within the imposed timeframe.

3. Statistics Retention Period - choose 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 - the URL to which users are redirected to order a new service.

5. Order Domain Link - the URL to which users are redirected when they want to order a new domain for their instance. This link streamlines the process for users who wish to acquire an additional domain.

6. Order Custom SSL Certificate Link - this is the URL to which users are redirected when they intend to order a custom SSL certificate.

7. Unsuspend Service Link - the URL to which users are redirected when they need to unsuspend their service. By providing this link, users can easily navigate to the appropriate page and follow the necessary steps to reactivate their suspended service.

8. Support Link - the URL to which users are redirected when they seek 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.