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

    • Customizing Helpcenter texts

      I’m customizing the Zoho Desk Help Center and I’d like to change the wording of the standard widgets – for example, the text in the “Submit Ticket” banner that appears in the footer, or other built-in widget labels and messages. So far, I haven’t found

    • Zoho Desk - I am no longer receiving email notifications when comments are made on tickets

      I still receive other notifications via email (e.g., new tickets and replies) - however beginning May21, I no longer receive notifications on comments (whether private or public) - I have confirmed that notifications are toggled on for agents within system/notification

    • Issues with Campaign Results Sync Between Zoho Campaigns and Zoho CRM

      Hi everyone, I’m experiencing an issue with the integration between Zoho Campaigns and Zoho CRM. When I send campaigns from Zoho Campaigns, the results shown in Campaigns (such as the number of emails sent, opened, and clicked) do not exactly match the

    • Greek languge

      Hello, Is there any support for Greek language in the near future?

    • Import records with lookup field ids

      Hi Is anyone able to import records into Recruit via spreadsheet / csv which contain ids as the lookup values. When importing from spreadsheet lookups will associate with the related records if using record name, however when using related records id

    • Custom module history is useless

      Hi I am evaluating ZOHO DESK as my support platform. As such I created a few custom modules for devices assigned to employees. I want to be able to see the whole picture when a device was reassigned to someone, but the history shows nothing Is there any

    • Email rejected per DMARC policy

      Hi, We've got the return message from zoho like 'host mx.zoho.com[204.141.33.44] said: 550 5.7.1 Email rejected per DMARC policy for circlecloudco.com in reply to end of DATA command' We're sure our source IP address matches the SPF the sender domain

    • EMail Migration to Google Apps is Too Slow

      We are moving to Google Apps and the email migration is really slow. Anyway you guys check if this is a server issue?

    • How to import subform data - SOLUTION

      To all trying to import subform data, I might have a solution for you. First of all, for this solution to work, the subform data needs to be an independent form (not ad hoc created on the main form). Furthermore, this approach uses Excel sheets - it might not work using CSV/TSV. If this is true, then follow these steps: Import the subform records Then export these records once more including their ID Now prepare an import file for the main form that needs to contain the subform records Within this

    • Help center custom tab - link color

      I’m trying to add a custom tab to the main navigation in the Zoho Desk Help Center, for example to link to an external resource like a website. The problem is that any custom tab I add always shows up as a blue link – it doesn’t match the style of the

    • Organization API: code 403 "Crm_Implied_Api_Access" error for "https://www.zohoapis.com/crm/v2/org"

      Hello. I've developed an add-on that allows clients to synchronize data from Zoho CRM with the Google Spreadsheet. I am using the OAUTH2 protocol, so clients will have to authenticate into their Zoho account, and Zoho will send back to the app an access token which will be used to get data. Currently, there are about 100 clients, and everything works smoothly. Today I've found that a guy who could become a new client was not able to to get his organization data, because the application receiving

    • Pick list - Cannot save list "Special Characters not Allowed" error message

      Bulk uploading values. All values are pretty standard - with the exception of a "-" (dash). Like:  Industry - Prepared Food Is the simple dash a special character too? Jan

    • Zoho Projects API Error - API v3; Always HTTP 400

      Below I have uploaded my .py file I'm using: Always returns with response 400 :(( Console Logs: (venv) PS C:\Users\sreep\venv> python .\TimesheetBuddy.py Token file not found. * Serving Flask app 'TimesheetBuddy' * Debug mode: off WARNING: This is a development

    • Inquiry: Integrating In-house Chatbot with Zoho Desk for Live Agent Support

      Hi Team, We are exploring the possibility of integrating our existing in-house chatbot with Zoho Desk to provide seamless escalation to live agents. Our requirement is as follows: within our chatbot interface, we want to offer users a "Talk to Agent"

    • Zoho Mail will not set up in Thunderbird

      I am using Thunderbird 13.0.1 in Linux Mint 13 64-bit.  I cannot set up my Zoho IMAP email in this client.  This is evidently a common problem as evidenced by these postings in the Thunderbird forum: thunderbird can't seem to "find the settings" I cannot configure it for my zoho.com email account I can not get ZOHO to configure. Any suggestions? The best T-bird seems to be able to do is to refer these users to the Zoho forum. I believe the instructions in the Zoho help wiki are correct, although

    • Introducing an option to set comments to public by default

      Hello all, Greetings! We are pleased to announce that Desk's user preferences now brings an option to set a comment type as Public or Private by default. In addition to setting reply buttons as defaults, Agents or Admins can now choose to make their ticket

    • Increase size of description editor when creating new ticket

      Please can you consider making the description editor in the create new ticket form a resizeable area as by default, it is very small and there appears to be no way to increase the size of it.

    • Flutter Plugin Compatibility Issue: Unresolved Reference to FlutterPluginRegistry in zohodesk_portal_apikit

      I am integrating the zohodesk_portal_apikit Flutter plugin (version 2.2.1) into my Flutter project, but I am encountering a build error related to an unresolved reference to FlutterPluginRegistry in the file ZDPBaseActivityAwarePlugin.kt. Below is the

    • I need my MFA number. I am trying to log into my CharmEhr. account and I can't get in. Everytime I try to sign in, it says to enter my MFA #. I don't have it.

      Need an MFA #

    • CRM Plus Accounts and Products relationships

      Is there a way that an invoice that is paid, would add the products to the account record once it is delivered? I want to find an easy way that products will get added to the account record and assumed this would work. The benefit here would be that I

    • "Super Admin Login as Another User" for Zoho One

      Dear Zoho One Team, We would like to request that the "Super Admin Login as Another User" feature be extended to Zoho One, allowing Super Admins to access user accounts across all Zoho One applications. We understand that this functionality is currently

    • Workflow for Creator App

      I am new to coding but doing pretty good with internet searching and ChatGPT but I have hit a major roadblock. What I am trying to do is have a sub-form populated with data from a form based on selected variables. I know this is possible because a guy

    • Subform dynamic fields on Edit, Load of Main form.

      Main Form: Time_Entry Sub Form (separate form): Time_Entries Time_Entries.Time_Entry_No is lookup to - Time_Entry.Time_Sheet_ID (auto number). I would like to disable some of the subform fields upon load (when edited) of the Time_Entry main form. What

    • Find all forms/fields containing a lookup field related to a specific form

      Hi, I'm trying to find all forms and the specific lookup fields they contain that are related to my Contacts form. I need to be able to do this programmatically (I know how to find this information using the schema builder). I've pulled the metadata for

    • Introducing the Eventbrite extension for Zoho CRM

      Hello Zoho CRM community, Are you struggling to keep your event registrations and attendance data organized across multiple platforms? Managing this information manually can be a frustrating and time-consuming task, and mistakes can easily occur, making

    • Deactivate Zoho CRM for everyone

      We would like to deactivate Zoho CRM for everyone. How can we do that?

    • Can I embed Zoho Project in Zoho CRM Record Detailed View

      Hello all, We use Zoho Projects a lot. The integration of Projects with Accounts and Deals only is great, but very limiting to our needs. Is it possible to either: add a project to related lists to custom modules - similar to how it is automatically added

    • COMPLAINT : Sleeping & Useless Support Team. GMail is better then..

      [## 118256452 ##] License upgrade issues: As a reseller, I tried to upgrade 1 license for my customer. It shown error. Raised complaints via Email/Chat/Phone support. Its been more than a week, still keep asking damn questions and comfirmations on once

    • Introducing the Reviews sub-module in Zoho Recruit

      Across every recruitment process, candidates are assessed by multiple stakeholders—recruiters, interviewers, hiring managers, and clients. These evaluations influence hiring decisions, yet they often exist in silos across assessments, emails, or interview

    • Unable to add a organization with US location

      I have created a Zoho Books trial account and since I am using Zoho People and payroll, Zoho Books has taken my existing credentials and created an Indian entity, but I am not able to add a US entity. How to add a US entity?

    • Two-Way Sync Zoho CRM Custom Module with Zoho FSM Company Addresses

      Business fact: Many companies don't just have one location. They have multiple locations (some have many), with addresses we need to know for service, deliveries, etc. We have created a custom "Sites" module in Zoho CRM to store an Account/Company's addresses

    • Meet the latest feature of Zoho Sheet: Lock Cells

      We are happy to announce the release of one of the most awaited features in Zoho Sheet. ​You can now lock the cells that you wish to keep ​secure. Once you are done with editing cells, you can lock them so that they won't be modified anymore. We believe that this feature will be a great addition to our existing set of collaboration features and is intended to improve your collaboration experience. You can access this new feature Lock from Data tab. Apart from being able to lock individual cell ranges,

    • Error message when creating group

      I get two error messages when creating a group. One says it already exists, but it doesn't not already exist. See screenshots.

    • What are the benefits of procurement software in a growing business setup?

      I’ve been exploring tools that can help automate purchasing and vendor-related tasks. I keep hearing about the benefits of procurement software, especially for businesses that are scaling. I want to understand how it helps in streamlining operations,

    • Add Desk Account comments using Flow

      The triggers and actions for Zoho Desk available in Flow are quite extensive, but I don't see anything related to Account-level Comments. There are actions to add comments to Tickets, Contacts, Tasks, and Topics, but nothing for Accounts. Am I missing

    • workflow field update will Not triggering another workflow rule

      I have a Workflow rule that is supposed to get triggered when a field is modified to certain value. This field is actually the lead status and when the lead status changes to "Client Not Responding" . I have a series of emails that go out to re-engage

    • Critical Feature Gaps Between Zoho Books and Zoho Finance Module in CRM

      We are extensively using Zoho Finance Module in our organization because of The Record Sharing feature provided by CRM something thats not possible in Books, we are able to limit what Sales Orders, Purchase Orders, Estimates an employee can see based

    • Disable Refresh, or hold info after refresh.

      Is there a way to hold the info entered in a form if the page refreshes, or to disable refresh of the form.

    • changing the Delivery Challan Heading

      Hi We want to change the Delivery Challan Heading as per our requirement. Like Returnable/Non Returnable/Delivery challan. But it is not happening here. is it possible to change advise. Thanks Radha

    • ZohoCRM上での接触回数の集計や評価について

      当方toB営業を行う会社なのですが、 顧客ごとの接触手段と接触回数を蓄積してKPIや評価指標としてレポーティングしたいのですが、どのタブでどのような運用をするのが適切でしょうか。 商談タブ、取引先タブ、連絡先タブそれぞれにおいて運用方法を考えましたがイメージが湧かず、ご教授いただければ幸いです。

    • Next Page