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

    • Custom CSS in Zoho Form

      Hi, Please let me know, how we can add custom css in Zoho Form.  Thanks

    • Zoho Recruit

      Getting this issue

    • Missing Email

      We recently started using ZohoMail we migrated our users from google workspaces. The migration process seemed to have gone smoothly however not all emails are showing in the inbox folder. For example: If I sort the inbox folder from old to new. (Oldest

    • Client Script Quality of Life Improvements #1

      Since I'm doing quite a bit of client scripting, I wanted to advise the Zoho Dev teams about some items I have found in client script that could be improved upon. A lot of these are minor, but I feel are important none-the-less. Show Error on Subform

    • Account blocked after accessing via VPN

      All my accounts are blocked after using a VPN. I have submitted multiple support tickets without response. It’s critical that my email be restored asap Can you please provide a way to unblock my accounts

    • Exchange Rate Updates

      Hi, It would be great that when you work with multiple currencies, the exchange rate updates automagically every day (as seen on Zoho Books) or at least that when you create/update an opportunity the exchange rate could be manually updated, or maybe both!

    • Courses without signup

      Can I create "real" public courses where no signup is needed?

    • Espace Sandbox – Votre environnement de test sécurisé dans Zoho Projects

      Zoho Projects propose un sandbox sécurisé pour tester des configurations, des personnalisations et des modifications sans compromettre les données en production. Note : Disponible avec le plan Enterprise le plus récent basé sur les utilisateurs (y compris

    • Descargas en learn

      Buenos dias, yo en mis cursos para no tener que cargar los archivos que utilizare en las lecciones decidi utilizar la opcion de bloques para añadir un enlace de mi workdrive con el video que deseo para que sea todo mas organizado, pero hay un problema.

    • Mail delivery

      I initially had a problem sending any outgoing mail and was able to fix it on my own, given Zoho support never got back to me. However, despite being able to send emails now, none of my mail to different Gmail addresses are arriving, and they are not

    • Mermaid Support & Zoho Learn

      Hi Zoho Team, I’m currently working with Zoho Learn and was wondering if there’s any way to add support for Mermaid syntax to create flowcharts, sequence diagrams, and other visual elements within articles or lessons. Mermaid is widely used in technical

    • Blocked due to VPN

      Hi My account outgoing mails and IMAP access have been blocked due to using a vpn being interpreted as suspicious logins. I’ve tried to mail support but not sure if this is also blocked. This is extremely frustrating as I’m using a vpn because I’m travelling

    • reset admin access.

      I am a user under the domain @lanutraceuticals.com. I do not have admin access. Kindly let me know the administrator contact or help me reset admin access.”

    • Unsubscripation booked domin

      Kindly Un subscription booked domain

    • How to change Super Admin

      Good Day, Can someone kindly guide me on how to change the super Administrator. I have tried many times but could not succeed.

    • Events disappearing in Calendar

      To reproduce the bug: 1.- Add a new event in Calendar 2.- Type any name for the Event 3.- Click "Create" 4.- The event appears 5.- Click on the event to open it 6.- Optional: Edit the event 7.- Click OK 8.- After two seconds, the event disappears Now, click on another day and then come back to the inserted event's day. The event appears.

    • Mail transfer to a contact with multiple accounts

      Hi, Since we can only associate one email for a Contact across Zoho, would it be a problem if we want to merge our mailbox in the future? For example, Mr. Jones is the main POC for 5 accounts, once we merge our mail where would the messages go-- is it

    • @mention not working in Mail

      Am I missing something? When trying to forward a message there is a hint you could do this also by "@mention" at the end of the message. When typing (for example) "@s.." there should appear addresses from my contacts, shouldn´t it? But nothing happens! So what can I do? Best regards and thanks for any help in advance! JH P.S.: Sorry for my bad English.

    • Enable Zia-Powered Deluge Assistance and AI Agent Without Mandatory OpenAI Integration

      Hi Zoho Creator Team, Hope you're doing well. We’d like to request a feature enhancement related to Zia's AI capabilities in Zoho Creator, particularly regarding Deluge Assistance and the AI Agent. Currently, as shown in your documentation (Generate Deluge

    • Zoho Sign community meetup series - India

      Hello everyone! Zoho Sign is a comprehensive digital signature application tailor-made for Indian businesses with unique features like Aadhaar eSign, eStamping, USB/PFX signing. We are now excited to announce our first meetup series for Zoho Sign in India,

    • List of packaged components and if they are upgradable

      Hello, In reference to the article Components and Packaging in Zoho Vertical Studio, can you provide an overview of what these are. Can you also please provide a list of of components that are considered Packaged and also whether they are Upgradable?

    • Product Updates in Zoho Workplace applications | June 2025

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this June. Zoho Mail Slideshow view for inline images in Notes View all your inline images added in a notes in a effortlessly

    • Assign multiple vendors to the same product

      Guys, My business often purchase the same product from several vendors (based on price and availability). Is it possible to assign more than one vendor to the same product? I saw this same question in this forum, from some time ago. Is this feature available or, at least, in Zoho's roadmap? If not, is there any trick to solve my problem? Without this feature, I simply cannot manage my company's inventory, limiting very much the use of Zoho CRM. Waiting for your reply. Leonardo Kuba Sao Paulo / Brazil

    • Is there as way to shut off the invitation when you set up a new user?

      Is there as way to shut off the invitation when you set up a new user?  I would like to get all my users in the system, my org structure set up and tested, etc, BEFORE I invite the users.  I did not see a way to shut of the automatic invitation email.  The only way to get around it is to set up the users with no Email ID.  However, when you do that - you get into the problem of not being able to update a user's Email ID (which makes NO sense whatsoever).  If I set up a user with an incorrect email

    • Manage Engine login issue

      App not available The app you're trying to access isn't yet available in the in data center region, where your account is present. To use ManageEngine, you can sign up for a new account in another data center region. Learn How Go to Zoho accounts Please

    • Zoho Creator - users "Name" Column

      Hi, When you add user to an application inside Zoho Creator, the system generate an account name for it. We don't have the  ability to change this name. According to Zoho creator Support (Case:11523656) : "The values displayed under 'Name' column of 'Users & permissions' section, is actually the respective account's username and not the actual name specified on the account. Usernames are system designated based on the account email address and cannot be modified from your end." We need to have the

    • Zoho Assist Unattended - devices disappearing

      Hello, I've recently introduced a new model of laptops into our environment (Lenovo Legion). We are experiencing an issue where only the latest installed agent - laptop is visible in Assist. This issue does not appear with our Dell inventory. Example:

    • Searchable email tab in Bigin

      Hi team, Could I please request a feature update, to be able to search emails within the email tab of Bigin. We have large correspondence with some agents and it would be very helpful if we are able to search from this section:

    • The silent force behind great customer service

      Customer service is known to be a demanding role. Customer service agents are expected to bring empathy, clarity, and human connection to every voice call, chat, and remote session, even if the situation requires some time for customers facing stressful,

    • New From Email in Zoho Desk

      Dear ZohoSupport, We are trying to establish a new From Address in Zoho Desk but we are facing difficulties. When trying to use the smtp.office365.com SMTP Server, after clicking the Save and Verify button, the Authentication Failed error pops up although,

    • Option in pipeline deal to select which hotel or branch or store if client has more than one local store

      Hi, I would like to know if there is an option in the deal pipeline to select which hotel, branch, or store a deal is related to—if the company has more than one location. For example, I have a client that owns several hotels under the same company, and

    • Aggregate SalesIQ Knowledge Base Interactions into Zoho Desk Knowledge Base Dashboard

      Hello Zoho Desk Team, We hope you're doing well. We’d like to request a feature enhancement related to the Zoho Desk Knowledge Base dashboard and its integration with Zoho SalesIQ. 🎯 Current Limitation When customers interact with knowledge base articles

    • Add Prebuilt "Partner Finder" Template with Native Zoho CRM Integration in Zoho Sites To: Zoho Sites Product Team

      Hi Zoho Team, We hope you're doing well. We would like to request a prebuilt "Partner Finder" template for Zoho Sites, modeled after your excellent implementation here: 🔗 https://www.zoho.com/partners/find-partner-results.html ✅ Use Case: Our organization

    • Admin Visibility and Control Over Group Chats in Zoho Cliq

      Hello Zoho Cliq Team, We hope you're doing well. While we appreciate the current capabilities in Zoho Cliq — including the ability to restrict who can create group chats and configure user permissions — we would like to request several enhancements to

    • Update Regarding Zoho Finance Applications' Domains For API Users

      Hi users, Until now, both the Zoho Finance apps and their APIs shared a common domain. We've recently introduced separate domains for APIs. You can now start using the new domains for API calls. The old domains will not work for API users starting April

    • Ability for Agents to Initiate Voice Calls With Site Visitors Without Active Chat Session

      Dear Zoho SalesIQ Team, Greetings, We would like to request a feature enhancement related to the voice call functionality in Zoho SalesIQ. Current Limitation: At the moment, voice calls can only be initiated by agents after a chat session has been started

    • Add new Card

      How do you add a new credit card to a contact with Zoho API as can be done on web.  I am not able to find way to do this with Books API, CRM API or Subscriptions API.  This is an issue for our company as we do migration from a different system.  I can add card to a subscription through Subscriptions API, but some of our customers may not have a subscription, but only invoices set up in Zoho Books.  Is there any way in Zoho API to add new credit card to contact/customer?

    • Benchmark for Using Mail Merge in Service Order Scopes

      Hello, I was wondering if Zoho CRM has a benchmark or best practices for utilizing Mail Merge in service order scopes. Specifically, I'm looking for guidance on how to effectively integrate this feature for creating and managing service orders, especially

    • This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

    • Why don't we have better integration with Mercado Pago or Pagseguro?

      Currently, the integration between Zoho Commerce and Mercado Pago for Brazil is very poor... Since it is old, it does not include the main payment method in Brazil today, which is PIX. Is there a date for this to finally be launched? There are numerous

    • Next Page