How to add 3rd party elements to the customer account page

Enhance CustomerHub with Custom Features and App Integrations

CustomerHub provides an excellent platform for developers and app partners looking to add custom features or integrate their apps. Using the code snippet provided below, you can inject elements into the CustomerHub app, offering unique solutions and integrations to suit your needs.

THIS TUTORIAL REQUIRES CODING KNOWLEDGE Our support team is dedicated to assisting with the functionality provided within the CustomerHub app itself, however we're unable to assist you with any custom coding or modifications. If you are unfamiliar with coding or require assistance with this specific customization, we strongly recommend consulting with a professional developer or a Shopify expert.

Code Snippet for Injecting Custom Elements into CustomerHub

Use the following code snippet to inject custom features or elements from third-party apps or custom built modules into CustomerHub:

<!-- This div contains the content that will be injected into the account page. Update its content as needed. --><div id="element-to-inject">INJECT THIS</div>
<script>
    // Add to merchants customers/account.liquid to inject elements at the top of the Dashboard
    //Add to merchants customers/addresses.liquid to inject elements into the customer account profile page
    // This code is executed when the user is on the '/account' page
    if(location.pathname == '/account'){
        // Create an observer to monitor changes in the DOM
        const chElementObserver = new MutationObserver((mutations, obs) => {
            try{
                // Make sure to update the ID #element-to-inject with the ID of the element you want to inject from the account page code.
                var chFindElement = document.querySelector('#element-to-inject');
                
                // Check if the element with the specified ID is found
                if (chFindElement) {
                    // Locate the target insert location on the dashboard
                    let chDashInsert = document.querySelector('#ChRecentOrders');
                    
                    // Create a new div to hold the content to be injected
                    let chInjectDiv = document.createElement('div');
                    chInjectDiv.classList.add("chContent-Body-Page-General");
                    
                    // Copy the inner HTML from the found element to the new div
                    chInjectDiv.innerHTML = chFindElement.innerHTML;
                    
                    // Insert the new div before the target insert location on the dashboard
                    chDashInsert.parentNode.insertBefore(chInjectDiv, chDashInsert);
                    
                    // Disconnect the observer as the operation is complete
                    obs.disconnect();
                    return;
                }
            }catch(e){
                // Log any errors to the console and disconnect the observer
                console.log(e);
                obs.disconnect();
            }
        });
        
        // Start observing the entire document for changes in child elements and their subtrees
        chElementObserver.observe(document, {
            childList: true,
            subtree: true
        });
    }
</script>