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

    • How do I make a recurring subtask?

      I have a user that has a monthly task with several subtasks. I can set the main task to monthly recurrence but I've been unable deter how to get the subtasks to transfer with the recurring task. Should I setup tasks with dependency instead?

    • Workflow Failure - Notifications

      Good afternoon, I have just experienced an error whereby a Workflow failed, for a reason currently unknown. The problem is that one of my users had to flag this manually (thankfully he's very thorough) and this otherwise would have flown under the radar.

    • Introducing Linkthread by Zoho Social — our new link in bio tool

      Hey everyone, We hope you're all doing amazing. We always love bringing features and tools to make your social media marketing journey easier, and today, we've got a brand new tool that we'd like to introduce to you. We know how important it is to make

    • Determine agent work hours and break timings with Desk's agent availability report

      Hello everyone, We are excited to tell you about updates to the agent availability report, designed to enhance efficiency in tracking agents’ activities. What is the agent availability report? The agent availability report helps managers monitor team

    • Planned, actual and forecast hours

      Hi there, I'm attempting to use Zoho to plan projects and time, but it's so confusing. I have two questions: Why, in the screen shot below, is my planned hours saying 8? I have assigned 8 work hours to the task, and I have logged 4 hours of actuals. I

    • Add Comment/Notes to Each Action in Zoho Flow for Internal Documentation

      It would be great if Zoho Flow could introduce a field to every action where we can make an internal note about why we are doing something with a specific action. This is especially helpful if more than one person from the organization handles automation

    • Kaizen #188 - Building a Timer and Worklog Widget (Part 2)

      Welcome back, Tech Wizards! In Part 1, we developed a Timer Widget that logs active work sessions into the Timer Entries module. Now, let's enhance this functionality by transferring these entries into the Work Log subform within the Cases module using

    • How to use Quoted/Invoiced_Items custom fields APIs in Deluge ?

      Hi, I'm trying to do a function to create an invoice from my existing quote, but I can't use some datas in the mandatory Quoted_Items Subform as it's from custom fields I've created and it's available only using APIs V2.1. So I tried what I found in the

    • Can Not Categorize Sales vs Services for "On The Fly" Line Items

      We can not categorize Sales (Goods) and Services with Zoho Books for "on the fly" line items when creating a transaction (quote or invoice). Zoho Books does not provide the basic ability to separate product sales and services for "on the fly" line items

    • Can a Custom Button (custom action) ask for user input?

      We have already a few buttons adding the actual date to some fields on Stages changes, now we need to ask the user for a Date and add it to a field. Can it be done using a button? or any other way?

    • Canvas Flex Box containers should not require a width/height.

      Flexbox containers are often used as organizational concepts, to ease re-flow on mobile etc. - I cannot use % for flexbox W or H - I cannot omit W or H This means that the content cannot dictate, and a Flexbox container cannot be used merely as an organizational

    • Is is available to access notes from mobile app?

      As you know we have a notes section in the mail system at the website but can I access the Notes from the mobile app? Thanks in advance

    • Outlook sync (365) Restricting which contacts signals are created for & seeing my sales ppls email activity

      Hi All, As per the subject I want to restrict which contacts the signals notifications are activated for, and indeed which contacts email are tracked in the crm - my boss does not want his sensitive emails to end up in there but he does want to track

    • [Free Webinar] Learning Table Series - Zoho Creator for AI-Enhanced Property Management

      Hello Everyone! We’re excited to invite you to another edition of Learning Table Series, where we showcase how Zoho Creator empowers industries with innovative and automated solutions. About Learning Table Series Learning Table Series is a free, 45-60

    • Convert Prospect Back to a Lead in Zoho CRM

      Could anybody help me convert a prospect back into a lead? There does not seem to be any kind of "reverse" button. Thanks.

    • Function #35: Close all tasks associated with a lead and create a new task.

      Welcome back everyone! Last week, we learnt how to close all tasks of a deal depending upon the deal stage. This week, let's look at a custom function that lets you close all of the tasks associated with a lead while simultaneously creating a new task, like when you need to halt all progress towards a lead while the lead is not available at the moment but create a reminder task. Business scenario: The success of a company, in one way or another, is determined by the leads it gets. Each lead is just

    • Ticket closed, remove reopen ticket button

      Hi Zoho team, Is there a way to remove the Reopen ticket button when ticket is closed?

    • Request to View List of File and Folder Links in Zoho WorkDrive

      Hello, I need to check a list of links for the files and folders stored in Zoho WorkDrive. Although it is possible to check them one by one, I would like to know if there is a way to view them all at once in a list format. Could you please advise on how

    • Autotranslate only have 2 of my 3 languages

      My HelpCenter has three languages, as you can see below: I chose to use Google Translate for my automatic translations: I can only see 2 languages: How do I add the Portuguese here? Is this a bug? Thank you.

    • Como se guardan las imagenes que se cargan desde el Zoho Forms a Drive o Workdrive

      ¿Cómo puedo usar Zoho Flow para tomar un archivo subido en un formulario de Zoho Forms, extraer su ID de la URL y luego copiar ese archivo a una carpeta específica en Zoho WorkDrive de manera automatizada?

    • Record Summary Template Improvements

      Hi, Just a few suggestions to improve the usage of record summary templates. Some of them have been asked for before. Dynamic renaming of templates when sent as pdf attachment in sendmail task, also on export to pdf. Option for Page numbering. Option to add current date (${zoho.currentdate}) Option to repeat header and footer on each page. Subforms, more options in "Related Field Properties" for cell borders.(Currently only turns full border on or off)  Choose template to use as record summary from

    • In Zoho people Check in report the date want come as Colum how i can achive that in zoho people or analytics

      In Zoho people Check in report the date want come as Colum. How i can achive that in zoho people or analytics

    • How to customize member portal invite

      Hello, when I sent an invite to users to join member portal, here what they get below. Is there a template to edit or way to change how this mail being sent? I checked /zstore/settings/notification but unfortunately there is no invite mail template here.

    • Publish directly to production

      Hello! I am wondering if there is a way to publish changes directly to the production version of an application?

    • Infinite phone verification loop

      Hi, I'm trying to test your Mail service, but I am unable to due to a problem with the phone verification. I've correctly received the verification code and verified my phone number, but whenever trying to access the Mail portal in Zoho I am presented

    • how to do bulk delete for Zoho Desk tickets?

      how to do bulk delete for Zoho Desk tickets? The old UI has this function and now i cannot find it on the new UI. 

    • Workflows being applied and the Large unwanted popup

      When a workflow is being applied do to an action, then the Agent is left with a large Window asking if they would like the see the changes this workflow did. Is there any way to disable this prompt from appearing?

    • Urgent: Amazon Login Block Issue via Zoho – Suspected Integration Problem

      We’re currently experiencing a critical issue related to our Amazon login through Zoho. Although the client can still access the Amazon Seller Central account directly, our team is being blocked when trying to log in via Zoho. The account itself is not

    • Delete a lot of entries...

      Hi!, I synchronized a lot of accounts from my CRM and now I would like to delete them all. How to delete more than 50 accounts at once? Thx

    • Automatically create support tickets on a recurring basis

      As mentioned in this post, the idea of a recurring ticket is pretty valid. From time to time, we have to create repetitive tickets (like windows update tasks, restore simulation of backups, check firewall rules for unused entries, and so on). I guess

    • Update Zoho Sign Mobile View?

      Hello, My clients have have difficulty seeing the Zoho Sign documents while viewing on their mobile devices. The font is small and it is difficult for them to navigate. My use cases for using Zoho Sign are almost exclusively completed on a mobile device

    • AI secretary

      In our company, Claude is the secretary and creates inquiries and schedules from Gmail. You no longer have to enter them yourself. The secret is that we created an MCP server that connects to CRM. https://x.com/Mac_nishio/status/1917954562566328694

    • CRM Account Owner to be Assigned as Customer Owner

      We have enabled books and CRM integration The Account Owner in CRM, should be assigned as the Customer Owner in Books, but this is not the case You have go to books and manually assign the Customer Owner again If you change the Account Owner in CRM, again

    • We are unable to process your request at the moment. Kindly contact our support team at support.me@zohobooks.com for further assistance.

      if i need post any invoice i show this We are unable to process your request at the moment. Kindly contact our support team at support.me@zohobooks.com for further assistance.

    • Zoho Books Contact Creation through API.

      I tried creating a contact using API with following payload. Sun Apr 6 08:28:03 2025 [186723][1][FATAL] Array ( [10002] => https://www.zohoapis.com/books/v3/contacts?organization_id=763906850 [19913] => 1 [10102] => [68] => 10 [13] => 30 [84] => 2 [10036]

    • How Would I get data from a network drive to be feed into creator program.

      What's the easiest and cleanest solution for this?

    • Fetching a missing Folder, now creates it

      Hello, I'm using Zoho Flow to fetch a folder within a Team Folder. If the folder is missing (folder ID is null), I trigger a Create Folder. Now in 2025, when I fetch a missing folder, a folder is created right away with the "name + full date" and a Folder

    • Company Name Update and Chatbot Customization

      We would like to request your assistance with the following updates to our Zoho system: Company Name Change: we have integrated chatbot on our website. Please help to change our company name from BVK Infrasoft to BVK Group on chatbot the entire system,

    • How does BadgeUp Work?

      When creating the badges, where do you all get those printed? especially if you use the plastic type badges. Does Zoho send the files out or do some kind of integration with a 3rd party badge printer? I'm on a ZohoOne subscription and didn't want to use my one license for a test event to see how this worked. Thanks for any insight Randall

    • Custom Script for Validation Rules

      In the Validation Rules I would like to have custom functions, we can do that in Zoho CRM and its really useful There are some custom fields in Sales Orders and Purchase Order Modules We are using Zoho Books With our internal apps, and we need to put

    • Next Page