As a reseller, you might have external tools, web builders, or systems outside of the 20i platform that are integral to your workflow or your customers' operations.
To streamline access to these external resources, you can enhance your StackCP control panel by adding custom icons that link directly to those external services.
This allows you to provide easy access to third-party platforms, making the user experience more seamless and keeping everything important in one place.
Whether you want to link to external website builders, content management systems, or other tools, this guide will show you how to add these custom icons to your StackCP interface.
In this guide, we’ll show you how to add custom icons to StackCP by inserting a JavaScript code snippet into the Analytics Tracking Code section, located in StackCP Settings. While this section is typically used for Google Analytics tracking, you can also insert JavaScript code to customize your StackCP.
Step-by-Step Instructions:
Navigate to StackCP Settings:
- Log in to my.20i.com.
- Select Manage Reseller from the left-hand menu.
- Click StackCP Settings.
- Scroll down to the Analytics Tracking Code section.
Insert the Custom JavaScript Code:
Paste the following code into the Analytics Tracking Code section. This example will add a new custom icon to a specific section of StackCP.
<script>
const checkForElement = setInterval(function() {
// Find all elements with the specific heading class
document.querySelectorAll('h5.mb-0.float-left').forEach(function(heading) {
// Check if the heading text matches the desired section (e.g., 'Web Files', 'CDN', etc.)
if (heading.textContent.trim() === 'Your Section Name') {
// Stop checking once the element is found
clearInterval(checkForElement);
// Find the icon container within the corresponding section
const iconContainer = heading.closest('.card').querySelector('.icon-results');
// Create a new div element for the custom icon
const newIconDiv = document.createElement('div');
newIconDiv.className = 'col-4 col-sm-3 col-md-3 col-lg-3 col-xl-2 text-center col-icon';
// Create the link element for the custom icon
const newIconLink = document.createElement('a');
newIconLink.href = 'https://example.com'; // Replace with your custom link
newIconLink.target = '_blank'; // Open the link in a new tab
newIconLink.className = 'icon-grid-nav__link';
newIconLink.setAttribute('data-toggle', 'tooltip');
newIconLink.setAttribute('data-placement', 'top');
newIconLink.title = 'Your Tooltip Text'; // Set the tooltip text for the icon
// Create a container for the image element
const imageContainer = document.createElement('div');
imageContainer.className = 'image-container';
// Create the image element for the icon
const newIconImg = document.createElement('img');
newIconImg.src = '/path/to/your/icon.svg'; // Replace with the path to your custom icon image
newIconImg.alt = 'Your Tooltip Text';
newIconImg.className = 'img-fluid icon-grid-nav__icon';
// Append the image to the image container
imageContainer.appendChild(newIconImg);
// Create the text label for the icon
const iconText = document.createElement('span');
iconText.className = 'icon-grid-nav__text';
iconText.textContent = 'Your Link Text'; // Set the label text for the icon
// Append the image container and text label to the link
newIconLink.appendChild(imageContainer);
newIconLink.appendChild(iconText);
// Add the new icon link to the icon container in the section
iconContainer.appendChild(newIconDiv);
}
});
}, 1000); // Check every second until the section is found
</script>
Customizing the Code:
To tailor this code to your specific needs, you’ll need to modify the following:
Section Title: In the line if (heading.textContent.trim() === 'Your Section Name'), you can change 'Your Section Name' to match the StackCP section where you want the custom icon to appear. Valid section names include:
'CDN''Web Files''Web Tools''Email''Domain Names''Security''Logs & Stats''One-Click Installs'
Link URL: Inside newIconLink.href = 'https://example.com';, replace https://example.com with the URL you want the new icon to link to.
Tooltip Title: Modify 'Your Link' in newIconLink.title = 'Your Link'; to display the appropriate tooltip text when users hover over the icon.
Image Path: Replace /path/to/your/icon.svg with the file path to the custom icon you want to use. You can upload your icon to a website's filespace on a 20i hosting package, or use a link from an external resource.
Icon Label Text: Change 'Your Link' in iconText.textContent = 'Your Link'; to update the label text beneath the icon.
Important Notes:
- This JavaScript code will run every second until it finds the correct StackCP section (e.g., "Web Files"). Once it finds the section, it will stop running and inject the custom icon.
- If you have multiple sections to customize, you can duplicate the code and adjust each section’s title, link, and icon as needed.
