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> </> ); }





      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          • Sticky Posts

          • 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
          • 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

          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ



                                ご検討中の方