A clean, modern boilerplate for creating Zoho Widgets without any frameworks. Includes the ZOHO JS SDK initialization.
Zoho Creator's native drag-and-drop pages are excellent for standard reporting, but sometimes you need a highly customized, branded, or interactive UI that native components can't provide. Widgets are the answer, but setting up heavy frameworks like React or Angular is overkill for a simple dashboard.
This boilerplate provides the absolute minimum required HTML and JavaScript to get a Zoho Creator Widget running securely.
The widgetsdk-min.js file injected into the <head> exposes the global ZOHO object. However, before you can make any API calls back to Creator (like fetching records), you must wait for the SDK to handshake with the parent iframe.
This is done via ZOHO.CREATOR.init().then(...). Anything inside this then block is guaranteed to have an active session token.
index.html file.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://js.zohostatic.com/creator/widgets/version/1.0/widgetsdk-min.js"></script>
<style>
body { font-family: 'Inter', sans-serif; padding: 20px; }
.card { padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<div id="app" class="card">Loading...</div>
<script>
ZOHO.CREATOR.init().then(function(data) {
// Widget is initialized
var queryParams = ZOHO.CREATOR.UTIL.getQueryParams();
// Example API Call
ZOHO.CREATOR.API.getAllRecords({
reportName: "All_Customers"
}).then(function(response) {
document.getElementById('app').innerHTML = "Loaded " + response.data.length + " records!";
});
});
</script>
</body>
</html>