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

    • login email

      Never logged into email says last log in never loged into

    • Installment plans

      Hi I am looking for a way to allow my customer to make equal monthly payments. For instance if I create an invoice for customer Y for $1000 I want to allow them to make equal monthly payments for the next 6 months. I need those payments to be auto charged

    • Search Mail with URL parameters

      Is it possible to search Zoho Mail by passing URL params like we can in Gmail? eg. mail.google.com/mail/u/0/#search/from:(jane@doe.com)

    • Need Help Fetching Latest Conversion Rate by Date

      Hi Team, I’m currently working on building a Balance Sheet in Zoho Analytics across different entities, with a common base currency of USD. I receive USD conversion values on a daily basis, and my requirement is to always capture the most recent available

    • Enhance Zoho One Conditional Assignment to Fully Reassign App Settings When Changing Departments

      Hi Zoho Team, We’d like to submit a feature request regarding the current behavior of Zoho One’s conditional assignment logic when moving a user between departments. 🔧 Current Limitation As it stands, Zoho One’s conditional assignment does not remove

    • Category to Alert

      Hi I am looking for help on how to solve an issue. We use the Category field for all items. We also use Composite Items. We would like to create an email alert when a Sales Order is created, however it would need to look at the Item to identify the category

    • Validation Rule (Date)

      Hi There,  Can any anyone help me with the validation rule? I'm trying to fire a rule whereby the End Date cannot be before Start Date.  Any takers?  Manoj Nair

    • Beyond Email: #3 Organize effortlessly with Bookmarks

      With her team’s details now neatly saved under Contacts, Sarah is feeling more settled in Zoho Mail. As she begins exploring her new workspace, she remembers the collection of useful links she has saved on her browser—project trackers, client portals,

    • Notification based on created/updated sales order that contain certain line items.

      Hi, I am finding the workflows within Books somewhat difficult to setup, so I am thinking that a custom function may be the best way to go about this. I want to be able to send a notification to a team member that any sales order that has been created

    • Drawings in forms

      I do a lot of drawings during my consultations and I’d like to add  body maps or stencils that I can draw on in different colours and add explanations etc. I need to be able to erase mistakes etc. Ideally in a form that I can prepopulate with client details and a few questions/ client signature and then save as a form. is this currently possible? if not, is it in the pipeline? thanks, Dennis

    • How can I populate dropdown data with information from another source or app?

      I want to maintain a list of items in another app (say in excel or another database) and sync those as items in a drop down menu, instead of copy pasting to import. Is this kind of a feature available?

    • Workplace - Zoholics Europe Customer Awards

      Dear Zoho Mail Community! 📣 We're excited to announce that at this year's Zoholics events across Europe, we're holding customer awards for the first time ever! Workplace - Zoholics Europe Customer Awards This is your chance to shout about the amazing

    • Zoholics Europe Customer Awards

      Dear Zoho Workplace Community! 📣 We're excited to announce that at this year's Zoholics events across Europe, we're holding customer awards for the first time ever! Workplace - Zoholics Europe Customer Awards This is your chance to shout about the amazing

    • Change Default Currency in Zoho Reports

      Is it possible to default all currency fields in my Reports and Tables to my local currency without having to reformat them every time?

    • [Webinar] Deluge Learning Series - Master Conditional & Operational Logic in Zoho Deluge

      We’re excited to bring you the next session in our Deluge Learning Series—a focused one-hour webinar where you’ll level up your skills in conditional and operational logic using Deluge scripting. From writing clean if-else conditions to implementing powerful

    • UPI QR Code in Invoices

      Hi, It would be easier to make payment, if UPI Qr code is generated by Zoho Books and shown in the invoice itself.  This will promote digital payments and also makes it easier for customers to pay. It would be even helpful, if QR code contains the invoice

    • WebDAV support

      I need WebDAV support so that I can upload/download (and modify) documents from my local file system. Is anything planned in his direction?

    • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

      We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

    • Zoho Inventory Item History

      Hi Zoho Inventory Team, I 've been testing the History feature on Inventory Items in a demo system and I noticed that when I changed the value of a field to a new value, the history just says "updated by - user1", it doesn't say what what field was changed

    • Filter Images in Work Drive

      Hi, what is the best way to be able to filter files by multiple descriptions, for example, the name of a person in the photo as well as, an item in the photo and other descriptions? With labels it looks like you can only select one label at once but this

    • Flow not working when trying to Create a Merged Doc with info from a custom CRM module w/ subform

      I am having a problem creating a flow that gets its info from a webhook connected to a button in a custom module in Zoho CRM. I have made a template in Writer that follows: This is a clone of  the template in the CRM mail merge which works perfectly if i do it manually through there. My flow gets the custom module entry id through a webhook, then fetches the module entry data, and creates a merge document from that data. I know the webhook and the fetch work because if i replace the "create merge

    • Smart Scheduling via Agent Confirmation

      We’re excited to introduce a smarter and more streamlined way to manage dispatched service appointments in Zoho FSM! Feature Highlights Field agents can now approve or reject service appointments assigned to them—helping reduce unnecessary workload and

    • How to delete Inactive users?

      We want to delete inactive users from our system, but went you deactivate still the names are shown at the inactive section. How to get really rid off these names? Thanks for your response! Fabian van den Barselaar

    • Help me format my signature in zoho mail

      I need to set up my signature in zoho mail then send the format to other colegues to set it up by themselves. I have isues setting up my 5 logos one after another as I am not able to give sapce between logos. After setting up my signature with logos there

    • Can i integrate bigin with google voice?

       I make all my calling through google voice to seprate my personal line from business. I want to log my calls with customers automatically but i domt see anywhere where i can do that. Any help? Im pretty sure i wont be able to. Sad

    • Custom Field for Customer ID in Zoho Commerce's Customer Section

      Hi everyone, I’m wondering if it’s possible to add a custom field in the "Customer" section of Zoho Commerce. Specifically, I need to include a "NIF" or "Customer ID" field, as it's mandatory for invoicing in Spain. I know this can be done in Zoho Inventory,

    • Introducing Zoho CRM for Everyone: A reimagined UI, next-gen Ask Zia, timeline view, and more

      Hello Everyone, Your customers may not directly observe your processes or tools, but they can perceive the gaps, missed hand-offs, and frustration that negatively impact their experience. While it is possible to achieve a great customer experience by

    • API Self Client Authtoken conversion always returns "invalid_client".

      I am having a problem when trying to convert an Authtoken to OAuth for a Self Client script.  I have made sure that the client Id, secret, and organisation are correct, and the domain is definitely ".com"/ This is the python code I am using to create

    • [Webinar] Live demos and user Q&A with Zoho Writer product experts

      Join us on June 12, 2025 for live demos based on your use cases and real-world scenarios raised via form. This is also an opportunity to get your questions answered directly by product experts from the Zoho Writer team. Webinar agenda Live demos based

    • My client requires me to have custom pdf file names to except payment for invoices, how can I customize this before emailing.

      Hello! I love the program so far but there are a few things that are standing in the way. I hope you guys can code them in so I can keep the program for years to come. My client requires I customize the pdf file names I send in for billing. Can you please

    • Schedule mass emails, view mass emails status and more!

      Hello everyone, Mass emails help you communicate with multiple customers in a couple of clicks. We have introduced a Mass Emails dashboard in Bigin so that users can see the status of the mass emails like how many emails were opened, clicked and bounced.

    • Multiple Selection/Select All for Approvals

      I have a suggestion from users regarding Approvals. In our environment, our Regional Managers can receive multiple requests for Approval or Rejection. They find it tedious to approve (or reject) each individual record. They would like to have a way to

    • How to report and analyze a multi-select field entries distinctly ?

      As many of CRM users I have many multi-select fields that allows me to choose more than one chose in one cell for a specific filed Like: Field A - A;BC - A;C -B;C But when reporting the field it will handle each cell as a "String" not multiple entries

    • Merge invoices

      This has come up three times in a month of me using the system. a client whom i do work for on a regular bases asked me to invoice separate jobs on a single invoice. I would then go and cancel the old invoices and make a new one. It would be great if i could just select the invoices and click merge to create a single invoice.

    • Zoho CRM Two currencies on one record

      Hello all, Our country is planning to transition to Euro from our local currency. The government is planning to mandate that all companies show their invoices, quotes, etc. in both currencies for a period of one year in order to protect from speculation.

    • How to get values from both tables in Join in COQL query in Zoho API

      In this below query I can get value either from Deal Table or from Contact table. If I wanted data from both the table it is not working. Can you please help me with this. Thanks in advance. {     "select_query": "select ,A.Deal_Name,B.First_Name,B.Last_Name,

    • 【Zoho CRM】日時のフィルター機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、各タブで利用可能な日時のフィルター機能のアップデートをご紹介します。 日付項目と日時項目のフィルター及びカスタムビューに、「前へ(Previous)」「次へ(Next)」の選択肢が追加されました。 ⬛︎[前へ(Previous)]：作成日時に基づきレコードをフィルターにより抽出する場合 例1. 前へ6ヶ月：当月を除く直近6ヶ月間のレコードを抽出 例2. 前へ3年：今年を除く直近3年間のレコードを抽出

    • How can I notate on check stub when a vendors credit has been applied to an invoice payment?

      I'm looking for a way of printing vendor credit memo use on a check stub when its been applied to other invoices. To let my vendors know I'm using credit memo XYZ in the amount of $xx.xx. Currently I am having to handwrite it on the stub to show my vendor

    • Is there a Waiting Room Before The Webinar Starts?

      It appears that there is no waiting room before a webinar starts. For example, with most webinar software you can collaborate with your co-presenter, set up your presentation and check to make sure everything sounds right before you go live. Zoho Meeting/Webinar

    • Optimizing Zoho CRM Integration – Tips & Insights Needed

      I hope you're all doing great! I'm currently working on integrating Zoho CRM with our platform, which helps users get iPhone Free of cost through verified government programs. Everything's coming together nicely so far, but I'd really appreciate some

    • Next Page