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 the Zoho CRM Lead Magnet plugin for Wordpress

      In this digital era, websites are the most important source of leads. That means your CRM system should be well integrated with your website to contextually capture each and every visitor to turn them into a lead. Introducing the Zoho CRM Lead Magnet plugin for WordPress.  The plugin lets you to: Create webforms using Zoho CRM forms/ Contact form 7 plugin Embed them in your website hosted using Wordpress Automatically capture leads into Zoho CRM with zero attenuation. Not only is the integration

    • Team Modules in Zoho CRM: Empower Every Team, Break Silos and Boost Collaboration

      Hello Everyone, The ultimate goal of every business is to achieve customer delight—and achieving customer delight cannot happen with the effort of a single person or team. At Zoho CRM, we believe that it’s a shared mission that spans across your entire

    • Trying to integrate gmail but google keeps blocking Zoho access for integration??

      hi i am trying to integrate a gmail account so can track/access business emails this way. I have followed the instructions but after selecting my email account it gets re-routed to this message (screengrab below) Can anyone advise a way around this or

    • Zoho Projects - Give Project access to developer (external)

      We have a client using Zoho Projects and would like to invite several external users and assign the Projects because the Project tasks are outsourced to other companies. What is the best way to give access to external Users and is there any limitations

    • Introducing the Germany Tax Edition !

      Whether you're operating within Germany, trading outside the country, or dealing with customers within or outside the EU, our new Germany Tax Edition makes navigating the complexities of VAT management a cakewalk. Our Germany tax edition allows you to

    • Centralized Organization Information Management in Zoho One

      Dear Zoho One Support, I'm writing to propose a feature that would significantly improve the user experience and streamline data management within Zoho One. Current Challenge: Currently, managing organization information across various Zoho One apps requires

    • Including attachments with estimates

      How can attachments be included when an estimate is sent/emailed and when downloaded as a .pdf? Generally speaking, attachments should be included as part of an estimate package. Ultimately, this is also true for work orders and invoices.

    • Add Hebrew Support for Calendar Language in Zoho Forms

      Dear Zoho Forms Team, Greetings! We are using Zoho Forms extensively and appreciate its versatility and ease of use. However, we’ve noticed that the Calendar Language settings currently do not include Hebrew as an option. We would like to request the

    • Company centric layout

      Hey everyone, I want to have an "account-centric" Zoho, where the main part is the "Account" and other parts like "Contacts", "Deals", "Projects" are linked to this "Account". Tricky part is, that I have different layouts for different departments, and

    • CRM HAS BEEN SOOO SLOW For Days 05/15/25

      I have fantastic Wifi speed and have zero issues with other websites, apps, or programs. It takes an excruciatingly amount of time to simply load a record, open an email, compose an email, draft a new template, etc. Am I in a subset/region of subscribers

    • Announcing Zoho Community Developer Bootcamps in India – Catalyst by Zoho

      Hey everyone! Following the success of the first set of bootcamps on SalesIQ Zobot and Extensions last year, we're ready for the next set of bootcamps—this one dedicated to Catalyst by Zoho! These bootcamps are aimed to empower developers to build, scale,

    • Introducing the Zoho Show Windows app

      Hello everyone! We’re excited to announce the launch of the Zoho Show app for Windows! You can now create, access, collaborate on, and deliver presentations right from your desktop. The Windows app brings you all the powerful features you’re familiar

    • New Action Requests

      Hi, Is there any chances to get the new actions requested at all? I have made a few requests but never heard back from Zoho about them. I assume that developing them take time but is there any support that can provide some update? Thanks

    • Workdrive - copy permissions

      I am trying to customize sub folder, which I understand fully from below https://help.zoho.com/portal/en/kb/workdrive/team-folders/manage/articles/customize-folder-permissions-in-a-team-folder#Customize_permissions_during_folder_creation However I want

    • US military addresses

      When we have a client with a US military address having them fill in a form is a problem Zoho forms doesnt acommodate them correctly. It doesn't make sense for me to have to create a secondary data model for military addresses. I have placed some links

    • Introducing 'Previous' and 'Next' operators for enhanced date-based filtering

      Hi everyone, We are excited to introduce to you two new operators - Previous and Next - for your date and date time fields in filters as well as in custom view. For starters, let’s say you want to filter records based on Created Time: Previous 6 months:

    • Same users on different accounts

      I have an issue I need help with. Whilst trialing ZOHO CRM I created the following: Account1 using myname@myorganisation.com.au and 2 personal emails Account2 using a personal email and 2 users sales1@myorganisation.com.au and sales2@myorganisation.com.au

    • Multi-Sort Functionality, Projects List

      It is proving so hard for us to manage any kind of decent view into our Active list of projects (which now hovers between 150 and 225 at a time).  In addition to my other suggestion here (which hasn't had any activity in a year), I'd like to suggest that

    • Power of Automation :: Automatically update the Work hours of a task based on Custom field Value

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • Zoho Sites is unusable

      What a terrible user experience sites is buggy and incredibly slow with creating site.  it hangs with please wait with spinning circle A LOT.  can't add blog page  can't add logo (yes it's not larger than 500 pixels) can't even add a new page It either does nothing (with no error message as to what is wrong) or you get the darkened screen with the please wait with the spinning circle that never goes away...I've even left it for 5minutes or more just to see if it was slow or just doesn't work...and

    • Why the home page "Income and Expense" graph only shows some Expense Accounts but not all

      I see that the graph only shows expenses from some Expense Accounts. Why and how can I change that? I'm new to Zoho Books and accounting. Thank you!

    • Introducing Seamless Communication with WhatsApp Integration in Zoho Recruit

      Hello everyone, We are thrilled to announce that we have just launched an incredible new feature in Zoho Recruit that will revolutionize your recruitment process. With the integration of WhatsApp into Zoho Recruit, you can now seamlessly connect with

    • How do you map a user picklist field to another user picklist field.

      In Zoho Projects, I'm trying to map a custom field (user picklist) in Task Details to a field (user picklist) in the Project Details. How do you get the two to map to each other? This is what I currently have that works for my other fields but doesn't

    • how do i add a hyperlink to a ticket submitted to zoho desk via zoho forms integration?

      hi there! my team uses zoho forms to collect information needed to complete a ticket. we use the zoho forms integration with zoho desk. two of the fields capture urls that the submitting teams fill out in the public facing form. when the ticket reaches

    • If Formula with Abs and Now included!

      Hi all, Having a bit of trouble with an If formula when creating a formula field with currency return type. This is what I've got: If(Now()>=${Agreement History.Rent Review Due}, '${Agreement History.Holdover Price}', 'Abs(${Agreement History.Rent Achieved

    • Sent mail blocked because of Domain/IP Reverse lookup conflict.

      Whenever we send an email through Zoho to one particular email server, all of our emails get blocked as spam because the sending domain does not match the server sending it according to the email header. I contacted the company blocking us and this is what they say: "The error is saying that your outgoing email server's IP address does not match the server name of the email server record for your domain. We do a reverse lookup on all the incoming email to make sure it is coming from a legimate source.

    • Weekly Tips: Avoid Duplicate Email Copies with Zoho Mail

      In everyday work environments, it is common to receive the same email multiple times when you're CC'd individually and also included through a group email address in the same message. This can overwhelm your inbox and make it harder to keep track of important

    • Please don't remove the option to modify tax.

      Hi, I saw that the option to customize tax will be removed. This is VERY PROBLEMATIC for US companies who ship to different states because each zip code in the USA has its own tax rate for a single product. This is an awful idea. Please don't take this

    • Zoho Connect App (Android)

      Hello Zoho Connect team, I've encountered a recurring issue with the Android version of the Zoho Connect app and would appreciate your assistance. I have created a group that includes both internal and external users. Everything functions as expected

    • Zoho CMR - How can we remove Public View in any module ?

      Hi Zoho  How can we remove some Public View in any module (or one by one) ? I read something about hiding but that's refers to Creator and I'm not there yet. :)  Thanks! Robert

    • ZohoOne suite

      Hi, i am trying to set service for managed service offerings, I was wondering if there was a way to manage that? I would be the service manager and have a company I would be managing as well. any help would be much appreciated. I have seen that different

    • 連絡先リストへの表示項目表示表示

      連絡先をリスト表示した際に、各連絡先に紐づく関連トピックや、配信リストをリストに表示させることはできますか？ できるのであればその方法を教えてください。

    • Format any date to match the user's locale settings with this Client Script

      A common problem in Zoho Client Script is a user's date format. On Create/Edit pages, Zoho will only accept a date if it matches the user's locale. Even if the date is in a correct format, or Zoho date format, user's can't save a record if the date format

    • Block incoming emails by shared mailbox

      Good morning, I will explain my problem to you At the moment I am making users open tickets only via email I would like users to send messages from their personal mailboxes and not from shared mailboxes I would also like if the ticket was generated by

    • Zoho Desk to Jira > Automatic Creation ?

      I've set up the integration for Jira and Zoho Desk, but when I create a test ticket as a customer nothing is sent to Jira automatically - is this correct ? I can manually link to Jira using the "More Actions", but I was expecting the issue to be created

    • Comparing 2 collections to make an action

      Salut, I have a customer form with a main phone number, and a secondary phone number. I have another form, a calendar, with a paste of the main phone number. I want to send a SMS to both phone numbers when the calendar event happen. I use the following

    • Automate Ticket Assignment to Contact or Account Owner Using Custom Action

      Teltroz Inc specializes in data science, data analytics, and big data technologies. Serving a wide range of customers from large to medium-sized businesses, security has been their top priority. The firm uses Zoho Desk to enhance their business operations,

    • how to remove email headers from Zoho Desk emails and replies from customers?

      I'm testing Zoho Desk at the moment ant noticed some very annoying with the emails that go back and forth, the email headers are always included on the conversation in the web interface and the customer also receives emails with these readers showing

    • File Upload and Add via API

      I've been attempting to upload to via the Files api and I have been hitting the wall with actually getting the file to attach. What type is the API expecting ? Base64 Encoded ? When I do I get a 414 Error. I would appreciate your help as I am currently

    • Add Pinned Tickets to top of queue

      As an IT Helpdesk, we have some tickets where they will need to be looked at daily over a week or 2, and the ability to pin a ticket to the front/top of the queue would be handy as we can be reminded to take a look, rather than placing them on hold and

    • Next Page