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.

Code Snippet for Injecting Elements into CustomerHub

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

<div id="element-to-inject">INJECT THIS</div>
<script>
// Add to merchants customers/account.liquid to inject elements at the top of the Dashboard
if(location.pathname == '/account'){
    const chElementObserver = new MutationObserver((mutations, obs) => {
    try{
        var chFindElement = document.querySelector('#element-to-inject');
        if (chFindElement) {
            let chDashInsert = document.querySelector('#ChRecentOrders');
            let chInjectDiv = document.createElement('div');
            chInjectDiv.classList.add("chContent-Body-Page-General");
            chInjectDiv.innerHTML = chFindElement.innerHTML;
            chDashInsert.parentNode.insertBefore(chInjectDiv, chDashInsert);
            obs.disconnect();
            return;
        }
    }catch(e){
        console.log(e);
        obs.disconnect();
    }
    });
    chElementObserver.observe(document, {
        childList: true,
        subtree: true
    });
}
</script>

This code snippet leverages a JavaScript "MutationObserver" to inject elements from the customers/account.liquid file into the CustomerHub dashboard. Update the JavaScript ID #element-to-inject with the ID of the element you want to inject from the account page code.

Using the Code Snippet for Custom Features and App Integrations

Developers can utilize the provided code snippet to enhance CustomerHub with custom features, creating a tailored experience for their users. With this snippet, developers have the flexibility to customize and add features as needed.

App partners can also use this code snippet to integrate their apps with CustomerHub. By injecting elements from their app into CustomerHub, they can extend the functionality of the app and provide additional value to users.