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 #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! 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.

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • Comment gérer vos colis et expéditions dans Zoho Inventory

      La logistique a évolué afin de permettre l'optimisation des commandes à travers la planification et l'exécution - de la réception de la commande à la livraison. Un système de gestion des colis présente plusieurs avantages. Livraison dans les délais prévus

    • Zoho Cliq 4.0: Zoho Cliq Android TV application

      Zoho Cliq is a powerful communication and collaboration platform that allows teams to stay connected and get work done from anywhere, at any time. One of the latest additions to its suite of tools is the Zoho Cliq android TV app, designed to make it easier

    • Zoho Bigin | Adding users to a deal in bigin

      Hi, One of our ongoing POCs required adding users to a deal in Bigin. I found that we cannot add individuals using custom fields when we have an Express license. Is there any way to do it?

    • How to Send Automatic Warning Email After 3 Late Arrivals in Zoho People?

      I’m looking to set up an automation in Zoho People where a warning message is automatically sent to employees who have 3 or more late arrivals within a specific time period (like the past 30 days). Here’s what I’m trying to achieve: Monitor employee check-in

    • Is it possible to set create deal checked by default when converting a lead?

      In our company whenever a lead is converted we make a deal. It is a pain to have to check the box every time. I would prefer if it was just a default behavior and the box wasn't even there. But it would be fine if the box could be checked by default.

    • Is it possible to use filters in zohosite.

      Is it possible to use filters in zohosite. Example: we uploaded video, audio, pdf in one page. If I want to see only the video. Then, I will select the video which is shown in the filters.

    • Poor Search Results on Zoho CRM

      The search on Zoho CRM is quite poor. Salesforce has now published a new search, when will get this on Zoho? https://help.salesforce.com/s/articleView?id=data.c360_a_hybridsearch_index.htm&type=5

    • Workdrive 5.0 / API Documentation Workflows

      Hi Zoho, When will the API documentation of the workflows be published? We are interested in using it to trigger manual workflows from an external application. Greetings, Justin

    • Getting error while while deleting from Activities Object

      I am trying hit this endpoint: - DELETE https://www.zohoapis.in/crm/v2.1/Activities?ids=725820000001141076%2C725820000001143056 HTTP/1.1 But getting the below error: - {"code":"INVALID_REQUEST_METHOD","details":{},"message":"The http request method type

    • Unveiling Zoho CRM's New User Interface - The NextGen UI

      Hello Everyone, Last Wednesday, May 14th,2025, we announced the public release of Zoho CRM For Everyone, our most significant update yet. This release brings a modernized CRM experience with a redesigned user interface, new capabilities for cross-functional

    • Product Updates in Zoho Workplace applications | April 2025

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this April. Zoho Mail Filters for incoming emails in Shared Mailbox Simplify the management of incoming emails in your Shared

    • Deluge script for purchase receive

      Trying to create purchase receives.... receive.put("purchaseorder_id",poId); // purchase order associated ... receive.put("line_items",itemList); result = zoho.books.createRecord("purchasereceives", orgId, receive); info result;...... {"code":9,"message":"Purchase

    • Renew an expired subscription

      Hey Zoho officer, My subscription was expired yesterday, but I did not notice until just now. How can I renew the subscription even it is expired? The website is really important for our publicity. So I hope I can still review the domain and website. Thanks!

    • How to normalize CRM module when integrating with Survey?

      This question is about the problem with many-to-many relationships and Survey. One of the things our organization does is track people in our program and their jobs. We get new information from the people three times annually through Zoho Surveys. Survey

    • ZOHO CRM reverting contacts details

      Hi! Anyone else had a problem where +- at 20:00 NZT email addresses and company details reverted back to the ones that was previous changed? We had about +- 30 odd notification come through last night and had to go and change all back manually.

    • Announcing Zoho Community Developer Bootcamps in India – Extensions

      Hey everyone! We're back with another line-up of Zoho Community Developer Bootcamps in India! Following the success of the first leg of bootcamps on Extensions, we're now ready with the second leg. These bootcamps focus on empowering developers of all

    • ZOHO Sheet View for Activities

      Hello I am beginning to look at importing previous events into activities as utilizing events as timeslips for engagements, we have added fields such as duration, billable, etc. However to use Events on a regular basis would require the ability to use

    • Invalid URL error when embedded sending url into iframe for my website when using in another region

      Hi team, My site is currently working on integrating your signature feature as part of the system functionality, it's working great but recently there's been a problem like this: After successfully creating the document, i will embed a sending url into

    • Custom Serial numbers in Inventory tied to customers

      Hello, We have both software and hardware serial numbers that we need to track for active customers in the field. We do not know the serial numbers for the software until the customer buys it as its not a stock item but something we order and deploy for

    • Issue with inventory and shopify

      Hello! We're having some issues with Inventory not synchronizing all our products with our shopify store. We've tried multiple times to synchronize them. We have multiple locations and it seems to just be getting a part of the inventory. When we sell

    • Add an option to disable ZIA suggestions

      Currently, ZIA in Zoho Inventory automatically provides suggestions, such as sending order confirmation emails. However, there is no way to disable this feature. In our case, orders are automatically created by customers, and we’ve built a custom workflow

    • Automatic Pick LIst

      The pick should have the feature to send you to the FIFO location and tell you from wich bin you should get the product. Depending on FIFO LIFO or what we choose

    • Picker users

      Hi FOr bin location we are starting to use Android app. The users are allowed to chance the asignee, but they are the Asigneed persons. We should have the avility to choose or setup these fields.

    • Zoho Inventory MobileApp compatible with barcode scanners such as Zebra

      Hi, Although the Zoho Inventory App is working with a scanner mode taken directly through the cell phone which I do not consider it as efficient, I would like to know when are you planning an update on the app so it can be compatible with bar code scanners

    • More Payment Gateways For South Africa

      Hello, please add more payment gateways that cater for South Africa to the Zoho ecosystem. Yoco - pay now with card (integrated but there is a problem) Others to consider Payflex.co.za - pay now with card or pay later using credit from payflex Float.co.za

    • Sync Zoho Docs and Google Drive

      Sync Zoho Docs and Google Drive -  how can I do it?

    • Is it possible to link a CRM field or Zoho User to a ticket auto assign function.

      Dear Support, I have a unique situation at our company. So I know it might be able to link a ticket to the client account owner from the CRM. However, is it also possible to link an email field, username or other field in the CRM to a new ticket created

    • Drill Down - Pivot Table

      Is there anyway to have drill down options in pivot tables like in the chart function?

    • Allow Zoho form to send to one of our ogranizations groups

      All emails from the form submission are being held for moderation. I have permissions set to organization members, and I think I have the forms setup in our DMARC

    • Kanban view - which modules support this view?

      Recently (a few days ago), we started exploring Zoho Recruit and like to use Kanban view to visualise the data in different modules. I just found out from emailing Zoho Support that they need to enable Kanban view for different modules (why?). Which modules

    • Email notification for followers

      Is there a way to enable email notification for followers of a support ticket? ie: Ticket #123 is owned by Agent#1, Agent#2 adds themselves as a follower. Whenever ticket #123 receives an email from the customer, Agent#1 receives an email. Agent#2 would

    • Prevent duplicate with custom fields?

      I was wondering something about custom field/custom modules in Zoho Desk. For some reason you can make a custom field mandatory but not unique? For example, if I create a custom module to manage equipment and renewal and make a field serial number no

    • Remove the dot menu and + sign on sub form

      If I don't want the user to be able to add more entries on a subform, am I able to remove the dot menu and the + sign?

    • Writing Checks to Employees for Reimbursable Expenses

      I couldn't find a way to write a check through books or expense to an employee for reimbursable expenses. The expense created an entry in the system with a debit (expense) credit (liability). I entered a bill and used the liability account so it would

    • Peppol Malaysia API

      Hi Zoho Books, my country Malaysia will going to implement "Peppol" (E-Invoicing), starting 1 Jul 2025 for all businesses. The government intends to provide API for accounting app. The workflow involves creating an invoice from accounting app, triggers

    • Error "The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required"

      Hi, I'm trying to send an email via the SMTP server using C# code but getting the following error: "The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required" I know the username

    • Free webinar! The Zoho Sign Masterclass: The basics, latest features, and mobile apps

      Hi, Are you new to Zoho Sign or looking to brush up on its capabilities? This webinar will help you master Zoho Sign from the ground up, covering everything from the basics to the latest features. Whether you're an individual managing personal documents,

    • Home and Reports Tabs Not Loading

      Hello, I've been trying to view the home and report tabs since yesterday but the same issue persists. While the Home view appears, the data will not load (see screenshot). The Report view does not load at all. Clicking the tab elicits no response; the

    • Introducing the Zoho CRM Lead Magnet plugin for Wordpress

      In this digital era, websites are the most important source of leads. That means your CRM system should be well integrated with your website to contextually capture each and every visitor to turn them into a lead. Introducing the Zoho CRM Lead Magnet plugin for WordPress.  The plugin lets you to: Create webforms using Zoho CRM forms/ Contact form 7 plugin Embed them in your website hosted using Wordpress Automatically capture leads into Zoho CRM with zero attenuation. Not only is the integration

    • Team Modules in Zoho CRM: Empower Every Team, Break Silos and Boost Collaboration

      Hello Everyone, The ultimate goal of every business is to achieve customer delight—and achieving customer delight cannot happen with the effort of a single person or team. At Zoho CRM, we believe that it’s a shared mission that spans across your entire

    • Next Page