ZOHO Widget SDK not loading in html

ZOHO Widget SDK not loading in html

I have this code below, I have imported the widgetsdk however I get the error shown in the image,
I have tried many different ways of importing and initiating the function ZOHO but nothing is working. 

can someone explain what I'm doing wrong, if I am doing something wrong? 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Group Hierarchy Related List</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/app/widgetsdk.js"></script>
</head>
<body>
    <table class="hierarchy-list">
        <thead>
            <tr>
                <th>Group Name</th>
                <th>Hierarchy Level</th>
                <th>Parent Group</th>
                <th>Middle Group</th>
            </tr>
        </thead>
        <tbody id="hierarchyContent">
            <!-- Data will be populated here -->
        </tbody>
    </table>

    <script>
        $(document).ready(function () {
            console.log(typeof ZOHO); // Should print "object" if ZOHO is loaded
            console.log("Document ready. Checking ZOHO...");
           
            if (ZOHO && ZOHO.embeddedApp) {
                console.log("ZOHO.embeddedApp is defined");

                // Initialize Zoho Embedded App
                ZOHO.embeddedApp.init();

                // Register PageLoad event
                ZOHO.embeddedApp.on("PageLoad", function (data) {
                    console.log("PageLoad event triggered:", data);

                    // Initialize Zoho CRM
                    ZOHO.CRM.init().then(function () {
                        console.log("Zoho SDK initialized successfully");
                    }).catch(function (err) {
                        console.error("Error initializing Zoho SDK:", err);
                    });
                });
            } else {
                console.error("ZOHO.embeddedApp is not defined or ready.");
            }
        });
    </script>
</body>
</html>