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

    • Self Client Authorization Code Flow for Mail returns 404

      Hello, I'm having trouble getting the Zoho mail api setup and want a sanity check. I am trying to follow this guide to get an access token for the mail api: https://www.zoho.com/accounts/protocol/oauth/self-client/authorization-code-flow.html Unfortunately

    • Zoho Knowledgebase Help Center Categories linkages are wrong

      Greetings, I am build a help center in zoho desk, based on the additional custom brand I have paid for. My knowledge base has 4 main categories. I have this setup this way in my knowledgebase customization theme area. The page layout is like this: Here

    • Resizing a Record Template Background Inage

      Hi everyone, I have an issue which I can't seem to resolve: Basically, I'm designing a record template in certificate form. I've specified A5 landscape. I've set my background image the same dimensions with total pixels at 443,520. Whatever I try, when

    • Connecting Learn to a Custom GPT

      Hi all! I am attempting to connect a Learn Space and all it's articles into a custom GPT. Has anyone successfully done this? I have worked on it with no success so far.

    • Tip 12: How can you customize the display name while sending emails from Zoho Creator.

      Hi folks, Usually when you send emails to your users, the display name defaults as your From email address. Most often, you would like to set a custom display name to represent your organization or the context of the email. You can mask or customize the display name (From Address) using Deluge script as long as the From email address has been verified. This would be very useful to you if you want to send bulk emails to a large audience.    Let's say you have a Student Registration form for your dance

    • Importing Data to update and not add

      I'm very new to Zoho created and tried searching the forums for the answer. Nothing I found has helped me make sense of how to do this. I created a app based on an excel spreadsheet but no matter what I do, whenever I import data it duplicates the record. I have a field I would like to use as a unique identifier, but I'm not sure how to tell my app that.  Any assistance, even a link to a tutorial on creating functions in the workflow of the app, would be very helpful. Unfortunately I can't share

    • Allow me to duplicate a field

      Hi, Many times I need to create new field with slightly change compare to an existing one. So when I click an existing field, can you add one more option "duplicate"? That'd be very helpful. You mayc heck wufoo.com to see this feature. Thanks, Li lhong1

    • Community Digest Noviembre 2024 - Todas las novedades en Español Zoho Community

      ¡Hola, Español Zoho Community! Wow, ya termina el año, ¡gracias a vuestra participación se nos ha pasado volando! Por eso mismo estamos preparando sorpresas para todos los que participáis en la Español Zoho Community para el próximo año, ¡estad atentos

    • Zoho Mail iOS app - Complete revamp of the UI including insert image option, toolbar customization, calendar widgets and more!

      Hello everyone! The new Zoho Mail iOS app introduces a fresh look, blending native iOS features with a refined UI and UX to make email management more intuitive. The updated design focuses on simplicity, ensuring smoother navigation throughout the app.

    • Download API file contents from browser

      Hi Team - is there something being planned to be able to trigger file downloads from the browser via a deluge script? i.e. retrieve a file via API, trigger the file download directly from the browser. Or... using the convertToPdf function (https://www.zoho.com/deluge/help/functions/file/convert-to-pdf.html)

    • Adding a work order for Assets vs. changing the contact person

      When adding a work order for an existing Assets (e.g. service), the assigned contact cannot be changed (deleting the contact deletes the selected Assets). This results in such an illogical operation that if you want to change the person to be contacted,

    • DOMIN NME

      How many email account do zoho supports

    • Assign admins to the application

      I want to know who to assign admins to UAE Payroll application. I tried from inside the application, and from one.zoho.com >> directory and nothing is happening, knowing that I have enabled zoho people integration with payroll. Can someone help me?

    • Zoho Marketing Campaign

      I want a details report of marketing API . which API i can use to get a full flexed detail of email campaign , sms , social media ,and all other campaigns ?

    • ¿Puedo migrar mi sitio desde WordPress a Zoho? ¿Zoho admite herramientas con código personalizado?

      ¡Hola comunidad! Estoy evaluando la posibilidad de migrar mi sitio web https://calculadoradenotas.cl/ desde WordPress a una solución Zoho, y tengo algunas dudas técnicas que espero puedan aclararme. Mi sitio no es solo informativo: es una herramienta

    • Automating SharePoint Folder Creation based on Equipment Module

      Dear Team, I would like to seek your valuable advice on one of my requirements. My objective is to automatically create a SharePoint folder whenever a record is created in the Equipment module. The folder should be named based on the equipment name. Once

    • Can I view a gallery of attachments related to an Account, Contact, or Subscription

      It is often useful to review photos related to an account or contact by service type. It would be nice to be able to see the photos collected through workorders or appointments all associated.

    • Language Field on Contact Person-level

      Dear at Zoho Books, would it be possible for you to have a Field for 'Language' for the Contact Persons under a Company. In CRM and Bigin we could create a Custom Field (Dropdown) for this effect but without any present in Zoho Books we could never sync

    • Customise Zoho FSM Work Order Name

      Hi there, is there a way for us to customise the work order number? For example - I want to add auto look up for company name or dates at the end of the work order number. WO4 - Company ABC

    • Introducing Dynamic Display in Zoho CRM mobile apps

      Hello everyone, We're happy to announce that Dynamic Display is now available in the Zoho CRM mobile app for both iOS and Android devices. Mobile apps have become synonymous with convenience and flexibility. As more and more businesses rely on mobile

    • How we can integrate pdf attachments in zoho crm with xero

      when i tried to integrate the data and attchment from zoho crm to to xero only the data get integrated with xero how we can integrate the pdf attachment as well nb zoho apis are not working via functions

    • Delete user profile

      Hello, How can I delete a User Profile?

    • Send emails directly via Cases module

      Greetings all, The ability to send emails from the Cases module, which users have been eagerly anticipating, is now available, just like in the other modules. In Zoho CRM, Cases is a module specifically designed for managing support tickets. If your organization

    • Introducing delegate signing in Zoho Sign

      Hi everyone! We are happy to announce a new feature in Zoho Sign — Delegate Signing! Whether you're tied up in meetings, away on vacation, or managing multiple responsibilities, you can now assign a delegate to sign documents on your behalf. This ensures

    • Deleting Salutation Field

      We have updated our lead input screen and 'Salutation' has appeared. This is not visible in the 'Edit Pgae Layout' screen so cannot be moved to 'List of Removed Fields'  Salutation is visible in the list in 'Customization - Fields' however I can only 'Edit' or 'Replace' I cannot delete and I do not need this field on my lead input screen.  Please can you advise how to get rid of this.  Screen shots can be provided if needed.  Thank you Tasha

    • Zoho Voice VS in Zoho CRM for logging calls

      I don't understand the differences between logging calls in Zoho Voice VS in Zoho CRM. Why the 2 separate platforms? Seems confusing

    • Updates to Auto-Upgrade in Zoho Campaigns

      Hello everyone, We've rolled out a new update that slightly modifies how the auto-upgrade option in Zoho Campaigns works. Even if you hit the contact limit, this update ensures that your account is upgraded and that contacts are imported smoothly—without

    • Adding Sub-Forms to Merge Documents

      I am setting up a Mail Merge, which includes sub-form table data. I've done it before but now I am having issues: 1. The headings don't show. I had to enter these manually 2. The table lines are separated. I want them together. Anyone know how to fix

    • Zoho Bookings Online Training | July 31, 2025

      Hi everyone! We’re back with the second session of our Zoho Bookings training series! This time, we’ll show you how to automate your scheduling, manage appointments more efficiently, and explore advanced features for your industry. Join our free, two-hour

    • Translation of Tooltip Messages

      The descriptive help messages should be available to provide translations for.

    • Delete Inactive Zoho Accounts - Access Cleanup_User Id: 60001640923

      As part of our Zoho access hygiene, we’ve reviewed and deactivated several inactive user accounts. These accounts have not been used in the past year and are no longer tied to active operations. All access rights have been revoked, and records retained

    • CREATE button is grayed

      On Android adding new notes to notebooks with collections is impossible because the CREATE button is grayed. What can be done?

    • Can Zoho Creator Apps have multiple actors and steps? Example

      Mortgage Application App- Outside party fills out form via published website form, Inside party approves for additional documentation, outside party recieved requests for x, y, and z documents.  Outside party submits x, y and z but z is wrong.  Inside

    • How to download all attachments from inbox, send, other folders in one go

      Hi All, Appreciate if anyone could help me with steps for below requirement. How to download all attachments from inbox, send, other folders in one go. Even mapping to new folder will help me.  Thanks in advance. 

    • Re-Apply SLA When Ticket Reopened from Closed Status?

      If you have an SLA applied, timers are deactivated when going to "On Hold" status type and reactivated when going back to an Open status type. What we discovered is when a customer replies to a closed case and it reopens, the SLA is not applied and timers

    • Zoho Expense Reimbursement

      I am using Zoho Expense for employee expenses.  At year end I accounted for reimbursement for the founders' expenses by doing a manual entry between employee reimbursements and shareholder loan.  All is correct in the balance sheet, but in Zoho expense the expense report totals are showing as owing still.  It doesn't impact the books, but I don't want to see amounts owing.  How can I zero these out?  The only way I can see it is by creating a transaction in Books that pays the employee via a bank

    • Request to Delete Mistakenly Created Zoho Desk Account – Access Blocked to Company Directory

      Dear Zoho Support Team, I hope this message finds you well. I am writing to request assistance regarding a Zoho Desk account I mistakenly created using my company email address. I created the account before being officially onboarded by my company, and

    • Introducing an AI-driven CAPTCHA for Help Center that offers improved accessibility and enhanced security | Zoho Desk | Product Update

      Captcha protects your help center from fraud and abuse without creating friction. What is a CAPTCHA? CAPTCHA is a test used in computing to verify that a user is human by requiring them to complete a challenge. It helps prevent bot attacks and reduce

    • Announcing new features in Trident for Windows (v.1.29.4.0)

      Hello Community! Trident for Windows just got better! It’s packed with new features designed to enhance communication, manage important information securely, and give you a smoother, more productive experience. Let’s dive into what’s new! Access Zoho

    • Exporting Ticket Threads/Comments and Attachments in Reports

      Hi, I would like to know is it possible for Ticket Comments and/or Attachments to be displayed in Reports?

    • Next Page