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

    • Calendly One-way sync- Beta Access

      Hello Community, Many of our Zoho Calendar users have expressed their interests in Zoho Calendar and Calendly integration. We've been tightly working on with Calendly team to provide a two-way sync between Calendly and Zoho Calendar. However, there have

    • Live webinar: Mastering financial presentations with Zoho Show

      Hey there finance professionals! We know many of you are currently knee-deep in report creation mode to wrap up the fiscal year for your organization. Creating a presentation to communicate essential financial data isn’t simple, with all the calculations,

    • Zoho Desk Android app update: Accessing the guided conversation bots in the IM module

      Hello everyone! In the latest version(v2.9.8) of the Zoho Desk Android app update, we have brought in support for Guided conversation bots within the IM Module. These bots use predefined conversation flows to automate initial responses, handle routine

    • Zoho Analytics Embed - Zoomed Right In?

      Hey all, I am using the Zoho Show app on an android TV and cannot figure out why, but the Zoho Analytics embed is zoomed right in. When I preview on my laptop it looks fine, when I go in and edit the code, it looks zoomed? Then when it displays on the

    • Assistance with Image File Upload in Zoho Creator

      Hi , I'm building an application for storyboard creation using Zoho Creator, integrating Gemini AI for automated image generation. In the "Generate Frame" form, user inputs are collected to construct image prompts. Current Workflow: On Validation (Form

    • Migrating all email accounts from cpanel shared hosting and email boxes to zoho

      I have already read previous articles posted on this forum but none of them suit my needs.So i am currently working for a small company. The company website runs on cPanel shared hosting and the company page is a WordPress website. I recently redesigned

    • Domain Change from apkbark.com to apkbark.io – Do I Need to Setup Zoho Mail Again?

      I recently migrated my website from the old domain https://apkbark.com to the new domain https://apkbark.io. The Zoho Mail setup was previously configured and working perfectly on the old domain. Now I would like to know: Will my Zoho Mail setup automatically

    • How to add different type of revenue under sales ?

      How to add different type of revenue under sales ?

    • Types of Revenue

      i have different types of revenue , I want to see under sales in different categories , while preparing invoice I want to allocated if possible

    • Zoho books account recovery

      I had submitted a request to restore zohobooks account, but I am yet to get a feedback till now. The email addresses used to access the zohobooks can not access it again. I don't know what went wrong. I need quick attention to this. More details are provided

    • Payments calendar for receivables and liabilities by due dates

      Hello guys! What method can you recommend for tracking and planning future payments against expected income? We operate on the principle - we expect some income this month, then we look at what expenses are due this month and pay accordingly. I've seen

    • Email Search

      Has search stopped working for people? Searched on Zoho email content, I get nothing back. Signed out and back in, still same issues

    • Zoholics Europe 2025: Your Ultimate Data Analysis (Zoho Analytics) Workshop Experience

      Why should you attend? This year, Zoholics Europe 2025 is putting data analysis centre stage. With a dedicated workshop designed to answer all your data-related questions, you’ll gain practical skills, real-time solutions, and expert insights that you

    • how i can update client_secret or refresh_token in case if my was stolen?

      i want to know how i can protect my data on this case

    • [Webinar] CoCreator – Generative AI-Assisted Application Development in Zoho Creator

      Hello Creators! The Zoho Developer Community is hosting a webinar on CoCreator – Generative AI-Assisted Application Development to showcase our latest AI capabilities. What's this about? It's all about our latest AI capabilities in Zoho Creator. Instead

    • custom fields not populating from deluge script into invoice

      Hello, I've created some Deluge script that is meant to take a few inputted invoice custom fields and calculate a few others. I can see when I execute the function that my inputted custom fields are being passed, yet im still ending up with all "null"

    • Using English But Dropdowns in Thai

      We have selected English in Settings but all of the dropdown boxes are in Thai. How do i change this? The organization is based in Thailand and we are using the THB as our currency, but need the dropdowns to be in English. Please help! 🙏

    • Introducing Import Contract API

      We are excited to introduce the Import Contract API in Zoho Contracts. Here's a brief overview: Import Contract API The Import Contract API allows you to import contracts directly into Zoho Contracts in any of the following states: Draft Signed Active

    • Cambio de Plane

      Tenia un plan gratuito, hice una actualización a un plan de pago, salí por completo y entre nuevamente, pero no me deja corregir, pagar o modificar las facturas que había realizado en el modo de prueba. Me da el siguiente error: Factura de proveedor se

    • Better integration between Zoho CRM and Zoho Bookings

      I've noticed that when a meeting which was created in Zoho Bookings is updated by a sales person in Zoho CRM, the change is not reflected back into Zoho Bookings. I have raised this with support who advised that meetings created in Bookings need to be

    • Why is there a limit to JSONString of less 100 characters

      having this problem.

    • Enhanced crash reporting in Zoho Apptics

      All app crashes have the same sad ending: The app dies while the user still wants to use it. But the reason behind each crash? They vary every time. Identifying the root cause and fixing it is already hard work for your dev team. What makes it harder?

    • Description column in the "all expenses" overview page?

      Hi! I'm new to Zoho Books and accounting. I'm surprised there doesn't seem to have a proper "description" field for the expenses, only "notes", and that I can't have such a description visible on the overview page. So that I can quickly visualize my expenses...

    • Only Default Administrator Profile can Convert Estimates Zoho Finance

      In Zoho Finance Only the Default Administrator Profile can convert the Estimates A different Profile with the Admin level permission cannot convert the Estimate of someone else to a Sales Order, Only and only the default Administrator Profile Why is that

    • Zoho Notebook suddenly running very slow on long notes

      I have been a longtime user of Zoho Notebook. Historically, it has run quite well, but I've noticed over the last few days that it has begun to run unbearably slow when typing in large notes, to the point where I can type four words and have to wait for

    • Is there a way to pass the source of the chat from SalesIQ to the CRM lead creation?

      Currently when I update the values of the visitor and the lead is automatically generated in the CRM it says that the lead source is Chat, but in reality it was from either Facebook, Instagram or WhatsApp. Is there a way to make sure that the correct

    • Imported tasks

      Good afternoon, I have recently setup a test instance of Zoho CRM and am currently working through a data migration from Hubspot usine the API migration tool. I needed to get a feel for how seamless this process was but I am running into an issue. It

    • Assigning Leads to Queues

      Do you support Queues as Lead Owner? This is a basic function in any CRM. Assign Lead to a Queue group where any member can take ownership by him self.

    • Migration of emails from Yandex to Zoho

      I am trying to migrate an yandex mail account to zoho mail account. I am confused with all the related articles/informations in the net. Could someone please outline the process to do it, just thinking about me as a novice with limited knowledge or experience. A couple of questions from the knowledge gained. 1. I believe we have to delete the yandex current MX from the website records and add Zoho MX. What happens to the emails as we remove the mail exchange record. Yandex stops updating emails and

    • 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

    • Zoho Sheets working offline

      Hi, I am looking for the ability to work offline in Zoho Sheets, but currently I cannot find the process to complete this. Does someone have any ideas or steps I might have missed? Also does Zoho Sheets have the "Format as Tables" function as is currently

    • Fetching whole month availability via API

      We are currently building a custom calendar component that books directly into our client's Zoho Bookings instance. The challenge we are facing is that your API only allows fetching availability one day at a time, which is problematic. Our second workaround

    • reCAPTCHA

      Is the Bookings form protected by reCAPTCHA, or some mechanism to ensure submission of the appointment request form is made by a human vs. bot?

    • Recent enhancements to Bigin's workflows and Associated Products

      Greetings, I hope all of you are doing well! We're happy to announce a few recent enhancements we've made to Bigin. Let's go over each one in detail. Enhancement to workflows Trigger workflows when specific fields are modified to specific values Previously,

    • Zoho Survey Goes to Junk Folder

      Hello, My company is wanting to use Zoho Survey to send out a customer satisfaction survey, and we were wondering if Zoho Campaigns allows the emails to not go into their junk folder. We sent out a test email campaign to our team and for some people it went to their inbox and for others it went to their junk folder. Is there a way to eliminate this from happening? Hope to hear from you soon! Thanks!

    • Nifty enhancements to Reports in Zoho CRM

      Dear Customers, We hope you’re well! We are here with a line of useful enhancements to Reports in Zoho CRM that are readily available to access. Include or exclude Record ID in the report export Display currency fields in record currency Capture report

    • need a formula to return value as shown (zoho sheet)

      Dear folks, What should be the formula in cell B3 to get that output, based on input sheet data.

    • need a formula to return value as shown (zoho sheet)

      Hello folks, what should be the formula in B3, to get the value shown based on input sheet ranges. thanks in advance.

    • Playground: An exclusive test environment to analyze Field Prediction accuracy

      Hello everyone, We are introducing Playground: an exclusive proactive testing environment for businesses to analyze Zia's prediction accuracy. This allows admins and agents to: Run predictions on actual tickets or specific content for realistic test conditions.

    • Attention: Upcoming changes to Zoho Assist support for older windows versions

      At Zoho Assist, our goal is to provide you with secure, reliable, and feature-rich remote support experiences. To maintain this standard, we periodically align our platform with the latest technology and security updates from the broader software ecosystem.

    • Next Page