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 #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.

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the