Integrating Zoho CRM EmbeddedApp SDK with Next.js — Initialization and Data Fetching Issues

Integrating Zoho CRM EmbeddedApp SDK with Next.js — Initialization and Data Fetching Issues

You can get an idea from my code I have given in end:

First, I worked on a React project and tried the same thing — it worked.
My goal was to import the Zoho script and then load contacts using the Zoho Widget SDK, which was successful in React.

Now, I have created a Zoho extension and I’m trying to run the codein typescript inside  Zoho widget, but it’s not working properly.

In the console, I can see this message:

Available Zoho SDK methods: {embeddedApp: {…}, CRM: {…}}
page.tsx:28 ✅ Zoho SDK detected. Initializing...

After that, nothing else happens on the frontend — it just displays:
on UI
“Initializing Zoho Widget...”
Code:

'use client'; import { useEffect, useState } from 'react'; import Script from 'next/script'; declare global { interface Window { ZOHO: any; } } export default function ZohoWidget() { const [status, setStatus] = useState('Initializing Zoho Widget...'); const initZoho = async () => { try { if (typeof window === "undefined" || !window.ZOHO) { console.error(":x: window.ZOHO is not available"); console.error("This page must be loaded within Zoho CRM as a widget"); return; } console.log("Available Zoho SDK methods:", window.ZOHO); if (!window.ZOHO?.embeddedApp) { console.error(':x: Zoho SDK not available'); setStatus('Zoho SDK not detected. Please open this inside Zoho CRM.'); return; } console.log(':white_check_mark: Zoho SDK detected. Initializing...'); window.ZOHO.embeddedApp.on('PageLoad', async (data: any) => { console.log("block started"); }); window.ZOHO.embeddedApp.init(); } catch (err) { console.error(':x: Error initializing Zoho SDK:', err); setStatus('Error initializing Zoho SDK.'); } console.log("block started part"); }; useEffect(() => { const timer = setTimeout(() => initZoho(), 10000); return () => clearTimeout(timer); }, []); return ( <> <Script src="https://live.zwidgets.com/js-sdk/1.4/ZohoEmbededAppSDK.min.js" strategy="afterInteractive" onLoad={()=> console.log("script loaded!")} /> <div style={{ padding: 20, fontFamily: 'sans-serif' }}> <h1>Zoho CRM Widget</h1> <p>{status}</p> </div> </> ); }




    • Sticky Posts

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • Kaizen #217 - Actions APIs : Tasks

      Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

    • Kaizen #216 - Actions APIs : Email Notifications

      Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

    • Kaizen #152 - Client Script Support for the new Canvas Record Forms

      Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.