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 #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • 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