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

    • WhatsApp pricing changes: Pay per message starting July 1, 2025

      Starting July 1, 2025, WhatsApp is shifting from conversation-based pricing to per-message billing. That means every business-initiated message you send will count. Not just the first one in a 24-hour window. Pricing updates on the WhatsApp Business Platform

    • Create a button that converts Sales Order into a Custom Module

      I am looking for a way of creating a button on Sales Orders that would automatically create a record in a custom module I have created called Contracts. The custom destination module "Contracts"  has the following fields that I would need to populate [Contracts Name] populate with SalesOrderID [Account Name] populate with related Account Name [Contract Start Date] populate with the date that the record was created Could someone help or point me in the right direction? Thanks

    • Remove all of the junk data that comes with the trial

      How would I go about removing all of the junk data that comes with the trial of zoho crm?

    • Video Interview Feature

      Please add a text option as well while sending invitations to candidates for video interviews, candidates are missing out on the email. They are more convenient in text and it really helps Hope you would understand, thanks

    • Singapore DBS Bank

      Is there any schedule corresponding to DBS of Singapore? 

    • Including Contact and Account Information in Zoho Projects.

      In Zoho Projects I have created a custom layout which already includes a 'Client Information' section. The 'Client Information' section already includes integrated fields (integrated with CRM) for various account and contact details. Here's what I want

    • Unable to Download CRM Contact Data: WorkDrive Integration Issues

      ## Problem Description We need to let users download contact information from CRM as CSV files to their local computers. Since we couldn't implement a direct download option, we're trying to use WorkDrive as a workaround - but we're encountering issues

    • App Spotlight : PagerDuty for Zoho Cliq

      App Spotlight brings you hand-picked apps to enhance the power of your Zoho apps and tools. Visit the Zoho Marketplace to explore all of our apps, integrations, and extensions. In today's fast-paced world, seizing every moment is essential for operational

    • Campaigns going to spam folder, how to build so that it goes to inbox

      Hello, New to campaigns, now have it functioning correctly. In my test group of 10 email addresses 100% of the emails went to spam/junk folder and/or were blocked/captured by spam filters. What is the process to building a message or format that does

    • Integrate QuickBooks with Bigin and streamline your sales and accounting!

      If your business relies on Bigin for customer management and QuickBooks for accounting and invoicing, this new integration is here to make your operations more efficient. By connecting these two platforms, you can now manage your CRM and financial processes

    • When a ticket is merged, the merged ticket's link should redirect to the remaining ticket.

      Zoho Desk deletes merged tickets. Which is not ideal. The issue is if you have a link bookmarked, or even in your inbox from a ticket that was merged, when you visit you receive an error because merging tickets actually deletes the ticket that was merged.

    • Pass data from a Zoho Desk ticket to a Zoho Form as pre-fill data?

      Hello, I'm trying to pre-fill a Zoho form with client data based on the Zoho Desk ticket data that would be associated. Work flow i'm trying to create: 1. Ticket created for a sales order 2. order requires a site survey 3. link inside ticket links to

    • Goods total weight in Sales Orders

      Hello everyone, We want to automatically calculate the total weight in Sales Orders based on the weight data specified in the Items. Could you please suggest the simplest way to achieve this in Zoho Inventory? I would greatly appreciate any advice and

    • Problem with pagination in Zoho Inventory API

      Hello, I'm having an issue with the  Zoho Inventory API when I try to use the pagination. When I send a request to https://inventory.zoho.com/api/v1/items?authtoken=XXXXXXXXXX&organization_id=YYYYYY&page=1&per_page=50, I get back 200 items. And when I send the same request for the second page, https://inventory.zoho.com/api/v1/items?authtoken=XXXXXXXXXX&organization_id=YYYYYY&page=2&per_page=50 I'm getting back the same 200 items I get with the first request.  So I think neither the page parameter

    • Can a user be assigned to an Account based on email domain?

      Hi ZohoDesk, If I have a customer Account already configured is there any way I can use a domain matching rule to assign a new user to the correct account when logging a ticket by email? Many thanks Rich

    • Can't track conversions using GTM

      We had to move the installation of the SalesIQ widget from GTM to directly do it in our wordpress site. The SalesIQ widget was being blocked by Adblockers which caused a lot of our visitors to not be able to see it. This issue was fixed from deleting

    • WhatsApp Message Pricing Changes (Effective July 1, 2025)

      Starting July 1, 2025, Meta will introduce a per-message pricing model on the WhatsApp Business Platform, replacing the current conversation-based billing. This update affects all WhatsApp messages sent through Zoho Marketing Automation. We’ve broken

    • Parent-Child Tickets using API or Deluge

      Hi Everyone, We are looking at the parent-child ticketing features in Zoho Desk. We want to be able to create a parent ticket at customer level and nest child tickets underneath. The issue we are facing is to be able to automate this. I'm checking the

    • Blueprint transitions on locked records

      We use the ability to automatically lock records (quotes, sales orders, etc.) based on criteria, such as stage. For instance, if a quote has been sent to a client, the quote is then locked for further edits. Our ideal quote stage process is: Draft>Sent>Won.

    • CC from mail client to Zoho CRM

      Hi,  Is it possible to have emails sent outside of CRM use a CC that sends them into the CRM and attaches to the record?  Thanks

    • Department e-mail signatures

      Hello everyone, We're just in the process of evaluating various help desk software alternatives and Zoho is looking pretty good to us at the moment. Our set up is a bit strange and I was wondering if this is possible. We have one tech who looks after

    • How can I hide "My Requests" and "Marketplace" icon from the side menu

      Hello everybody, We recently started using the new Zoho CRM for Everyone. How can I hide "My Requests" and "Marketplace" from the side menu? We don't use these features at the moment, and I couldn't find a way to disable or remove them. Best regards,

    • 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

    • Sites Speed and Performance Grades

      I noticed that there are no recent inquiries or complaints about load speed or performance issues with Zoho Sites websites. However, I wanted to understand what Zoho has done to ensure that speed remains optimized, images are compressed and lazy loaded,

    • Include Audio in Zoho Assist Session Recordings

      Hello Zoho Assist Team, We hope you're doing well. We’d like to formally submit a feature request regarding session recordings in Zoho Assist. 🎯 Current Limitation When conducting a Zoho Assist session that includes voice and/or video chatting, the recording

    • Unable to update Created Date/Time even via upsert

      hi all --- running a demo version and "recreating" some data from hubspot. I had tried the method to automatically move data over but it missed A TON of fields and some stuff wouldn't even map correctly so i am simply creating new Deal records to test

    • Blockchain Feature?

      Since I'm not an expert in this technology, is there any reason why you would not want to add this option to your Zoho SIgn documents? Is there a downside?

    • Kaizen #196 - Zoho CRM Queries - Best Practices

      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. Got

    • Best way to account for shipping charges to customer

      I have been allocating all our shipping expenses to the "postage" account, but I realise that is probably incorrect, as for the most part, we pass on shipping charges to our customers. So I should probably add the shipping charges into the "shipping charges"

    • Zoho Flow s’enrichit avec les subflows et les actions Webhook

      Nous sommes ravis d’annoncer deux ajouts importantsà Zoho Flow : les subflows et les webhooks sortants. Ces nouvelles fonctionnalités ont été conçues pour vous aider à créer des workflows plus facilement et à automatiser davantage de tâches répétitives.

    • How to assign canvas view for portal user

      Hi , as a portal user, I can switch to another canvas view, however, I cannot find any field to configure a default canvas view for portal user. May I ask how to set it up in CRM? And if I can view list by sheet view as a portal user?

    • Restrict Leave Application Based on Attendance Cycle (24th to 23rd)

      Hi Zoho Team, Our organization follows a custom attendance cycle from 24th of the current month to 23rd of the next month. I would like to configure the system so that: Employees should not be able to apply backdated leave for any date after the attendance

    • How do I assign a parent to an existing campaign?

      I created a campaign but now I'd like to make that existing campaign a child of another.  How can I do this?

    • Categorize Tickets Through The App

      I used to be able to categorize and assign tickets through the app without any issues. However, for the past year, whenever I try to edit a ticket, select a category, and click save, it doesn’t actually save the changes. As a result, I haven’t been able

    • Can't add picture to email template. Says I'm over the character limit.

      I tried creating an email template with a picture and it says I'm over the character limit. The picture is pretty small. What can I do?

    • Allow breakdown of per diem for meals provided

      Would it be possible to break the per diem down into what you get for each meal. The reason for this is we want to offer per diem but if a meal is provided by a customer or sales we need to remove this from the per diem bucket for that day. We break down

    • Automatically moving Leads into their corresponding buckets

      Hi, I have developed a lead pipeline and created different cadences for various lead segments. After enrolling leads into their respective cadences, each lead goes through a series of follow-ups (in my case, three emails). If a lead does not respond after

    • Tracking Email Template usage

      I'd like to be able to track how many times agents/users send an email from Templates. This is so we can track their activity in relation to Campaigns in CRM. Thanks

    • Get employee id of authenticated user via API

      Hi, For adding timetracking records an employee id is required. Is there an API Route available to get the employee ID of the current authenticated user? or something like /users/me Currently using https://people.zoho.com/people/api/forms/employee/getRecords

    • Zoho Social API for generating draft posts from a third-party app ?

      Hello everyone, I hope you are all well. I have a question regarding Zoho Social. I am developing an application that generates social media posts, and I would like to be able to incorporate a feature that allows saving these posts as drafts in Zoho Social.

    • Next Page