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


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

    • Recent Topics

    • Inserting the current date / time

      I'd like to use Zoho Notebook as a log - so it would be great to be able to insert the current date and time at the beginning (or end) of each my log/journal entries - or wherever I want. Something simple, like pressing a button/icon to insert it wherever my text cursor is. It could be formatted like "Mon Dec 11, 2017 - 11:43p". 

    • Migrate data from old to new account

      Hy, Have one Old Zoho Notebook Account with Data , want to migrate that whole Data to New Zoho Notebook Account which is in Zoho One . Is that possible ? If Yes then how?

    • Campaign editor overrides href value

      I've been trying to insert a deep link in an email campaign so recipients can directly open a native app on their device. My deep link looks something like "myapp://". The options to insert links in the campaign editor are limited to strict urls, emails,

    • how to add subform over sigma in the CRM

      my new module don't have any subform available any way to add this from sigma or from the crm

    • Bug Report and Suggestions for Improvement in Zoho Applications

      Hi Zoho Team, I’d like to report a few bugs and improvement suggestions I’ve noticed while using Zoho products: Zoho Cliq Video Call: The camera sometimes turns off automatically during video calls. This seems to be a bug — please check and fix it. Zoho

    • Super Admin Logging in as another User

      How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Moderation Update (8th Aug 2025): We are working

    • 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

    • Zoho Desk Android app update: Filter enhancement, Save Filters

      Hello everyone! We have now enhanced the filter section on the ticket listing screen of Zoho Desk Android app as it is on the web(desk.zoho.com). Also, we have introduced an option to save filters for tickets on the mobile app. You can easily apply, rename,

    • Very long loading times | bad performance [ZOHO DC: EU]

      Hello there, we have recently noticed that the loading times have become extremely long when retrieving tickets and ticket details. For example, I open any ticket and get the following view. The subject and standard information (ticket owner, status etc.)

    • Zia Profile Summary now supports six languages and responds faster

      After numerous customer requests, we’ve expanded Zia Profile Summary to do more than just summarize resumes quickly. It can now summarize them in six different languages and deliver results even faster. What’s New 1. Extended language support Zia can

    • Introducing Zoho Show Android 3.0

      Good ideas need the right space to grow. They deserve tools that move as fast as your thoughts and make creating feel effortless. And that is why we are bringing you Zoho Show Android 3.0! From a brand-new look and smoother navigation to improved collaboration

    • Properly Capture Dropdowns & Hover Elements When Recording a Window/Tab

      Hi Zoho WorkDrive Team, Hope you are doing great. We encountered a limitation when recording a selected window or browser tab: Certain UI elements, such as dropdown lists, hover menus, and overlays, are not captured unless we record the entire screen.

    • Peppol integration zoho invoicefu

      Hi, Belgium will require Peppol invoicing as of 2026. I found that this is being prepared for Zoho books, to be released in Sep 2025. Will Zoho Invoice get this functionality too? I like the Invoice app for my part-time side business as bike mechanic

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • Allow Recording Only a Selected Portion of the Screen

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request a more flexible recording option in Zoho WorkDrive. At the moment, we can record either the entire screen or a specific window/tab — but not a custom selected portion of the screen

    • Restricting Calendar View to Working Hours

      Hi: I'm trying to implement a calendar which displays all of my customer appointments.  Currently, the calendar shows all 24 hours of the day.  Is there a way to restrict the hours to simply the times my business is open? Thanks!

    • Add Camera Background Blur During Recording

      Hi Zoho WorkDrive Team, Hope everything is well. We would like to request an enhancement to the video recording feature in Zoho WorkDrive. Currently, the camera preview displayed during a recording does not support background blur. This is an essential

    • Amazon FBA integration - Handle invoice reconciliation under different GSTINs,

      Dear Zoho Community, Thank you for the clarification regarding the Amazon FBA integration, default warehouse, and GSTIN mapping in Zoho Inventory. I understand that Zoho currently supports only one warehouse for Amazon FBA, and that all FBA orders are

    • Whatsapp Integration questions

      Hi Questions: 1. Whatsapp messages are not reaching our CRM, is there a delay? 2. Is there any way to create a whatsapp catalog on a number that is integrated with ZOHO? 3. How do I configure my profile picture on a number that is integrated with ZO

    • Allow Font Size 11 in Editors...

      That is basic functionality...

    • link mail.zoho.com/UnblockMe to unblock

      Could you please unblock my account heloisa.bomfim@expansaodenegocios.com

    • Unblocked me

      Please can you help unblocked my account thanks materiauxjcbrunet2000@zohomail.com

    • Integrating External Portal Tickets Into Zoho Desk

      A B2B travel company has a customer portal where clients can raise and submit tickets related to their bookings. These tickets need to be handled and managed in the backend through Zoho Desk. Ticket updates and replies from Zoho Desk should also be visible

    • Make Camera Overlay & Recording Controls Visible in All Screen-Sharing Options

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an improvement to the screen-recording experience in Zoho WorkDrive. Current Limitation: At the moment the recording controls are visible only inside the Zoho WorkDrive tab. When

    • Send WhatsApp voice messages from Bigin

      Greetings, I hope all of you are doing well. We're happy to announce this enhancement we've made to Bigin. Bigin's WhatsApp integration now supports audio messages, so you can record and send voice messages. This makes it easier to handle customer questions

    • CUSTOM FUNCTION GIVE ERROR #EVAL!

      CUSTEM FUNCTION CREATE KYA ZOHOSHEET ME US FUNCTION KO USE KIYA LEKIN DATA TO SAHI HAI LAKIN DATA SHEET ME NAHI LAG LAHA HAI KRUPYA SOLVE KARE MY CODE IS float ADDTWO_TWO(float NO1, float NO2) { ADD = NO1 + NO2; return ADD; }

    • Samsung Keyboard Issues with Notebook

      Dear Users, We're sorry to inform you that some of our users are experiencing certain issues like scrolling, delay/lag, cursor placement especially within the text notes. This occurs mainly due to Samsung Keyboard compatibility with Android 13 and some

    • Zoho Books | Product updates | October 2025

      Hello users, We’ve rolled out new features and enhancements in Zoho Books. From iOS 26 updates to viewing reports as charts, explore the updates designed to enhance your bookkeeping experience. Zoho Books Updates for Apple Devices At WWDC 2025, Apple

    • Zoho Developer Community Hackathon 2025 is LIVE!

      Hey developers! It’s that time of the year again — the Zoho Developer Community Hackathon 2025 is officially open for registrations! If you’ve been waiting for a chance to stretch your skills, try something new, or finally bring that idea to life, this

    • Zoho Books | Product updates | September 2025

      Hello users, We’ve rolled out new features and enhancements in Zoho Books. From PayNow payment method to applying journal credits to invoices and bills in other locations, explore the updates designed to enhance your bookkeeping experience. Integrate

    • Contact data removes Account data when creating a quote

      Hi, Our customer has address fields in their quote layout which should be the address of the Account. They prefill the information, adding the account name - the address data is populated as per what is in the account - great. However when they then add

    • filter broke my data

      I uploaded a file recently from Sheets and it has top 2 rows frozen, with table headers in second row and each one is filterable. somehow my first 2 columns became unfiltered and no matter what I do I cannot reapply the filter?? also didn't realize they

    • Zoho Workdrive for Office, "vsto runtime not found"

      Hi all, I have been trying to get ZohoWorkdrive_MS-addin_1.4.exe installed, but I keep getting the error "VSTO Runtime Not Found!" - even though I have installed it ... Anyone else hear had problems with the MS addin?  FYI, I am using O365 on A Dell laptop running Win 10 Home - fully patched and up-to-date.  I have tried compatibility modes and running explicitly as Administrator - the usual steps. Any advice would be appreciated.

    • Add "Fetch Composite Item" Action for Inventory

      I want to make a Flow that uses information returned in the GET call for Composite Items, and it's not currently available in Zoho Flow. Please consider adding this functionality.

    • Inactive Items - Make Less Prominent by Default

      Currently, when one marks an Item as "Inactive", it really doesn't do much of anything to hide it or get it out of the way. Search and reporting within Finance should, by default, hide inactive Items from standard reports, searches, etc. If one specifically

    • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

      I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the

    • Can no longer export as pdf

      In NOTEBOOK I am no longer able to export notes to pdfs as I used to be able to. When I hit that command it asks where I want to send it, but no matter what I chose there is no pdf attachment that shows up in order to send. Nothing happens.

    • Emails are going to notification folder and not in inbox

      emails are going to notification folder and not into inbox

    • How can I prevent the Zoho Vault extension from automatically logging me out?

      Hi, I want the Zoho Vault Chrome extension to never log out. How can I do this? It only allows me to log out for 1 week, and the same applies to the Android app.

    • Zoho CRM App - Links

      Hi  Is there are plan for making Custom Links available in the Zoho CRM Android App? I can't see them being added? Thanks Gene

    • Next Page