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

    • Announcing Trident desktop app for Zoho Mail & Zoho Workplace users

      Hello Community, I hope you are doing well and staying safe. As you know, our Mail & workplace teams have been constantly working on adding more value to our offerings to ensure you and your organization continue enjoying your Zoho experience. As part

    • Announcing new features in Trident for Windows (v.1.25.8.0)

      Hello Community, Trident for Windows is here with exciting new features to elevate your email communication and enhance productivity. Let’s dive into what’s new! Accessing delegated mailboxes. Mailboxes delegated from the Zoho Mail web app can now be

    • Images in Zoho chat

      When I add an image to my chat, it just doesn't work, for the other participants it shows a blank image, like it's missing.

    • Custom Function to Format Phone / Mobile numbers in Australian Standard format

      So I got sick of phone numbers being formatted incorrectly and Zoho not doing anything to standardise phone numbers to meet E.164 formats. So I went and coded my own function to fix this. And figured I'd share with the community This is specifically for

    • Download pricebook products & details - not just pricebook creation date & name

      We're looking to download a copy of a pricebook and its associated products & book prices (as we have several offices in different countries selling the same products), however, when using the export feature under Data administration it only gives me

    • Output product SKU in ecommerce

      Hi how do I display the product SKU on the page can I place the SKU variable on the layout to output the SKU value.

    • [Live Webinar] New in Zoho WorkDrive: AI enhancements, Data Loss Prevention, Version Controls, and more

      Hello everyone, We're excited to bring you another round of powerful updates in Zoho WorkDrive! Join us on May 15 for an exclusive live webinar where we’ll unveil the latest features designed to enhance your team’s productivity, collaboration, and data

    • UK MTD ITSA

      UK Making Tax Digital for Income Tax I have had notice this is to apply from April 2026. What is Zoho doing about this? I will need to start planning to implement this in the next months so need an update as to what I will and will not be able to do in

    • Support for Digital Goods/Products and password protection

      Hi! Some companies sell product licenses or digital products directly, these licenses are unique for each sale that later allow you to download a ZIP file with a passwod-key that can uses the same license code (for example, a market report) or, failing that, is used in the product such as an authentication in the software or a request. It would also be interesting those who sell in subscription mode and can be integrated with Zoho Subscription. Thank you

    • Share forms with your team to collaborate better

      Collaborating and communicating as a team gets things done faster and increases productivity. That's why we're excited to announce our form collaboration feature, where you can share your forms privately with select users and co-edit them together.  What's

    • Streamlining customer inquiries with Email-In approvals

      Greetings! Email-In has transformed the way Bigin users manage customer inquiries by seamlessly converting emails into pipeline records. By creating email aliases for your Bigin pipelines, any email sent to these aliases is automatically turned into a

    • Zoho People API - all active employees' emails

      Hello, how can i get all active employees' emails in Zoho People using api?

    • Notice: Revise OpenAI model permissions to continue Using Zia Writing Assistant

      Dear Users, We’re upgrading the Zia Writing Assistant to use the GPT-4o-mini model for improved performance and accuracy. To continue using the Writing Assistant, please revise your OpenAI model settings by May 27, 2025. After this date, older models

    • Managing manual users

      Why are there two seemingly-identical lines in the manual user management? How can someone in the space be both Disabled and Admin? What is the difference between the two groups?

    • We need customizable sub-form layouts

      Currently, we can arrange sub-form fields only in a single row. The single row layout means salespeople must horizontally scroll to uncover information. As a result, salespeople cannot see all of the relevant information simultaneously.  The administrator

    • How can i connect the zoho people to n8n.io

      Hello, I hope you are doing well Iam working on an automation in which I will be fetching the data from Zoho People of my employees to arrange, modify, and upload on Google Sheets to maintain their attendance data. I tried through the Zoho Developer Console

    • Staff Tracking in

      Hi , I would like to see what activity my staff does over Zoho CRM and over Zoho Mail . I need to know which deals in CRM haven't been touched or had an activity on by a particular staff member . Basically need to establish what work.gets done by WFH

    • How do you make sure the same person doesn't answer the survey twice?

      Preventing multiple responses to a survey is really important because letting people answer more than once can seriously ruin the data. It skews results, making it seem like certain opinions are more popular than they are. This can lead to misleading

    • Support is dismal!

      Decided to use Zoho Books and Inventory for our company; went from Trial versions to paid subscriptions last week. Am having issues integrating these products, and my experience with Zoho Support for both products has been abysmal. 3 chats with Inventory

    • Group Emails

      I have synced Zoho CRM to Campaigns but there are certain email not synced. showing it is Group Emails, but this email ids belongs to different individuals. please provide a solution as i nedd to sync the same.

    • Is there a way to force a page refresh after changing a Subform via Workflow / Function?

      I have a workflow which triggers a function, and in this function i am changing the values of a certain subform. The changed are only visibile when i manually refresh the page and this is a no-no for my use-case. When other workflows, that change certain

    • Enable Full Theme Editor for Help Center (Disable Express Builder)

      Dear Zoho Support, We are currently using the Elegant theme in Zoho Desk Help Center, but we only have access to the limited Express Builder. We would like to switch to the full Theme Editor to be able to: Access Language Strings Edit all pages (HTML/CSS/JS)

    • Zoho Desk - account and contact lookup by phone

      Hi team, Does Zoho Desk allow to lookup Accounts and Contacts by phone or not? I am using this endpoint- GET https://desk.zoho.eu/api/v1/accounts/search?phone=987-654-3210 But I am getting this error- { "errorCode": "UNPROCESSABLE_ENTITY", "message":

    • Way to export / import a Flow between different accounts?

      Hi, I developped some flows in my account and see that for some other organisation I'm working with, they would need the same or similar flows. Is there a way for me to export one flow from one account and import it to another ? This would be handy, as

    • Setting admin only field values in widget

      Hello If I'm using a Widget addRecord function invoked by a user input (the user has write permission not developer) can he set values to a field that is set to be visible to Admin only?

    • Option to Delete Chats in IM

      Currently, there is no option to delete any chats in IM, regardless of their source.

    • Stop completed task lists from disappearing?

      Is there any way to stop projects from making tasks lists disappear when all the tasks in the list are completed? That's one of those little things where we're constantly fighting the product. For instance we have some projects which are ongoing - no start and end date. We use Kanban view to show the various task lists. We don't want the kanban list to disappear every time the items on it happen to be closed out. Thanks

    • Adding Coloured Picklist Based On Email Body Text

      Hey All, So i am having this problem, Im currently trying to automate a coloured picklist so that when the body of an email contains a specific word it will assign one of my coloured picklist i have created automatically, But it appears this only works

    • Zoho Desk is extremely slow

      Hi Team, We are facing extreme latency issue with Zoho Desk. It is currently unusable. I have submitted a ticket already could you please look into this asap. Regards, Priya Sharna

    • Zoho Desk is extremeley Slow

      Hi, Zoho Desk seems to be extremely slow for the last 15 mins for everyone in our team (5 people). https://status.zohocloud.ca/ didn't show any status in this regard. Would it be possible to have an idea what is happening and when this should be resolved?

    • Help Centre - Widget or Tab for Customer Downloads

      USE CASE: We are a software vendor, using Zoho Desk (as part of a Zoho One subscription) to help mange support issues from our customer base. Customers can log tickets via email or Help Centre portal. QUESTION: I need to provide the capability for our

    • Markdown for Desk?

      Hi, my company wants to use markdown for formatting text in Desk (in all modules there, especially Tickets and Helpcenter). Zoho already offers use of markdown in several products (see https://help.zoho.com/portal/en/kb/backstage/microsite-guide/formatting-with-markdown/articles/formatting-with-markdo)

    • Limits on workflow never disclosed, not documents and now being applied. I feel scammed and there is no reply for support.

      Hello everyone, I’m facing a critical issue with Zoho Recruit and would appreciate any insights from fellow users or someone from Zoho. For months, I’ve been receiving daily emails stating that I have reached the maximum workflow custom functions limit.

    • report on lead status history in zoho crm

      I have enabled the lead status history. I want to understand how many days a lead is waiting in which stage and the number of leads vs. stage history, like 0 days, 1-4 days, 5 days above, and 10 days above.

    • Cannot send a Campaign. No Send or Proceed button

      I have built a Campaign. I had to drop Leads and only use Contacts because only one group can sync. But now I do not see any errors but I do not see anyway to proceed with sending the campaign?

    • Accounts module not displaying in Campaigns sync

      When syncing CRM to Campaigns, I can only sync Leads and Contacts. Accounts module is setup and not sure why I can't select it. I won't be able to make segments for all our email campaigns. What is the resolution?

    • Missing Date Field Type Blocking VAT Calculations in Custom Zoho CRM Module

      I'm working on a custom VAT calculator within Zoho CRM where I need to store the purchase date of a product and calculate VAT based on that date, since VAT rates can vary over time. However, while creating custom fields, the only available data type is

    • Auto End Chats After Customer Inactivity

      Hello Everyone, I may be missing something, but is there a way to auto-end chats when a customer has been inactive for an amount of time? I have several operators (we use a shared set of account with schedules for people... that's another story) but at

    • Real-Time Screen Annotation During Zoho Cliq Screen Sharing

      Hi Zoho Support Team, Hope you're doing well. We’d like to request the addition of real-time screen annotation tools during screen sharing sessions in Zoho Cliq video calls. 🔍 What We're Looking For: The ability for the presenter—and optionally, other

    • Simplify ticket replies with intelligent writing and content analysis tools

      Introducing a smarter, faster way to handle ticket responses with generative AI-powered capabilities, now available in the ticket detail view. These enhancements are designed to reduce agent effort, improve clarity, and elevate the overall support experience.

    • Next Page