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

    • Trello: Invalid Client - Client ID passed does not exist

      Hello, I am trying to authorize the Zoho CRM power-up in Trello but always land on the following page: I tried adding a trello client to the Zoho API console but this generated a different client ID to the one in the link of the page in the above picture.

    • Zoho Sprints - Q2 updates for 2025

      Hello everyone! We’re excited to share the latest updates from Zoho Sprints for Q2 2025! This quarter, we rolled out a few highly-requested features designed to enhance collaboration and time management across your projects. Here's a look back at the

    • CRM Email Insights Not Working - Status not Changing

      I used to be able to see if a customer opened/read an email in CRM, but I no longer get those status changes inside their record. I have everything enabled and I am sending the email from CRM. The experience center has the status' enabled as well. Any

    • The use of Ticket statuses

      When your support team mark a ticket "Closed" before I had a time to check what your team has done on the ticket - I have to consider this as you consider the ticket closed even if I dont consider it closed. Which automatically produce a negative sentiment.

    • "Replace" an existing version of CRM

      Hi all, I have a question, I saw an article about this once, but I now cannot find it. I am working with a client who has had their CRM in Zoho One built and extensively modified. But it is non-functional now, and rather than try and unpick the system,

    • Data Import From a private PostgreSQL RDS Instance

      Hello All, I feel like the problem I am experiencing has been seen before; however, I am having a difficult time finding any solutions. Hoping the community has some insights. I am trying to import data from a PostgreSQL RDS instance that is behind an

    • Assistance Required: Authentication Error When Sending Credit Application Form

      Hi, I'm encountering an error message that states: "Authentication unsuccessful – the user credentials were incorrect." This occurs when I attempt to send the credit application form to our customers. I've attached the form I’m trying to send for your

    • Missing Fields in Lead Conversion Mapping

      I’ve been using Zoho CRM since 2013 to manage leads and convert them into contacts and jobs. When I convert a lead to a customer, I create a new contact and a job. Previously, this process automatically transferred key information from the lead to the

    • Allow selection of select inactive users in User data fields

      Hello, We sometimes need to select a previous employee that has an inactive account in the User data field. For example, when doing database cleanup and indicating actions are done by a certain employee that weren't filled out when they were part of the

    • Connection to Zoho One

      My org has a Zoho One account, which includes Zoho Social. We are wanting to try linkthread. However, I want to make sure it is set up properly from an account perspective, as I have accidentally created Zoho accounts separate from Zoho One when I didn't

    • Ticket Automatically Created from Closed Chat

      Is there a way to prevent a ticket being create for every chat.... or at the very least have it automatically closed.

    • IMPORT INVOICES CSV

      Hi, Impossible to import invoices in Zoho books with a csv file. I have also tried with the template. My topic keeps getting closed but I did not get any answer Is there an issue with this fonctionnality ?

    • Related Lists in Email Templates

      Hi Zoho team, I would love to see a feature where related list information can easily be added to an email template (instead of mail merge). I have a client who books flights for their customers. They do this through a Flights module so all booked flights

    • Outlook plugin funktioniert nicht.

      DAs Outlook Plugin funktioniert nicht mehr. Ich werde aufgefordert, mich mit der App "OneAuth" anzumelden Intelligente Anmeldung per OneAuth funktioniert nicht zufreidenstellend. Nach erfolgreicher Anmeldungung mittels QR Code lande ich wieder beim QR

    • iOS App Version 3.0 - Customer list gone?

      Not sure when this changed, but I seem to have been updated to 3.0 for the phone app (on iOS). I'm pretty sure that I used to have a Customers button that allowed me, for example, to see what appointments a customer has. Has this disappeared or am I just

    • Zoho Signature, "For Demo Purpose Only Powered by Zoho Sign"

      How to disable this text on the documents for signature. "For Demo Purpose Only Powered by Zoho Sign"

    • Add Resource variable to notification email customisation for Event Type

      The notification email customisation feature for Event Type does not include a variable for the Resource field. Without this field, Zoho Bookings cannot be used by any business for resource-based services or event types e.g. room bookings, equipment bookings.

    • Can't find add role button, is iet st because I have the free subscription

      Trying to add my accountant in Zoho Books if I press the add accountant button, I get stuck as it says no such role exists, and won't let me continue, I can't find the add roles button, so I am stuck. Is it because I have the free subscription? Also can't

    • Calendar view all appointments in workspace

      In the Calendar page, add the ability to view all appointments in the Workspace. The Manage Calendars filter requires me to select at least one user or resource, and it only lets me select up to five of them. There's no filter option to view the entire

    • Tip #13: Identify where your bookings come from with Source Tracking

      Source tracking is the practice of identifying where your bookings originated. This is important, because online bookings come from a wide variety of sources like social media platforms, your website, email and ad campaigns, partner websites, organic

    • Unable to Add Notes

      I've had a user report that they are unable to add notes to account records. I attempted and found the same issue. There is no option to save the note.

    • Workflow Rule Alert Not Working

      I have a workflow rule set (that I've been using for years) that suddenly stopped working. Module - Leads Execute on - Create Alerts - Email Active - Yes When I create my lead I no longer receive my email notification. 

    • Unify Overlapping Functionalities Across Zoho Products

      Hi Zoho One Team, We would like to raise a concern about the current overlap of core functionalities across various Zoho applications. While Zoho offers a rich suite of tools, many applications include similar or identical features—such as shift management,

    • Assignment Thresholds Resetting After Lead Conversion

      Hello everyone, We're facing an issue with Zoho CRM's lead assignment thresholds that makes them unsuitable for our workflow. I'm hoping to find a potential workaround or solution from the community. Here’s our current process: A new lead is created automatically

    • Can zoho sign collect data feeding Zoho Sign?

      I m sending contracts to client who are not in my zoho CRM database yet. Can the data they enter in Zoho sign contract I send them, (that includes...) official company name address first name second name etc, ...Create or update a contact / account

    • IMAP ACCOUNT ACCESS PROBLEM

      Hi! I moved from Gmail some time ago to ZOHO. It works fine and it worked till yesterday. I found out that on my MAC OSX mail client I can not receive emails from ZOHO using IMAP. Gmail is set to IMAP and works OK. My company email account uses POP and works good as well. Is there anybody else who has such problem or this might be something with my email client...? I didi check for the settings but everything is as it was from the beginning. Honestly, I didn't change anything recently. It just stopped.

    • Modified approved time log

      I can’t seem to find a way to make change to approve time log entry. The case is the following. We pay the employees every 2 weeks, so employe A enter is time for the 2 weeks and then submit his timesheet. Now is superior approve the time he worked via

    • I want to Show the product list based on the drop Down

      in quotation app , amc form form i have Department drop down field and in subform i have loop up field item description taken from the anothe app PRO I want to show the product list look up based on the deparment selected example if they selected deparment

    • Inventory Barcode Creation - Add Picture of Item

      Hi I am trying to set up bar code labels and include a picture of the item on the label - any idea on how to add that field to the barcode generator?

    • Shared Snippets Everyone

      Hi, Now that the Shared Snippets have been released and I think will be the most used feature implemented in 2023 :) Creating and Using Snippets in Ticket Responses - Online Help | Zoho Desk Maintain consistency in ticket responses with shared snippets

    • Topics assigned to Contacts in Campaigns

      I have yet to find an efficient way to assign topics to contacts in campaigns with the new system in place.  We have daily contacts added to our system through various forms and we have to manually go in and add topics to contacts before each email campaign

    • Zoho CRM email formatting issues

      I have been having a hard time with formatting email templates. It feels like Zoho email is "fighting my edits." It refuses to change size, font, etc. Sometimes, the template looks great, then when the email gets sent, it looks completely different- some

    • Weekly Tips : Seamlessly collaborate with Share Drafts in Zoho Mail

      Ever found yourself stuck wondering how to get input on an important email draft without actually sending it? Maybe you want a teammate’s feedback or approval from your manager—without exposing sensitive info. Or perhaps you are working across different

    • How to Share a workdrive folder outside organization ?

      Hi, Earlier we were using Google Suite and were able to share the google drive folders with external organization ( Auditors , marketing collaterals ) as most of them had a personal gmail account they were able to access it without any issue. How can

    • Zoho CRM Account Duplication via Credit Application Form

      Hi, We send a credit application link to our customers via email, which is managed through Zoho Campaigns. When a customer submits the form, it automatically creates a new account in Zoho CRM. We would like to know how to stop this from creating duplicate

    • Flexible Milestone Invoicing

      If your Zoho Projects portal is integrated with Zoho Invoice/Books, you can now create an invoice for your milestones. You can enable it under Integration Preference and invoice milestones regardless of the project's billing type. For instance, consider

    • The get records i am getting produts that show in the show in the sub form item list field

      The get records i am getting produts that show in the show in the sub form item list field if(input.Department != null) { // Get filtered records once creator_ptid = zoho.creator.getRecords("harshadgroup","item-master","All_Products","Department == \""

    • Add Zoho Form Submission as Attachment to Zoho CRM Deal using Zoho Deal ID

      Hi Zoho team, I have a Zoho Form in which one of the fields will be hidden but will be defaulted with the Zoho Deal ID. Once the form is submitted, I want to reattach the submitted form (and another uploaded file field) into Zoho CRM Deals record. The crazy part is that Deal Name and Stage are the only two fields available for mapping. I have the actual Deal ID. Why can't I just use that. Can you please fix it so that I can properly attach the submission using Zoho Deal ID instead of name/stage (which

    • Payment link showing as malicious

      We've had a few customers who have been unable to pay invoices as the payment link (the domain is zohosecurepay.eu) is showing as a malicious website in their browser. Could anyone help with this please?

    • Side bar menu

      It would be great if you could stop the auto collapse of expanded menus when selecting a different module. It would save a lot of mouse clicks for a lot of users that frequently switch between sales & purchases as we do, it's easier to collapse them manually when not required !

    • Next Page