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

    • Introducing more AES digital signature options in Zoho Sign

      Greetings! Zoho Sign has continually strived to partner with trust service providers across the globe to give you complete security and confidence, so you can e-sign documents no matter where you are. We've recently partnered with IgniSign, a trust service

    • Shuffling between one note to the next

      I usually start all my notes per interaction with a contact with the date and then a little detail. But when I search for it it only see a small portion of the note and can't immediately tell which contact its associated with. can we make the note content

    • Important Update: TRAI Mandates New SMS Header Format

      Hello everyone, We have an announcement regarding a new regulation by the Telephone Regulatory Authority of India (TRAI) that affects all application-to-person (A2P) SMS services. Starting on May 6, 2025, TRAI has mandated that telecom service providers

    • Preview generation in progress for days

      I uploaded a video file to Zoho webinar. The file has been showing Preview generation in progress for days. Pls help, why is not approved?

    • Workdrive Upload Notification

      Is there a way to be notified when someone externally has uploaded files to a folder? The "Unread" tab is really worthless because it shows all files from every directory on the system. I just need an email (or bell at worst) that says "someone has uploaded into <foldername>".

    • Workflow for "Expenses" module?

      Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflows

    • Markup instead of discount??

      Is it possible to have the discount field on an invoice or estimate be a markup instead? It's the very same functionality that I am looking for - to be able to markup an individual item by either a $ or a % and have that cost added (instead of subtracted) to the item cost.  Currently, I use the tax feature to accomplish this, but it's very awkward to have "Markup 15%" listed after the subtotal. Plus, if I want to markup items at different rates, I end up with several "markup" lines in the totals

    • Allow Mapping of Zoho Desk Knowledge Base Categories to Multiple Departments in Zoho SalesIQ

      Hello Zoho Team, We hope you're doing well. We would like to request an enhancement to the Zoho SalesIQ integration with Zoho Desk, specifically regarding the way Knowledge Base (KB) articles are mapped and displayed across departments. Current Limitation

    • Creator roadmap for the rest of 2022

      Hi everyone, Hope you're all good! Thanks for continuing to make this community engaging and informative. Today we'd like to share with you our plans for the near future of Creator. We always strive to strike a good balance of features and enhancements

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

      Hello Community, Trident for Windows is here with exciting new features to elevate your communication and enhance productivity. Let’s dive into what’s new! Smart Sign-in. You can now sign in to Trident with Smart Sign-in. With this new addition, you can

    • Inactive Items - Make Less Prominent by Default

      Currently, when one marks an Item as "Inactive", it really doesn't do much of anything to hide it or get it out of the way. Search and reporting within Finance should, by default, hide inactive Items from standard reports, searches, etc. If one specifically

    • Add Lookup Field in Tasks Module

      Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (

    • Time Entry : Auto fill fields Hours minutes seconds

      Hello world, Do someone know a script (for workflow rules) which fill automatically fields hours spent, minutes spent, seconds spent when we fill Executed time and End time Formula should start from (End time - Executed time) Thx in advance

    • Zoho Forms - edit the settings of the Zoho CRM field to change the integration with CRM

      I've created a Zoho CRM field in my form to pre-populate selected CRM details into the form, following the instructions here https://help.zoho.com/portal/en/kb/crm/integrations/zoho/zoho-forms/articles/zoho-forms-crm-integration#Step_2_-_Add_Zoho_CRM_Field_in_the_form

    • Ability to add notes to an appointment and add notes/attach docs to a consultation

      As an idea for the future, it would be helpful to be able to add notes to an existing appointment--there is a place to add notes for the customer, but I don't see one for the appointment. It would also be helpful to be able to add notes or attach documents

    • Im trying to white list domain dynamically in zoho desk extension

      Im trying to white list domain dynamically in zoho desk extension. But it show error Error: {errMsg: 'No entry found in plugin-manifest whiteListedDomains for requested URL'} syntax "config": [ { "displayName":"Shopify Admin API access token ", "name":

    • Zoho Payroll: Product Updates for India - May 2025

      This May, we are glad to unveil new capabilities in Zoho Payroll that simplify your payroll activities. Here's the list: Let Employees Choose Their Tax Deduction Method for One-Time Payments Calculate variable earnings based on percentage of CTC Carry

    • Bulk Update Tasks/Task Lists/Milestones

      Is there a way to bulk update tasks/task lists/milestones? We have several projects that are in the same template, and our staff complete them tasks at a time - and would like to go in an bulk update all related tasks/task lists/milestones at once. But you can't do this. I remember in an old version you could export your tasks, update the excel doc and reimport. But it doesn't seem like that option is available anymore. Can someone provide a solution/idea? Otherwise we are spending a lot of time

    • Sync failed: Invalid Date value

      Hi, I have a local .sqlite database. After importing one table through the Databridge, and produced my dashboards, I cannot sync. I get an error regarding the date column: [Line: 2 Field: 4] (2018-07-12) -ERROR: Invalid Date value The data found at the

    • Office 365 is marking us as "bulk"

      All of a sudden (like a couple of days ago) all of our customers who are on Office 365 are getting our mails in their junk email. This is not the case with Gmail or other random mail servers, nor between us. We got a 10/10 score on mail-tester.com. Also,

    • Zoho Assist

      Hi, We are using zoho assist unattended access in some windows server 2012 and recently the agent lets you connect but not let you do anything on the remote machine. Sometimes you can click on something but nothing happens. There's a issue with this new

    • Modify workflow from "ON CREATE & EDIT" to "ON CREATE" only

      Salut, Is there a way to easilly change my choice of trigger of workflow from on create & edit to on create only, or do I have to re-do the whole worklow from scratch ? Sylvain

    • Access custom modules via API?

      Is it possible to access a custom module in Zoho Inventory via the API? I can not find any reference to this in the API docs.

    • Welcome to the Zoho Service Plus community

      Hey everyone, We are excited to welcome you to be a part of the Zoho Service Plus community. Here's a quick overview of what Service Plus is all about and how the community can help us work together. What's Zoho Service Plus? Zoho Service Plus is a unified

    • Restrict Zoho Cliq Webinars and Announcements to Admins Only

      Hi Zoho Team, We hope you're doing well. We would like to raise a feature request regarding in-app announcements in Zoho Cliq, such as the recent webinar popup about the Cliq Developer Platform: While these announcements are useful, they are not always

    • Track ZohoForm Conversion using Postmessage event

      Hi, I’ve been using a third-party lead tracking tool to capture leads from my website along with their source. Earlier, with the HubSpot form, the third-party script was able to detect the postMessage event that iframe forms typically send back to the

    • Share Notebook with group created in Zoho One

      I have created a group in Zoho One for a section in my company. Is it possible to share a notebook with that Zoho One Group? Currently, it seems only possible to share to emails. Unfortunately for large teams, this will mean we are constantly having to

    • Create Tasks in arbitrary Zoho Project triggered from CRM [Zoho Flow]

      Community, hello What I'm trying to do is to create a Zoho Project when a Deal is created in CRM and then to be able to add tasks to this Project also from Zoho CRM with the trigger (Blueprint/ Workflow). I succeeded in creating Project using Zoho Flow,

    • Outlook Add-in security times out needs to login 10 times a day

      hi we've just switched the Zoho. We use Azure SSO. All users have stopped using it. Sometimes it asks every 5 minutes. What should I lot at to solve this?

    • Simplify Zoho API integration with Deluge’s invokeAPI task

      Hello all! Happy New Year! As we kick off 2025, we’re excited to share some of the latest updates to enhance your Deluge experience. While Deluge already offered robust API integration capabilities, we’ve taken it to the next level with the introduction

    • Simplify Zoho API integration with Deluge’s invokeAPI task

      Hello all! Happy New Year! As we kick off 2025, we’re excited to share some of the latest updates to enhance your Deluge experience. While Deluge already offered robust API integration capabilities, we’ve taken it to the next level with the introduction

    • Attention: Display Issues on Chromium Browsers with Intel® Core™ Ultra Processors

      Dear Customers, We've recently identified a display-related issue that may affect some of our Zoho Assist users, particularly technicians using devices powered by Intel® Core™ Ultra Processors. What’s Happening? If you're running a Chromium-based browser

    • [WEBINAR] Smooth year-end closure with Zoho Books (KENYA)

      Hello there, This webinar is for all Kenyan businesses looking to wrap up their financial year smoothly! Join our free session to learn how Zoho Books can simplify your year-end process. What to expect from this webinar: - All the latest updates in Zoho

    • Is the "schedule 10 mass emails/module" limit a per user or per organization limit?

      For scheduling emails out of Zoho CRM, there is a 10 scheduled mass emails per module limit according to Zoho documentation (https://help.zoho.com/portal/en/kb/crm/faqs/emails/articles/how-to-schedule-mass-emails-in-zoho-crm). Is this limit per user or

    • How do I show file uploads in my Zoho Creator approval workflow?

      As far as I can tell I'm not able to add the file upload field to the approval workflow show fields list. As a work around I'm making a plain text field that links to the files URL. But I'm not sure how to get a link to that url that will me to preview

    • Zoho Payroll US?

      Good morning, just reaching out today to see if there's any timeline, or if there's progress being made to bring Zoho Payroll out to be available to all states within the USA. Currently we're going through testing with zoho, and are having issues when

    • Zoho Bookings - variable appointments

      Hello, I am looking to see if its possible for zoho bookings to recognise booking slots in the calendar or a way to do this. I would like appointments only booked in at certain times of the day and this could vary per host. I have provided a calendar

    • Limited review (/questions) for Bookings 2.0

      Hi all, I'm writing this review of Bookings 2.0 for two reasons: 1) it may be of interest to others, and 2) I'd like to be corrected if I'm wrong on any points. It's a very limited review, i.e. the things that have stood out as relevant, and particularly

    • Best Practices - Extensions for Zoho Finance Suite

      With Sigma, the extension developer platform, you can create custom extensions that enhance the functionality of Zoho Finance apps like Zoho Books, Zoho Billing, Zoho Inventory, Zoho Expense, and Zoho Invoice. Here’s how to get started: Sign up: Create

    • QR code image is not exported in PDFs

      The new QR code field works fine when I include it in a report template and I choose the print option: https://creatorapp.zoho.com/<username>/<app_link_name>/record-print/<report_link_name>/<record_ID>/ But when I try to save the document to a .pdf file

    • Next Page