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

    • Collect in-app feedback with richer context and granular insights

      Hello, Apptics community! From GenAI chatbots to one-tap checkouts, user experience standards keep rising—yet 96% of unhappy users never explain what went wrong; they simply leave. Introducing in-app feedback 2.0 banner In-app feedback 2.0 is here to

    • Temporary restiction

      My account says You have been temporarily restricted from publishing jobs from Zoho Recruit.Click here to request a one-time approval to publish your jobs and when I go to click it shows error. Kindly assist.

    • Help with Quote template for peer review

      We are wanting to do peer review of quotes/proposals, however the quote templates dont have product cost, profit margins, etc. It is difficult for a manager to approve a quote without ensuring nothing is going out at improper margins, etc. I have not

    • India Tech Support

      Is there no phone tech support number for India? And no chat facility either?

    • How many AR fields We can add in a form?

      I want to add at least 10-15 AR fields in a form. I just want to know is there any limit on the AR fields or do I need to pay extra money for using 10-15 AR fields. Thanks in advance.

    • Agent working hours

      Hi, I know it is possible to set company business hours but is it possible so that agents can have different ones? I.e. some agents cover later hours on specific weeks - can these be set so those agents that are "working" get notified about tickets etc. 

    • Disallow CLOSE if tags field is empty

      I want to introduce a mandatory condition that NEW tickets (not prior closed tickets) cannot enter the CLOSED state without first having an entry in the tags field. Is there a way I can do this?

    • Central de Ajuda - Restringir visualização de tickets

      Estou tentando configurar o Zoho Desk para que determinados usuários dentro de uma mesma conta consigam visualizar apenas os tickets criados por usuários específicos dessa conta — e não todos os tickets ou apenas os seus próprios. Até onde sei, existe

    • Business Hours with lunch break

      Our business hours are: mon - fri 08:30 - 13:00, 15:00 - 18:30. How can I handle the lunch break? If I use 8:30 - 18:30 it obviously breaks SLA. Thanks

    • Default/Private Departments in Zoho Desk

      1) How does one configure a department to be private? 2) Also, how does one change the default department? 1) On the list of my company's Zoho Departments, I see that we have a default department, but I am unable to choose which department should be default. 2) From the Zoho documentation I see that in order to create a private department, one should uncheck "Display in customer portal" on the Add Department screen. However, is there a way to change this setting after the department has been created?

    • Ask the Experts 21: Power up your support game with Zoho Desk Automation

      " In every business, there are tasks to automate, Zoho Desk helps with features that integrate Assignments to manage tickets and teams to align,Macros for quick actions and workflows to streamline Contracts and schedules to hold things tight, Plans run

    • If leads are assigned to a person before 4:00 PM and the stage is "Fresh Lead", then an email should be triggered at 4:00 PM to all assigned users. If leads are assigned after 4:00 PM and the stage is

      If leads are assigned to a person before 4:00 PM and the stage is "Fresh Lead", then an email should be triggered at 4:00 PM to all assigned users. If leads are assigned after 4:00 PM and the stage is "Fresh Lead", then the email should be triggered the

    • Multiselect lookup in subform

      It would be SO SO useful if subforms could support a multiselect look up field! Is this in the works??

    • Tasks as calendar events? What about a way to verify a meeting actually happened?

      I'm not sure how to best ask this, but i'm looking to add some guard-rails into zoho for the end-user. However for guardrails to be effective they can't really add extra steps for the end-user. i.e. every step that's added for the user, is another place

    • Attachments should sync between Zoho Finance in CRM and Zoho Books

      It would EXTREMELY helpful and practical if the attachments added to an invoice via Zoho Finance in CRM synced with the invoice updates in Zoho Books. Currently, attachments to an invoice updated in CRM DO NOT appear as attachments when viewing the same

    • Introducing a new home page view and UI enhancements for Dashboards

      Hello everyone,  In CRM, the home pages provide a quick view of the various happenings in a business with the help of dashboards. The home pages also help to organize one's and the team's day's work. There are three views in the home tab: Classic User's

    • Translation support expanded for Modules, Subforms and Related Lists

      Hello Everyone!   The translation feature enables organizations to translate certain values in their CRM interface into different languages. Previously, the only values that could be translated were picklist values and field names. However, we have extended

    • Call result pop up on call when call ends

      I’d like to be able to create a pop up that appears after a call has finished that allows me to select the Call Result. I'm using RingCentral. I have seen from a previous, now locked, thread on Zoho Cares that this capability has been implemented, but

    • Data Template Amending

      Hi, is it possible to remove data templates once you have applied them in Workdrive? Also, once I have added a new field to a data template can I mass update multiple files who have already been allocated that template and amend just that one added

    • Zoho Flow y subformularios de Zoho CRM

      Buenas tardes, En mi empresa vamos a empezar a usar los subformularios de zoho crm pero estos los voy a tener que rellenar con zoho flow ya que va a ser el encargado de rellenar dichos campos del subformulario. El problema es que a la hora de intentar

    • Recurring Invoices

      We are looking at moving our invoices to ZOHO Billing, I have started the trial period and like that I can et up for four different companies. The one feature we need which is mentioned in the documentation is Recurring Invoices so we can send our Rent

    • Implement Meeting Polls in Zoho Bookings

      Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement related to appointment scheduling within Zoho Bookings. Current Functionality: Zoho Bookings excels at streamlining individual appointment scheduling. Users can set availability

    • Zoho Projects App update: Arabic and Hebrew language support

      Hello everyone! In the latest version(v3.10) of the Zoho Projects iOS app update, we have brought in support to access the app in RTL(Right to Left) languages (Arabic and Hebrew). Note: RTL is yet to be supported on the Calendar and Gantt charts modules

    • I want to cancel @mention group in the notes in Zoho CRM

      Hi Everybody, I want to prevent people from mentioning a specific group in notes in Zoho CRM. We have one group called Team Sales, and although we've asked users not to mention groups, they still mention the group name. My workaround is to change the

    • 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.

    • How to install node packages in Zoho Creator cloud functions

      I wanted to create some functions which requires node packages like axios, fetch, multer etc., How and where can i install the node packages in Zoho creator to use it in Zoho creator Nodejs function.

    • Session "Ask Me Anything" Zoho France - Le 26 Juin 2025 14h à 17h (en Français

      Chers Utilisateurs, Vous cherchez à mieux comprendre Zoho CRM ou Zoho Desk ? Nos experts seront disponibles pour répondre à toutes vos questions lors de notre session Ask Me Anything. Rejoignez-nous ici pour en discuter en ligne. Pendant trois heures,

    • Option to Crop Existing Agent Image in Zoho One Directory

      Hello Zoho Team, We hope you're all doing well. We would like to request a small but useful enhancement to the Zoho One Directory. 🎯 Current Limitation At present, the system allows cropping an agent image only during the initial upload of an agent's

    • Introducing Sub-Accounts in Zoho Books!

      Hello Everyone, Sub-Accounts is LIVE! Yes, you read it right. The much needed and most requested feature is now live in Zoho Books. The sub-accounts feature in Zoho Books will help you to classify your accounts further which will give you a more detailed view of your accounts while running reports. You can create sub-accounts for the below Accounts: Asset Cost of Goods Sold Expense Liability Fixed Asset Other Asset Other Current Asset Long Term Liability Other Current Liability Other Liability Other

    • Sesión "Ask me anything" Zoho en Español - 26 de junio de 2025, de 14:00 a 17:00 (en español)

      ¡Hola Comunidad! ¿Quieres entender mejor Zoho CRM o Zoho Desk? Nuestros expertos estarán disponibles para responder a todas tus preguntas durante nuestra sesión "Ask me anything". Puedes comentar este artículo y durante tres horas, nuestro equipo estará

    • UI Update: We've Reorganized Invoice Settings

      Dear users, We’ve reorganized invoice settings to offer you a streamlined and intuitive experience when managing your subscriptions. Starting from 2 July 2025, subscription-related invoice settings will be accessible from a new page called Billing Preferences

    • Marketer’s Space – Automate Subscription Management for CRM Contacts Using Workflows in Zoho Campaigns

      Hello, marketers! Welcome back to Marketer’s Space. In this week’s post, we’ll look at how to simplify subscription management using Workflows for contacts synced from Zoho CRM in Zoho Campaigns. There are multiple ways to assign topics to your contacts:

    • CRM and Finance Tab - Add Invoice "Subject " Column

      When On a contact in CRM, and you click the Zoho Finace tab, how can I put in the invoice subject line? Or even a custom field for this.  We need to see what that invoice is for, without opening it.   If we have tons of invoices we need a way to quick

    • WhatsApp to shift to per-message billing from July 1, 2025

      Greetings Recruiters, If you’re using WhatsApp to connect with candidates through Zoho Recruit, there’s an important pricing change coming up that you’ll want to plan for. What’s changing? Starting July 1, 2025, WhatsApp is moving away from conversation-based

    • Implement full RTL support in Zoho Cliq, including text alignment and character positioning, regardless of the interface language.

      Dear Zoho Cliq Support Team, We are writing to request a significant enhancement to the current RTL language support within Zoho Cliq. Currently, while Zoho Cliq allows users to input text in RTL languages, the text alignment remains LTR, resulting in

    • Email Alerts with Affected Flow Details When Deprecating Modules in Zoho Flow

      Dear Zoho Flow Team, We would like to request an enhancement to the module deprecation process in Zoho Flow. 🧩 Current Limitation: Currently, when a module is deprecated by the Flow team: No email notifications are sent. There is no automated way to

    • are there Url parameters to group records in the report/view?

      There are URL parameters to filter records in target report.  Is there any way to group records in report by certain field, using URL parameters or embed report parameters? Or any other workaround, apart from creating second report for dofferent grouping?  Aim: I want to provide user a quick link to re-group embed report by different fields.

    • Setvalue() client script not working

      I have created a client script on the load the record(detail view page). I wanted to populate some default information in the single line field. for that I created the client script. below is the script: var field_obj = ZDK.Page.getField( 'Designation'

    • Power of Automation :: Automate Deal Status Update in Zoho CRM upon Project Completion.

      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:

    • Leverage the power of Zia (AI) to create Marketing Projects in Zoho Marketing Plus

      Hey everyone, Zoho's advanced AI assistant, Zia, now works with OpenAI to offer personalized marketing activity suggestions for your marketing projects in Brand Studio. With information such as your campaign's objective, duration, marketing channel types,

    • Next Page