General Configuration

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

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.

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. Order Service Link - the URL to which users are redirected to order a new service.

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

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

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

7. Support Link - the URL to which users are redirected when they seek assistance from the support team.