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

      • Good news! Calendar in Zoho CRM gets a face lift

        Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities
      • Zia Conversation Summary: Context at a glance for every customer interaction

        Hello everyone! Every customer conversation tells a story—but in CRM, that story is rarely in one place. A sales rep moving between multiple leads has to reopen long email threads, check call remarks, and revisit meeting notes just to remember what was
      • Zoho Books - New Interface keep details with PDF View

        Hello, The Zoho Books Interface has changed for estimates etc... One thing is causing issues though. Before the change, in PDF view you could see the detail information including custom fields entered for the estimate. Now, you have to switch between
      • Zoho One Unified Portal - Applications

        Hello, It is great to see the work on the New Unified Customer Portal. Thanks for that. The number of applications is limited though. It is now only around the Zoho Books ecosystem (Books, Expense...) and Zoho Social. = Are other applications planned
      • Dropdown data depends on filters in another field.

        In my quote form I have a lookup field called Reseller that pulls from Accounts. I would like it to pull from Accounts, but only those accounts with an account field 'Type' where that is 'Reseller'. Does anyone know a way to do this? Similarly, I'd like
      • Automatically CC an address using Zoho CRM Email Templates

        Hi all - have searched but can't see a definitive answer. We have built multiple email templates in CRM. Every time we send this we want it to CC a particular address (the same address for every email sent) so that it populates the reply back into our
      • Refresh frequency

        Dear Zoho Team, I really, truly appreciate that Zoho Books gets frequent updates. As a matter of fact this is how a good SaaS company should stay on top. However, I feel that I have to hit refresh almost every day. This was exciting at the beginning but
      • Refund

        My plan expired today, and I updated my payment details with a new credit card. At the same time, I wanted to downgrade, but the system wouldn’t allow the downgrade until the payment details were updated. As a result, I was charged for the same plan before
      • WhatsApp Calling Integration via Zoho Desk

        Dear Zoho Desk Team, I would like to request a feature that allows users to call WhatsApp numbers directly via Zoho Desk. This integration would enable sending and receiving calls to and from WhatsApp numbers over the internet, without the need for traditional
      • Can we generate APK and IOS app?

        Dears, I want to know the availability to develop the app on zoho and after that .. generate the APK or IOS app  and after that I added them to play store or IOS store.. Is it possible to do this .. I want not to use zoho app or let my customers use it. thanks 
      • Text/SMS With Zoho Desk

        Hi Guys- Considering using SMS to get faster responses from customers that we are helping.  Have a bunch of questions; 1) Which provider is better ClickaTell or Screen Magic.  Screen Magic seems easier to setup, but appears to be 2x as expensive for United States.  I cannot find the sender id for Clickatell to even complete the configuration. 2) Can customer's reply to text messages?  If so are responses linked back to the zoho ticket?  If not, how are you handling this, a simple "DO NOT REPLY" as
      • 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.
      • Calling Function via REST API with API Key gives 401 using Zoho Developer

        Hi, I created a couple of functions using the one month trial of Enterprise edition, which I was able to call using the API Key method from Postman and from an external site. Now that my trial has expired, I have created the same functions in the Developer
      • Error due to - 'Internal Exception' when uploading Sign-generated PDF file to workdrive via Deluge in Zoho CRM

        Hi I wasnt getting this error a few days ago and my code had not changed, so I'm wondering if there's a Zoho bug somewhere? I am downloading a PDF file from a Zoho Sign url using invokeurl and then uploading it to a Workdrive folder using zoho.workdrive.uploadFile.
      • Embed CRM record images in email templates

        I have email templates that I want to embed dynamic images in their body - not as an attachment. For the context, the image is a QR code individual to each contact. So there are couple of challenges for which I think there is no solution in CRM: 1/ I
      • Assign multiple departments to multiple helpcenters

        Hi there! I have a reseller company for a software and I'm using Zoho Desk as my helpcenter and ticket management system. The software is great and I would like to make a suggestion! With multi-branding activated, your departments that visible in help
      • Zoho Desk Training

        Hello, We've had Zoho desk for a while now, but we run into issues occasionally, and I was wondering if there was a customer who currently uses it and really enjoys the functionality, that would be wiling to chat with us?
      • Advanced Customization of the Help Center using JavaScript

        Hello everyone, The Help Center in Zoho Desk can be customized by using HTML and CSS to provide structure and enhance the page's appearance—but what if you want to add interactive and dynamic elements? You can add these effects with JavaScript, a programming
      • Exciting Updates to the Kiosk Studio Feature in Zoho CRM!

        Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerful
      • Edit default "We are here to help you" text in chat SalesIQ widget

        Does anyone know how this text can be edited? I can't find it anywhere in settings. Thanks!
      • PO Based Advance payment to Vendor

        We recommend to introduce a provision at PO to make advance payment to vendors and auto apply that advance paid later at the time of Vendor Bill submission for that PO. This will help us track PO-wise Total Payments.
      • Converting Customer Invoice to Purchase Bill

        Hi, In my service-based business, I sometimes create the customer invoice first, and later I receive the purchase bill from the vendor for the same job. Is there any option in Zoho Books to: Convert a customer invoice into a purchase bill, or Link/associate
      • Getting Project Template List using the REST API

        I am trying to confirm that I can use the REST API to create a project using a project template. The API documentation indicates this is possible by providing the Template ID, but it is not clear at all how to get a list of available Project Templates
      • How to get Quickbooks Desktop Info into Zoho?

        Our team has used Quickbooks desktop for years and is looking at switching to Zoho books in 2026. I want to bring all old sales history over since we use Zoho CRM. I can export Item sales history and generic sales orders from Quickbooks desktop. How do
      • ZeptoMail API Request

        We tried to send mail using ZeptoMail using Django. Following is my payload {'from': {'address': 'abc@abc.com'}, 'to': [{'email_address': {'address': 'xyz@xyz.in', 'name': 'Bhavik'}}], 'subject': 'Report Name', 'htmlbody': '<p>Test</p>'} Following is
      • Zoho Inventory - Allow Update of Marketplace Generated Sales Orders via API

        Hi Inventory Team, I was recently asked by a client to create an automation which updated a Zoho Inventory Sales Order if a Shopify Order was updated. I have created the script but I found that the request is blocked as the Sales Order was generated by
      • Automated log-out/session end

        I'm concerned about security of our data. Is it possible to set an automatic time-out for user sessions on Zoho CRM, after a certain period of inactivity or when the session reaches a certain duration (12 hours perhaps)? 
      • Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account

        Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?
      • Mass import of documents into Zoho Writer

        I'm using Google's word processor at the moment but feel that Zoho does a better job (on the online apps market). Iwant to move my documents (about 50-70) to Zoho but it seems to me that I have to import them seperately. Is it already possible to upload several documents at a time or is this a forthcoming feature? Cheers Rolli :?:
      • When will it be possible to edit Subform records via either views or tabular reports?

        Hey there, data maintenance often requires mass update of quite a lot of records. While this is a piece of cake via either List view or Zoho sheet view, the same cannot be carried out for subform records yet. When one of the two options will be made available?
      • Subform auto populate values

        Hi Team, I’m trying to retrieve values from Zoho People using API functions and dynamically populate them into a subform. For example, I’ve created a form with several fields that users will fill out. Based on their input, I need to fetch records from
      • Add System Pre-Defined Lookup Field to Subform?

        Hi there! New to using Zoho, so this may already exist, but I'm having trouble figuring it out. Is there a way to get the system pre-defined Account Lookup field (in our case, renamed to Company Name), as the starting point for a subform? In our company,
      • How we cut CRM updates from ~20 minutes down to 2, our real workflow

        Updating the Zoho CRM after every call used to be one of the biggest time sucks for our team. By the time you write your notes, clean them up, fill in the fields, and log everything properly… you’ve easily lost 15–20 minutes per call. We started experimenting
      • Add home page or dashboard in CRM customer portal

        is it possible to add home page or dashboard in CRM customer portal?
      • User Tips: How to change the the label display name of a system defined field

        Most users know how to change field label names via Settings > Modules & Fields but if you want to change the name of a system defined field you can’t as there is no “edit properties” option.  However with a simple hack you can edit any system defined
      • Search not working!

        I have items in my notebook tagged but when I search for a tag nothing comes up! Any fix for this?
      • Zoho Analytics Regex Support

        When can we expect full regex support in Zoho Analytics SQL such as REGEXP_REPLACE? Sometimes I need to clean the data and using regex functions is the easiest way to achieve this.
      • Zoho CRM Community Digest - October 2025 | Part 1

        Hello Everyone! Here's a quick recap of first two weeks of October! Product Updates: Zoho CRM Android App Update: Surveys, Blueprints, and Smarter Mobile Features! Zoho CRM’s Android app just got a useful upgrade. You can now share records, upload your
      • Add Custom Field Inside Parts Section

        How to Add Custom Field Inside Parts Section in Workorder like Category and Sub- Category
      • What is New in CRM Functions?

        What is New in CRM Functions? Hello everyone! We're delighted to share that Functions in Zoho CRM have had a few upgrades that would happen in phases. Phase 1 An all new built-in editor for better user experience and ease of use. ETA: In a couple of days.
      • Next Page