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

    • Zoho Sign URL cannot be embedded in an iframe on the React side.

      The Zoho Sign URL cannot be embedded inside an iframe within a React application (or any web application) because Zoho enforces a Content Security Policy (CSP) that explicitly prevents iframe embedding from external origins. When attempting to load the

    • Zoho CRM Developer Series - Queries

      Hey everyone! We’re excited to invite you to our next Zoho CRM Developer Series focused on Zoho CRM Queries, happening on June 5, 2025 and June 26, 2025. Whether you're working on CRM customizations, integrating with third-party services, or just curious

    • Can Clients have Access to their record Attachments in Client Portal

      Is there a way to have allow clients access to attachments in their client portal? Attachments is currently hidden in the client portal and I cannot find a way to allow client access. Thank you!

    • Canvas: how can I edit theme?

      This says "Theme Colours", and I would like to edit theme colors (and styles ala CSS). How can I edit these "Theme Colours"? I'm a software developer, so just point me in a direction where I can alter code if needed.

    • CRM For Everyone - Bring Back Settings Tile View

      I've been using CRM for Everyone since it was in early access and I just can't stand the single list settings menu down the left-hand side. It takes so much longer to find the setting I need. Please give users the option to make the old sytle tile view

    • Mass Update of Lookup Fields not possible

      Hello List I've created a custom field for Leads and Contacts 'Current Campaign'. This is very Handy as I can filter leads and then related them to a campaign. Everything ready, but then I realized that mass update doesn't work for lookup fields... a

    • are Zoho Meeting and Zoho Webinar two separate products?

      hey all, i'm new to Zoho One and I'm trying to figure out what's the best platrofrm to do a Webinar for my subscribers. I see that Meeting have a Webinar option, but i see there's also a separate product (?) called Zoho Webinar. Are these two actually

    • Very Worst Experience = Screen sharing was Awful. There is a huge lag. I switched to Google meet, with same network speed, there is no lag at all.

      Very Worst Experience = Screen sharing was Awful. There is a huge lag. I switched to Google meet, with same network speed, there is no lag at all. Requesting you to work on your improvements. Otherwise this will give a very poor experience. Thanks,

    • Enable Native Zia Integration in Zoho Mail Without Requiring OpenAI API Key

      Hello Zoho Team, We hope you're doing well. We would like to request a feature enhancement for Zoho Mail's integration with Zia, specifically concerning the AI-powered capabilities like: Auto-complete sentences Generate email content Summarize email Currently,

    • Email policy not working?

      Hi, I created an email policy called "default", under which I created a "default" entry for the access items (the third icon with the key). I've set everything to "ON" (POP, IMAP, ActiveSync, etc.). But then when I create a new user and check it in Mail

    • One notebook is on my Android phone app, but not on Web or PC app.

      This problem started in stages. At first my phone was occasionally failing to sync. Then I noticed two things added to my Phone App. One was an existing notebook had a new cover, and the other was a new Note Card with an odd text in it. These were only

    • Admin Training

      Hello, I would like to get admin training on Zoho Projects. Has anyone had success in finding a class or resource for something like this? Are there any partners out there that offer this kind of training?

    • Why can't we change or delete the first page of a Zoho PDF?

      I've noticed that it's not possible to move or delete the first page of a Zoho PDF, why is that?

    • Latência

      Estou com bastante latência 200ms em São Paulo Brasil para o endereço mail.zoho.com, e email demora para carregar as vezes trava como está por ai ? segue print sabem se é normal ? ping

    • How to change the module for contact sync from Accounts to Accounts & their Contacts?

      Hi, My ZOHO CRM integration is broken and pushing the errors for sales orders and invoices, the error message is: "The customer associated to this record is not linked to module chosen in the current contact sync configuration." So, Now I'm trying to

    • Top Menu Disappeared from Blog Page

      Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.

    • VOIP integration

      I emailed this question to rishi but never got a response. I notice when I mouse over phone number it has a link to launch into SKYPE. We dont use SKYPE we use Xlite SIP client. Is it possible to change that link to launch our client API? If so how? If not any plans to make that VOIP integration customizable?

    • Add "Ask Zia" Functionality for Report Creation in Zoho Desk

      Hi, How are you? We’ve noticed that Zoho CRM offers a very useful feature called "Ask Zia", which allows users to enter natural language prompts to generate reports quickly and easily using Zia's AI capabilities. Currently, Zoho Desk does not support

    • I can't use zoho in my personal computer

      Facing error on monitor Oops! An error occurred

    • My Zoho Account Not Working, Suddenly its stoped

      Hello Team, our company email account is not working, we are not receiving email. Website: www.urgentdubaivisaonline.com Email: social@urgentdubaivisaonline.com

    • MX verification

      Dear All I face a difficulties to verify MX records in my domain alfagrouptrading.sk it is since two days. records are correct and I am waiting for 48 hour I send email shown in the error message with no reply.in addition, it supposed to be propagated

    • I'm not receiving emails.

      Hello. I'm having an issue in which I am able to send emails using my zoho mail, but I seem to be unable to receive them. please help.

    • Change zoho email address

      I am displeased with the email address I created. It's too long.

    • Departments Limit

      There is a limit of departments that i can have on zoho desk?

    • How to create a form using both contact and account fields?

      I am sending a prefilled form from CRM with fields mapped, to update records in CRM. If I link the CRM field to the Contacts module, the Account Name field doesn't come up as an option in CRM. If I added it under Related Fields, my understanding it would

    • Boost your Zoho Desk's performance by archiving tickets!

      The longer your help desk operations are, the more likely it is to accumulate tickets that are no longer relevant. For example, ticket records from a year ago are typically less relevant than currently open tickets. Such old tickets may eventually lead

    • Are Zoho Help Center Email Notifications Customisable?

      Hi, I would like to find out if the Zoho Help Center email notifications can be customised to add our own styling and branding? These are the notifications that get sent when a client adds a new topic, adds a comment, signs up to the help center, etc?

    • Sharing and Converting Custom Reports Across Departments in Zoho Desk

      Hello, We initially started using Zoho Desk with a single department (Department "A"), which included multiple teams. Nearly a year later, we identified several limitations that led us to create three additional departments ("B", "C", and "D") with replicated

    • Mapping a new Ticket in Zoho Desk to an Account or Deal in Zoho CRM manually

      Is there any way for me to map an existing ticket in Zoho desk to an account or Deal within Zoho CRM? Sometimes people use different email to put in a ticket than the one that we have in the CRM, but it's still the same person. We would like to be able

    • Delivery note from order or from offer

      Hello, in our company and in a lot of companies in Italy, the standard workflow is (in order): 1) Offer 2) Customer order 3) Delivery note. We can have also more delivery notes in one month. 4) Invoice at the end of the month from delivery note (so only

    • Sesiones 1:1 en Zoholics España 2025

      Una de las experiencias más valoradas por los asistentes a Zoholics son las sesiones 1:1 con nuestros expertos técnicos. Este 2025, las traemos de vuelta con aún más fuerza: cada entrada a Zoholics España 2025 incluye una sesión individual gratuita de

    • "The email sending domain must have an active and functional website so that we can proceed with the review."

      I've requested the approval of my account, and got the following response back: "The email sending domain must have an active and functional website so that we can proceed with the review." This is absolutely false. The website I have provided has been

    • Upload File via email

      Will there be an option to upload a file via email?

    • How to use milestones and task lists effectively

      I am trying to use Zoho Projects for my development process. My goal is to manage project status and provide reports to the customer. I am developing an app (2 apps to be precise: 1 for Android and 1 for iOS) I originally thought my milestones would be: 1. Analysis and Design 2, Android Development 3. iOS Development 4. Web Console Development 5. Quality Control 6. Deployment But then I needed a tasklist before I created a task so it was sort of duplicated with tasklists being a superfluos duplicate

    • External calls & email notification limits

      Salut, I was doing some testing of SMS and Email notification yesterday, on the development environment, and got an error due to External calls exceeded. I know that my plan has 100 email & external calls limit, but in my billing page, I do not see those

    • How to get custom estimate field to display on existing or new services?

      I am using FSM. I recently added a new custom field to Service Details to help categorize my services. I can see the newly added field as a column on the service list view. However, when attempting to update an existing or create a new service, I don't

    • How to turn off notifications for shared mailbox?

      It seems like a pretty common use case for shared mailboxes is getting notifications that are relevant to multiple people. That type of email tends to be high-volume and not time sensitive, the type of thing you check once a day to see if anything is

    • Problem using for each in subform

      I have a subform in one of my forms, and sometimes I have to use a for each statement in this subform. Now, my problem is, I've seen it suggested everywhere that the syntax is supposed to be:  for each var in SubformField Every time I tried this doesn't work for me, so I have to use: for each var in input.SubformField It isn't exactly a problem, but, let's say it's on the 'on user input' action of one of my fields, if I need to edit this action for any reason, when I click on it, it removes the input

    • Lookup field display in Zoho Analytics

      Hello, I think I am missing something very obvious, but I can't figure it out: I have 2 lookup fields in my "Deals module" -> One for the account that we have the project with and one for the beneficiary account. Both fields refer to the "account name"

    • ZOHO Reports is not Working !

      This error is coming up: Please fix it ASAP. Sorry!! Unable to display this page Sorry, an unexpected error occured when performing this operation. The error has been logged and will be looked into. It would be of great help if you could provide us with additional information using the ''Feedback'' link at the top of this page. 1. The error has been logged and will be looked into. 2. It would be of great help if you could provide us with additional information using the feedback link.

    • Next Page