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

    • Any timeline for these features?

      Hello! Was wondering if there was a timeline to for the following features: Increased API Access for automations. The Rules are nice, but really need more automation, such as adding things to CRM, automating task creation, forwarding emails, etc. "negative"

    • Projects Timesheets integration with Quickbooks

      When will Zoho Projects Time-sheets be integrated with Quickbooks? This will make us move to Zoho for all business needs (except for Quickbooks)

    • Unable to send a message to a contact from Zoho CRM

      From menu Contacts I choose a contact, on the right vertical menu i have five different choices: Add a potential, Add an activity Add an event Add a call Send a message. All af them works exept "Send a message". If i click on it I don't get nothing, no

    • Customization in PDF templates for custom modules

      I'm facing some difficulties when it comes to the custom modules in zoho books: 1) Is there any way to get the item table field for my custom module? It doesn't show up in the dropdown when trying to add a new field. 2) I was trying to somehow get 1)

    • Formación: Workshop de Zoho CRM y Servicio al Cliente

      Tu oportunidad para transformar tu forma de trabajar con Zoho Zoholics 2025 está pensado para ti, que quieres llevar tu uso de Zoho al siguiente nivel y aprovechar al máximo tu subscripción. Una de las experiencias más potentes de la agenda de Zoholics

    • Sorting alphabetically a collection in a Lookup

      Hello, In a lookup that looks at other lookups (!?), I had to make the following script to limit the list appearing in that lookup : ListeDispo = Offre_de_produits[Quantite_offerte > 0]; input.Produits:ui.add(ListeDispo.Produit_OFFRE.getall()); Works

    • Edit response and integration

      We have a zoho form that our employee starts and submits, and then a day or two later, they "edit their response". I have the zoho form integrated with the Salesforce crm. I submitted a response and it made a new record in the proper module. But when

    • Zoho Developer Hangout (ZDH) – Episode 18 | Zoho CRM Client Script for Efficient Sales Process

      Hello everyone, A streamlined sales process isn’t just a nice-to-have—it’s the engine that powers lead generation, builds stronger customer relationships, and closes deals faster. But what if you could take your CRM beyond the basics to actually help

    • Mobile no already in use

      When trying to bring up my email on another Zoho account I get asked, as a security measure, to add a mobile number. I have added a number before, but I tried again only to be told that the "Mobile number already exists", but I cannot proceed further.

    • Zoho CRM Sales Targets for Individual Salespeople

      Our organistion has salespeople that are allocated to different regions and have different annual sales targets as a result. I am building an CRM analytics dashboard for the sales team, which will display a target meter for the logged in salesperson.

    • error in making eway bill

      at the time of generating eway always a pope appers to enter the valid state code as state is auto gnerated while creating new customer

    • Need Feature to automatically fetch the registered GSTN Address of the AP Vendors

      Hello Zoho Need Feature to automatically fetch the registered GSTN Address of the AP Vendors and update the Zohobooks Vendor profile automatically so as to avoid manual address updations. Please do the needful here Thanks

    • Plug Sample #13: Display CRM Products as Dynamic Carousels in Your Chatbot

      Hi everyone! We’re back with another simple yet powerful plug to level up your chatbot experience. With the SalesIQ-CRM integration, you already have the ability to create leads, contacts, and deals directly within your CRM from SalesIQ, and view complete

    • Weekly Tips: Don't Delete, Just Archive

      For a business that relies heavily on email for communication, a cluttered inbox can be quite challenging to manage. Some emails can take up significant space in your inbox, making it difficult to navigate to other important emails. While these emails

    • Problema de sincronización de zoho mail con cliente Outlook

      Estoy presentando retardos en recibir los correos de Zoho en mi cliente Outlook a veces tarda mas de 20 minutos a pesar de haber llegado a la web no llega al cliente de escritorio y muchas veces debo cerrar el cliente y volverlo abrir para que llegue

    • Issue Updating URL Field with WorkDrive Link

      Hello, I’m working on a form with a file upload field. After uploading a file to WorkDrive, I fetch the public file link and update a field in the form with it. Workflow: When using the single-line text field ("File_URL"), the link is updated correctly

    • Should I Set Up Subdomain for Email Sends?

      Hi there, our team just bought a dedicated IP for our email sends. We send more than 100k emails/month. Because we face deliverability issues and also because of the mass sends, we decided to get a dedicated IP. My question is, should we set up subdomains

    • Incoming Email Not Coming Through

      Hi Zoho Team, I’ve recently set up my domain-based email with Zoho and everything appears configured correctly. However, I’m currently unable to receive any incoming emails. Could you please assist me in checking the following: MX records are set properly

    • Blocked: Reason 554 5.1.8 email outgoing blocked

      Hello, we have an issue while sending e-mails; whole organization with about 150 users is blocked "Unable to send message reason 554 5.1.8 email outgoing blocked", our domain is "ancient.global" Please help.

    • Error remote server is misconfigured

      Recently migrated the server to a new one. Updated MX records, SPF and DKIM values. DNS Lookup shows updated values. Still the email is getting bounced with the error: 553 Relaying disallowed

    • want to remove www

      I am trying to create my account but it doesn't let me erase the WWW . I don't need it for my email

    • Changer le lieu d'hébergement zohomail

      Est-il possible de faire héberger mon compte ailleurs qu'aux USA ? Compte-tenu de la situation de ce pays, un hébergement en Europe ou en Inde serait plus sûr.

    • Migration from Asana

      I see a lot of migration options for Zoho Projects, but don't seem to see Asana. Is there no clear migration path without going manual or custom?

    • NO RECIBO MAILS

      Hace más de 10 días no puedo recibir mails en mi correo. Si puedo enviar correos. Pueden ayudarme? Saludos, Christian Zegarra

    • I am not able to check in and checkout in zoho people even location access allowed

      This issue i am facing in mackbook air m1, I allowed location in chrome browser and i also tried in safari but getting similar issue. Please have a look ASAP.

    • Unable to receive emails

      Hi I am unable to receive emails but I am able to send externally

    • How to show User Full Name, not record id in a User Filter in analytics

      Please see screen recording: https://workdrive.zohoexternal.com/external/21a9e0c39c4595c255a62791fdf3655d3df933114a8f1598bc852d0ff7e56ce3

    • MTA-STS

      请激活对 MTA-STS 的支持，谢谢。

    • All my sent emails from KOMMO CRM System are redirected to one of a subfolder from my Ibox

      Hello, all of the sent emails from my KOMMO CRM System are placed in a sub-sub-folders in my INBOX. Why is that? And how can i change this?

    • Facebook emails aren't coming through

      Hi How can I get my business Facebook account emails coming through to Zoho mails? Every time they send me a verify email it's not coming through to my hosted email on Zoho... I've sent support and email but no reply so far. Any help appreciated please.

    • Query in Analytics for tracking Physical Available For Sale from Books

      Need: a query in Analytics on which we can build reports related to Physical Stock from Books items.  In Books, each item has an Accounting Stock and a Physical Stock. In the settings you can toggle the 'Mode of Stock tracking' option and we have selected

    • how to capitalize first letter of every word in a string using deluge?

      "diego armando maradona" to be "Diego Armando Maradona" "diego maradona" to be "Diego Maradona" "maradona" to be "Maradona" how to do that using deluge?

    • Data Discrepancy Between Zoho Books and Zoho Analytics

      We have connected our Zoho Books account to Zoho Analytics, but we are noticing that the data being imported is not accurate or consistent between the two platforms. Despite the integration, there are discrepancies in the data values. Could you please

    • Data Discrepancy Between Zoho Books and Zoho Analytics

      We have connected our Zoho Books account to Zoho Analytics, but we are noticing that the data being imported is not accurate or consistent between the two platforms. Despite the integration, there are discrepancies in the data values. Could you please

    • Option to Upload Employee Picture During User Creation in Zoho One

      Hi Zoho Team, We would like to request the addition of a new feature in Zoho One's employee creation process. At the moment, we can only upload a profile picture for an employee after the employee has already been created in Zoho One. Request: Please

    • Automatically Create Mailboxes for Existing Zoho One Users in Zoho Mail

      Hi Zoho Mail Team, I hope you're doing well. I understand that email assignment is automatic when adding users with an email address that has email hosting enabled in Zoho One Directory. However, when we initially created our users, email hosting was

    • Google Ads Data is Publicly available in Zoho CRM

      We recently discovered that ALL of the following Google Ads fields are visible to all users in our CRM that have access to either Leads or Contacts modules. Not only is this troubling and inconvenient, it should be unacceptable. It also creates a mess

    • Power of Automation :: Streamline Task Sync from Zoho Projects to Zoho Mail.

      Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-

    • Digest Avril - Un résumé de ce qui s'est passé le mois dernier sur Community

      Bonjour chers utilisateurs, Un nouveau mois se termine au sein de Zoho Community France. Faisons le point sur cette période. Le mois dernier, nous avons abordé deux approches clés du marketing : l’e-mail, outil traditionnel et sûr, et les réseaux sociaux,

    • The corresponding module is currently disabled in Zoho CRM.

      getting this error message when trying to set up sync between crm and invoice The corresponding module is currently disabled in Zoho CRM.

    • Next Page