Zoho CRM widget development: the complete setup guide

What a Zoho CRM widget is, and when to build one

A Zoho CRM widget is a small web app, HTML, CSS and JavaScript, that runs inside Zoho CRM. It reads and writes records through Zoho's JavaScript SDK and can sit behind a custom button, in a related list, on a dashboard or in a web tab.

Build one when fields, layouts and workflows cannot give your team the screen they need. Our widgets include a phone inside the record and a Send SMS window with a number picker, templates and scheduled sends.

Step 1: Start the widget project with the Zoho CLI

Step 2: Load the Zoho CRM widget SDK (the spelling trap)

The widget talks to Zoho CRM through the embedded app SDK, loaded from Zoho's CDN. The file is named ZohoEmbededAppSDK.min.js, with one "d" in the middle.

One more thing to know: the SDK only connects when the page is opened inside Zoho CRM. Opened on its own in a browser tab, the widget loads but cannot reach any record.

Step 3: plugin-manifest.json and cspDomains

plugin-manifest.json describes the widget to Zoho. The setting that trips people up is cspDomains: the list of outside domains the widget is allowed to call from the browser.

• If the widget calls an outside API from JavaScript, add that domain to cspDomains, or the browser blocks the call.
• Better: do not call outside APIs from the browser at all. Call a Deluge function, and let the function call the API.
• That keeps API keys on the server, out of the widget code anyone can open in the browser.

Step 4: Read the record the widget was opened from

Register the PageLoad listener with ZOHO.embeddedApp.on("PageLoad", ...) first, then call ZOHO.embeddedApp.init(). The PageLoad data tells you the module (Entity) and the record (EntityId).

With the record ID in hand, use ZOHO.CRM.API.getRecord to load the lead, deal or contact, and fill your screen with its phone numbers, owner and consent fields.

Step 5: Call Deluge for the work that needs credentials

ZOHO.CRM.FUNCTIONS.execute runs a Deluge function from the widget and returns its result. That is where the calls to other systems belong: sending a text, placing a call, pushing a record to another app.

• Store API keys in org variables (CRM Variables), and read them in the function.
• Pass the record ID and the user's choices as arguments, nothing secret.
• Return a clear success or error message, and show it in the widget.
• Write the result back to the record, so the history lives in Zoho CRM.

Our guide to sending SMS from Zoho CRM with Twilio walks through one of these functions line by line.

Step 6: Package and upload the widget to Zoho CRM

Step 7: Put the widget where your team works

• Custom button: on the record page or a list view, opening the widget in a popup. This is where our Send SMS window lives.
• Related list: a panel on the record page, like a call or text history.
• Web tab: a full page in the Zoho CRM menu, for tools that are not tied to one record.
• Dashboard: a widget on a dashboard, for live numbers.

Test with each profile that will use it. Button visibility follows profiles, and a widget that works for an admin can be missing for a rep.

Zoho CRM widgets we have built

We build our widgets to be reused, wired to each client's phone and texting platform. Our phone widget and Send SMS window have been launched in Zoho CRM for several clients.

• A CallTrackingMetrics phone inside the record, with the lead opened when a call is answered.
• A Send SMS window: pick the number to send from, a phone on file or another number, and a template, then send now or schedule it.
• An Approved to SMS check before any text goes out.
• Inbound texts tied to the right lead, and new leads from unknown numbers.