Kaizen #202 - Answering Your Questions | Testing and Using REST APIs in Widgets

Kaizen #202 - Answering Your Questions | Testing and Using REST APIs in Widgets



Hello Developers!

Welcome back to a fresh week of Kaizen! 

Thank you for your active participation in sharing feedback and queries for the 200th milestone. This week, we will look at the following queries related to widget:
  • Widget Testing 
  • Using REST API in Canvas Widgets: Make HTTP calls in widgets (e.g., to external tax or product APIs)
Here are the queries that we have already answered for you from this milestone:
  1. Kaizen #200 - Answering Your Questions | Token generation using the Python SDK
  2. Kaizen #201 - Answering Your Questions | Webhooks, Functions, and Schedules

Widget Testing

One of the queries we received was simply stated
Quote
Widget Testing
 without any specific context. Since the user has not provided detailed input, we are assuming this is about how to test a widget during development.

You can test your Zoho CRM widget locally using the Zoho CLI. Run the following command from the root directory of your widget project:

zet run

This launches the widget on a local server where you can validate the UI and functionality before pushing it live.


Since the localhost connection opens in a new tab and is not private, you will need to manually authorize it. 

Click Advanced, then choose Proceed to 127.0.0.1 (unsafe) to continue. 

Notes
Note

If your widget needs to access data from your Zoho CRM organization, such as fetching or updating records, it must be deployed within a Zoho CRM iframe. To do this, you should upload the widget through the Zoho CRM Widgets setup page.

We recommend using the sandbox environment in such cases before deploying the widget to your production environment.

Making HTTP Calls from Widget

Following is a query we received from a user:
Quote
Using REST API in Canvas Widgets: Make HTTP calls in widgets (e.g., to external tax or product APIs)
Yes. You can make HTTP requests to external services from any type of Zoho CRM widget using the ZOHO.CRM.HTTP object from the Widget JS SDK.

Canvas Widget - What's Supported? 

Though full widget support within Canvas is on our roadmap, currently, you can invoke widgets from a Canvas view using Client Script. This lets you render widgets inside fly-outs or pop-ups. Here is a quick start guide on how you can achieve it:

Create a Widget

1. Create a widget project and code your logic using Zoho CLI as explained in our widget help page.

2. In Zoho CRM Developer Hub, create a new widget and set the type as Button.



Create a Client Script

3. Navigate to Client Scripts in Developer Hub and click New Script.

4. You can create your script either in the Modules or Commands category based on your use case. 

For assistance, refer to the step-by-step guide on Creating Client Script and Commands.



In the Category Details section, ensure to select Canvas as the page type. Canvas views are supported in the following page contexts: List, Detail, Create, and Clone. 

Choose the one that aligns with where your widget needs to appear.


5. Here is the sample script to render widget in a pop-up. 

ZDK.Client.openPopup({
api_name: 'Canvas_Widget',
type: 'widget',
animation_type: 4, 
height: '450px',
width: '450px',
},
{
data: 'sample data to be passed to "PageLoad" event of widget'
}); 

Here is the sample script to render widget in a fly-out. 

ZDK.Client.createFlyout('myFlyout', { 
animation_type: 4, 
height: '600px', 
width: '500px'
}
);
ZDK.Client.getFlyout('myFlyout').open({ api_name: 'Canvas_Widget', type: 'widget' });

For detailed guidance, check out our Client API documentation on Pop-up and Fly-out.

You can also check out the Kaizen #99 on Rendering Widgets using Client Script for a detailed guide based on a real-time use case. 

Using REST APIs from External Applications

The ZOHO.CRM.HTTP object enables you to make secure API calls directly from the Zoho CRM widget. It acts as a proxy, routing requests through Zoho servers, which eliminates the need for external applications to support CORS.

While this SDK is primarily used for integrating third-party services, it also supports Zoho CRM API calls. This provides you with greater flexibility to:
  • Customize header and parameter structures
  • Maintain a consistent calling pattern for both internal and external APIs within the widget.
Here is a basic syntax of the SDK:

ZOHO.CRM.HTTP.<method>({
  url: "<request-url>",
  headers: {
       // Request headers as Key-value pairs
    "Authorization": "Bearer <token>" // example
  },
  params: {
    // Request params as Key-value pairs

   "ids": "1234567890" // example
  },
  body: "<stringified JSON>", // Required for POST, PUT and PATCH
})
.then(function(response) {
  console.log("Response:", response);
});

Supported Methods
  • ZOHO.CRM.HTTP.get({ ... })
  • ZOHO.CRM.HTTP.post({ ... })
  • ZOHO.CRM.HTTP.put({ ... })
  • ZOHO.CRM.HTTP.patch({ ... })
  • ZOHO.CRM.HTTP.delete({ ... })
For more detail check out the HTTP method section of JS SDK help page.

Samples using Zoho CRM Contact Roles API

Let us explore a complete CRUD (Create, Read, Update, Delete) example using Zoho CRM’s Contact Roles API.

These structures have to be used within the JS function where you are executing your code logic. 

POST Contact Roles


// Prepare the API request
        var request = {
          url: "https://www.zohoapis.com/crm/v8/Contacts/roles",
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          },
          body: {
            "contact_roles": [
              {
                "name": "Sales Lead",
                "sequence_number": 1
              }
            ]
          }
        };
         // Make API call 
        ZOHO.CRM.HTTP.post(request).then(function(data) {
          console.log(data);
 })

GET Contact Roles


// Prepare the API request
var request = {
          url: "https://www.zohoapis.com/crm/v8/Contacts/roles",
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          }
        };
        // Make API call 
        ZOHO.CRM.HTTP.get(request)
          .then(function(response) {
 console.log(response);
})

UPDATE Contact Roles

// Prepare the API request
        var request = {
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          },
          body: {
            "contact_roles": [
              {
                "name": "Evaluator",
                "id": "5545974000000006871"
              }
            ]
          }
        };
        // Make API call 
        ZOHO.CRM.HTTP.put(request).then(function(data) {
          console.log(data);
 })

DELETE Contact Roles


// Prepare the API request
        var request = {
          params: {
            ids: "5545974000002617002"
          },
          headers: {
            Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4"
          }
        };
        // Make API call 
        ZOHO.CRM.HTTP.delete(request).then(function(data) {
          console.log(data);
 })

We hope you found this post useful. 

Let us know if you have any questions in the comments or drop us an email at support@zohocrm.com.

Cheers!

------------------------------------------------------------------------------------------------------------------------

Related Reading


------------------------------------------------------------------------------------------------------------------------

    • 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

    • Recent Topics

    • Kaizen #89 - Color Coding using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. Today let us see how you can apply color codes to the List and Detail Pages of Zoho CRM using Client Script. Need for color code in Zoho CRM When you mark things with different colors as a

    • Instant Sync of Zoho CRM Data?

      With how valuable Zoho Analytics is to actually creating data driven dashboards/reports, we are surprised that there is no instant or near instant sync between Zoho CRM and Zoho Analytics. Waiting 3 hours is okay for most of our reports, but there are

    • Is it possibly to directly set the tax amount on order instead of indirectly via tax rates?

      We own an eCommerce application and want to funnel submitted orders from that system into Zoho. We're already calculating tax in our application and just need a way to set it in Zoho. We tried to use Zoho's tax objects for tax by setting the rates to

    • Zoho account sign in with passkey

      Hello, I am trying to sign in using passkey, but the option doesn't show up in the web and is disabled in Oneauth on mobile, saying the admin has restricted the use. On the Admin page in Security MFA I can find no option for passkey. Help would be greatly

    • Rescheduled US meetups: Zoho Desk user meetups are coming to seven U.S. cities in October and November, 2025

      Hello to our Zoho Desk users in the United States, We're excited to share the revised dates for the upcoming Zoho User Groups happening across the US this summer. Our product experts are heading to seven cities throughout the country, and for the first

    • Checklists as templates

      Is it possible to save checklists as templates to reuse them in other tasks? Example: I have a web project. I maintain individual web URLs as tasks. Within the tasks the same checklist should be used again and again: - Page created in CMS - Properties

    • Send mass email using my secondary email

      Hello, When I send an email to just one person from Zoho CRM, a complete email editor appears, where I can choose which of my email addresses I want to use in the From field. When I send a mass email, there is not such option. I can only select the email

    • ZOHO TEAM INBOX Calendar Integration

      The Problem: Clients send meeting invitations to our TeamInbox address. TeamInbox receives these invites, but we cannot accept them. We do not use individual inboxes for transparency purposes. Ideal Solution: A way to accept calendar invites sent to our

    • Why Can't I add unicode emoji's to my signature?

      Why would Zoho Mail prevent me from adding unicode emojis to my email signature? Every time I try to save the signature, Zoho Mail erases the emoji and any nearby content. Every time I setup something with Zoho, I know I'm going to run into some incredibly

    • Unearned / Deferred Revenue Automatic Calculation for Subscriptions

      As a SaaS business, we have multiple active subscriptions with varying dates and amounts. Is there a way to have a monthly automatic calculation for all of them that debits or credits the unearned revenue and revenue accounts accordingly? Alternatively,

    • Zoho Desk Limit for Comma Separated Queries

      Hi, I have just discovered a limit that I believed is not mentioned in any of Zoho's documentations. My search query looks like so: "query: {"accountId":"786050000091629966,786050000163589273,786050000163589427,786050000162753705,786050000162112971,786050000161987643,786050000160752868,786050000167089504,786050000167089378,786050000167089024,786050000167070005,786050000166295256,786050000128153693,786050000110560021,786050000046594575,786050000039106461,786050000002225356,786050000076889093,786050000047895103,786050000043365354,786050000044765191,786050000041790249,786050000040359116,786050000037945198,786050000024605077,786050000000525015,786050000155333895,786050000157741437,786050000000718125,786050000011574353,","departmentId":"786050000042648070","status":"Finished","sortBy":"createdTime","customField2":"cf_completion_date:2025-01-28T03:00:00.000Z,2025-10-28T03:00:00.000Z","customField3":"cf_billed:false"}"

    • Module Name doesn't exist

      I am trying to create a module named Activity, with plural Activities, but I have an error that module name already exists. This module is doesn't exist, and I don't have a single field called Activity or Activities.

    • Zoho Desk iOS and Android app update: AI powered: Reply Assistance and Refine Messages on IM module.

      Hello everyone! We are excited to introduce new AI powered features on the IM module of the Zoho Desk app. Reply Assistance: Reply Assistance generates suggested responses for incoming chat messages, which you can directly insert into the conversation

    • Is it possible to embed Youtube shorts?

      Hi Zoho desk support, This is Ryan from Accuver America. While I'm trying to create a knowledge base article with embed video, I ran into this issue. "www.youtube.com refuse to connect" A little bit background is that because this video is recorded on

    • Split functionality - Admins need ability to do this

      Admins should be able to split an expense at any point of the process prior to approval. The split is very helpful for our account coding, but to have to go back to a user and ask them to split an invoice that they simply want paid is a bit of an in

    • Delegates - Access to approved reports

      We realized that delegates do not have access to reports after they are approved. Many users ask questions of their delegates about past expense reports and the delegates can't see this information. Please allow delegates see all expense report activity,

    • How to include total km for multiple trips in expense report.

      Whenever I create a mileage report it only shows the total dollar amount to be reimbursed. The mileage for each individual trip is included but I also need to see the total distance for all trips in a report? How do I do this?

    • I didn't receive my domain verification mail

      I didn't receive my domain verification mail 

    • Get logged in user ID in Deluge script

      Hello all, How do I get the id of the logged-in user in a deluge script? the "zoho.loginuserid" function actually returns the users email address or whatever the user id they use to login to zoho with and not the id of the user record, and given that

    • Item Details Field - New Barcode / Document option?

      Is this a new feature??? its in both books and inventory.

    • Shared Mailbox - Mark as read for all users

      Hi all, Maybe someone can help me out. At the moment we have a shared mailbox without streams. When a users reads an mail or marks it as read other users will not see this. How can we resolve this? We now archive the mails when read and followed up. However

    • Can I export to PDF in Zoho Learn

      I have seen help pages where export to pdf options are available but I do not see that option available from the application. I see that exprt is available in my free trial version but that is only to html pages. I need to be able to export my manuals

    • Zoho Sites "pages" management page

      I have 80 plus pages on zoho sites. When I go to the "pages" link to view and edit pages, They are not in any kind of order, so I spend lots of time searching for pages when I need to edit or create new. How can I change the view order of all my pages

    • Staff rules

      Hi! Do you people know what are the default staff rules when a new booking is created? We have two staff members in my team (me as the admin, and my employee). As we share the same services, I'm wondering how Zoho will pick the staff for new apointments.

    • Add Image Upload Field to Zoho Bookings Registration Form

      Hi, We would like to request the addition of an image upload field to the Zoho Bookings registration form. Currently, Zoho Bookings only supports text-based fields (e.g., Single Line, Multi-Line, Email, Checkbox, Dropdown, Radio Button, and Date), but

    • Merge Tags Output Incorrect Placeholder Text After CRM Sync

      Hi everyone, I’m experiencing an issue with merge tags in Zoho Campaigns after last sync of contacts and leads from Zoho CRM (days before everything worked perfectly). Here’s the situation (seems like a default configuration in Campaigns) : My leads have

    • UI Improvement - Ability to Collapse Flow

      The UI for Flow is generally pretty good. However, when multiple decision trees are used, the layout can get pretty convoluted and hard-to-follow (see one of my Flows below): In these cases, even the auto-arrange fails to make this something that a normal

    • Windows agent 2025_M02 release notes

      Agent Version: 111.0.3.300 Release date: 24 February, 2025 Various Major enhancements to improve overall performance and optimize the user experience. Squashed a few bugs to improve overall product quality.

    • Windows agent 2025_M01 release notes

      Agent Version: 111.0.3.299 Release date: 05 February, 2025 Major Enhancement: Live Monitor feature compatibility released. Major Enhancement: Updated Scaling for multi technician cases with Android and Web based viewers. Various other bug fixes and performance

    • how to record deferred revenue?

      Dear Zoho Team, We issue invoices relating to 12-month web hosting service. When we issue the invoice, we should record the entire amount of the invoice as DEFERRED REVENUE (ie. $10 x 12 mths = $120, balance sheet item). After the particular month of the hosting service, $10 of revenue has been earned and deferred revenue amount will be $110. We must keep adjusting the balance sheet and income statement over the course of the service until the company has fulfilled its obligation of services and

    • Narrative 13: Importing your data

      Behind the scenes of a successful ticketing system: BTS Series Narrative 13: Importing your data When importing data into an application, it is crucial to prevent data loss or duplication. These types of errors can hinder the development of a clean and

    • Blueprint Not Triggering When Lead Status Is Updated by Workflow (IndiaMART Integration)

      I have set up a blueprint that triggers when a lead’s status is “New Lead.” Our CRM is integrated with IndiaMART, and when leads are created from IndiaMART, their Lead Status is initially set to None. To handle this, I created a workflow that automatically

    • Update Subform in specific field(Status) without affecting other fields in Zoho CRM using Deluge?

      Scenario: PRODUCT Module(change name Plot) in any product status change From Available to Booked then on PROJECT Custom Module have Subform So, Subform name is Property Details now in that Subform 1 field is STATUS that update according to  product status

    • YouTube Live #2: Agreement Intelligence with Zoho Sign's eSign AI assistant

      Hi there, We're back again with our YouTube live series and this time, we'll take you through our holistic agreement intelligence powered signature workflows. Struggling to draft an agreement? Need help double-checking clauses and going through complicated

    • Can I Build a POS using ZOHO creator and integrate it with ZOHO Books?

      Hello,  I have a Zoho Books account and I was wondering if I can have a POS system that integrates with it. Primarily with Inventory, Customers and Payment and ofcourse Create invoices and credit notes.   So, would Zoho creator provide me with this solution?  Thank you, 

    • An important update for Zoho Cliq desktop users

      The latest version of the Zoho Cliq desktop app (v1.8.0) will no longer be supported on macOS 10.15 Catalina and earlier versions. This is because the framework we use (Electron) no longer supports some older macOS versions. If you’re using macOS 10.15

    • Zoho Projects - Visual improvement to parent and sub-task relationship

      Hi Projects Team, My feature request is to improve sub-task visibility. Please see screenshot below. I really think parent child relationships could be visually improved. Even if the first letter of the parent task was inline with other same level tasks

    • New Toolbar in Zoho Sheet

      We have revamped our toolbar design in this new version of Zoho Sheet. Below are some screenshots to help you get accustomed to this new interface. Click on the picture below to view the animated image in its original size. Scroll down this post to learn about the changes. Highlight of Changes: The previous format tab is now split into 2 tabs - Home and Format. The Home tab contains the commonly used functions and the Format tab holds formatting related options. Under the Home tab towards the far

    • Zoho inbuilt Telephony made a lot of issues!

      Hi there, I am a user that I am working with zoho inbuilt telephony around 1 month. Non of my colleagues are happy with this app! most of the time customer cannot hear my customer service team, customers say our voice is breaking. whenever Telephony support

    • Sending workflow notifications using popular chat services

      Hello everyone, We have introduced instant and scheduled notifications on some of the most popular chat platforms to facilitate easy collaboration, quick action, and wider reach. Workflow notifications can be sent to the following chat platforms: Zoho

    • Next Page