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

    • ZOho Booking and CRM integration.

      We are using Zoho Booking wiht Zoho CRM in a custom module. Inside our module we use the option to book a meeting with the customer. This part works great we feed the field to the URL and everything work 100%. Now my issue is that I was not able to find

    • cannot link my email to Zoho CRM

      We are reviewing Zoho as we heard it was an easy solution platform, but we have been trying for many days to get anyone at Zoho to schedule call to talk with us. We unsuccessfully have tried multiple times to link email to Zoho. We put in request for

    • How do I delete a test email address to which I am supposed to send a test email?

      How do I delete an email address added to a test email recipient that is no longer needed due to resignation or other reasons?

    • Happiness Feedback Report

      Hello,  I want to see all the feedback, which has been left on ratings in a report for all past tickets. Unfortunately, the pre-built happiness dashboard only lets you go back one month. When I create a report, I cannot add the column 'feedback' and I

    • Interest on late payments

      Is this ever going to be implemented on Zoho Books?  It's particularly annoying as its been working so well on Zoho invoice for the last year or so.

    • Awful audio quality

      Hi guys I'm using Zoho Cliq (paid) with my team (remote team : France, Madagascar and Tunisia). Unfortunately, we encounter issues everytime on audio call (and more when we use screenshare) with sound quality, audio lag, etc. We spend loooot of time to

    • How do I see what participants see when I am app sharing in a meeting?

      How do I see what participants see when I am app sharing in a meeting? In my view, I only see myself as active, but not the app (keynote on mac)

    • Items: Custom lookup field with values from a custom module?

      Use case: I have created a new custom module called Makes to hold the names of thousands of different manufacturers. I am trying to create a custom lookup field for Items that uses the custom module. I am not able to select the custom module for the lookup

    • Canva Integration

      Hello! As many marketing departments are streamlining their teams, many have begun utilizing Canva for all design mockups and approvals prior to its integration into Marketing automation software. While Zoho Social has this integration already accomplished,

    • Clone Entire Zoho Boooks Organization, including all transactions for testing & training

      Can Zoho Books support help with direct cloning of entire Zoho Books & Inventory Organization? including all transactions, just like a copy & paste or disk cloning. Is this possible?

    • Can't change login email address in zoho books.

      Hello, Does anyone have any idea how to change login email in zoho books?

    • Zoho Site Vs. Wordpress website - which is better ?

      Hi I  have a Wordpress website  hosted at hostgator.   I use zoho CRM  for leads , customers, scheduling , etc.  I am considering moving my website to zoho sites.  What are advantages  and disadvantages to using zoho site compared to a wordpress website? On a scale of 1 to 10 ,  how good is zoho sites?    zoho sites with being found by potential customer searching the web for products , services? I sell and service business phone systems into local markets in California. My goal would be to increase

    • Bank Reconciliation Reports Do Not Have the Requisite Information Needed for a Proper Bank Rec Report

      Basic accounting practices for bank reconciliations dictate that bank reconciliation reports have the following components: Date or Period of Reconciliation: The report should clearly state the date for which the reconciliation is being performed, typically

    • How to record chargeback in zoho books?

      Hi all, Does anyone know how to record a chargeback transaction in zoho books? Thanks, Mo

    • workflow fields before assigning the ticket when the client opens the case by email.

      I want to create a workflow that forces the technician to complete the mandatory fields before assigning the ticket when the client opens the case by email.

    • Answer to wrong email address

      Hi Everybody! When we receive a customer request (let's call him Peter) on our info@abc.com mail address, we manually forward the email message to Zoho desk (support@). Of course, sender of that message is info@abc.com and Zoho opens a new ticket with "info" as the contact name and info@abc.com as email address (nobody can blame Zoho for doing that). We then edit the ticket and fill in contact name (Peter), account name (Peter Ltd) and email address (peter@mail.com) of the customer. When we answer

    • Zoho Desk nog sending true Gmail

      Desk isn't sending our outgoing e-mail anymore. We can still receive e-mails but not send. I reconnected the email again and disabled the 2FA (to test). If I choose the Desk generated outgoing email address it works just fine. Please assist.

    • Add Hebrew Language Support for Zia Auto-Tag in Zoho Desk

      Dear Zoho Desk Team, We hope this message finds you well. We are currently utilizing the Zia Auto-Tag feature in Zoho Desk, which has proven to be quite valuable for categorizing and organizing tickets based on their content. However, we’ve encountered

    • Footer: Zoho make a big downgrad with new footer option

      Every post about the new footer function is negative and all say: its a big downgrade. The idea behind this new function was: Make it more simple. Great, now its faster and more simple to add an footer. But nobody from zoho team think about the more bigger

    • Need help with Zoho Billing/Subscriptions API

      Hello, We need help in figuring out which APIs to use in the following scenarios to process customer payments and manage subscriptions. When 14 days trial period is over and subscription status in Zoho changes to "TRIAL_EXPIRED" , customer comes back

    • Multiple Filters? Question answered many times, but never satisfactorily

      Hi. I love Zoho Creator.   However, I would like to know more about creating a view that allows users to easily filter the records, using several filters at once.   I know many people have asked this before, and mostly the answer given is "Use the search function, and search in each column for the required parameter"   However, this is not a satisfactory solution for a number of reasons:   1) You have to know the exact value to search for (sometimes the value might be a two or three word answer)

    • Sendmail with filtered report as attachment - Best practice ?

      Salut, I am scripting sendmail workflows with reports attached. I need those reports to be filtered. For example, a 10 subrows order would have 3 different suppliers, and I want those 3 suppliers to receive a copy of the order with only the subrows related

    • Issues w/ Screen Share & Accessing via Mobile Web Browsers

      1. How do I share my screen while still seeing video of myself & paticipants without rebroadcasting the participant video feeds? All other video conferencing tools provide this feature so not sure if it's a setting I'm missing or a programming oversight. 2. How do I know what screen/application I'm sharing? After selecting the screen/application a notice appears however it is appears on the wrong screen leading to confusion about what participants can actually see.  3. How to I allow participants

    • Time Limited Coupon or Expiring Link in Workflows

      I would like to see a feature where I can include a time limited link in Workflow Campaigns. For example: I could link to a sales page with a discount and set the link to expire after 24h. The link would be generated by Campaigns for each campaign sent

    • Option to duplicate views ( ticket and others)

      Hello, I would like to ask for the option to duplicates views, especially ticket views. Often we need to use the views for very particular information, including filtering out custom data. It would be great to allow duplicate an existing View, so it can

    • Option to copy/duplicate Custom Ticket views

      Hi Team, Hope you're all well. I was wondering if you would consider a feature on Custom Ticket views: The option to copy or duplicate an existing custom ticket view It would help tremendously for views with a lot of criteria that could be reused multiple

    • Democratize data visualization across your organization using Chart View in CRM

      Hello everyone - As part of CRM for Everyone, we've introduced a whole new set of features. This announcement will focus on one of them: Chart View. Why did we add this view? To put insights directly in the hands of the people closest to the action. Here's

    • Will Zoho implement DANE?

      I know that setting up DNSSEC and DANE is quite a risky process. But it will improve email security. With DANE, a server can verify a SSL certificate before connecting to the server. There are some RFC related to DANE which can be found here: DNS-based

    • How do I stop Notifications in Mail?

      How does one turn off notifications for our Mail accounts? Why is an answer to such a basic question impossible to find in this community forum? Also, could you point us to the most current user guide so we don't have to spend time asking such fundamental

    • Turning off self view in Zoho Meeting

      Hi Is it possible to turn off/hide self view in meetings?  Cant see any options for it. Thanks

    • Is it possible to hide self view in Zoho Meetings

      Hi - I want to hide my camera view when conducting meetings in Zoho Meetings.  Most of my meetings are one to one with clients & I prefer to focus on them them on the screen? I've searched and cant find any options for this? Thanks Ro

    • Darshan Hiranandani : Can I hide my self-view in Zoho Meetings, and if so, how?

      Hi everyone, I’m Darshan Hiranandani, looking for a way to hide my self-view during meetings in Zoho Meetings. I find that seeing my own video feed can be distracting, and I’d like to know if there’s an option to hide or disable it. Could anyone provide

    • mx.zoho.com servers blacklisted by UCEPROTECTL3

      Hello, An MXtoolbox check for my domain showed that UCEPROTECTL3 has blacklisted all three of the zoho MX servers. I am unable to sign up for Zeptomail service for our company transactional emails until this issue is resolved. But this is out of my hands.

    • How to integrate Zoho CRM, Zoho Forms and a WIX Web Site

      Attached video demonstrates how to use Zoho Forms included in Zoho One, to design a Contact Us form to be embedded into a WIX web site and integrated into Zoho CRM.

    • Events on Calendar disappeared

      hello, Events (e.g. repeating events) disappeared on my calendar for Wed, Oct 2, which led to missing some meetings on that day. What exactly is wrong? This is not the first time this is happening! Please, fix this calendar issue.

    • FICHIER FEC - ZOHO BOOKS

      J'ai testé le fichier FEC, disponible depuis quelques semaines dans zoho books pour les sociétés françaises. C'est une grande avancée car nous allons enfin pouvoir importer facilement (sans avoir à réaliser de complexes rapports dans zoho analytics) la

    • ERROR CODE :550 - Your message to <xxx@xxxxx.xx> was classified as SPAM.

      Hey Team, I'm using Zoho Mail with my own domain, and from some of the recipients I'm receiving following error message: ERROR CODE :550 - Your message to <xx@xxxx.xx> was classified as SPAM. Please add more content, cut down on HTML links, use fewer

    • Allow 3 Subforms in a custom module

      We have many custom modules in CRM and every now and then we need more than 2 subforms for a module We are on Zoho One Plan Can you please increase the subfrom limit from 2 to 3 Our current workaround is to create a solution in Zoho Creator and embed

    • Time Zones

      Hello, Is there a way to add a time zone in a Deal related to "bid due"? We work on projects across the world and even though some things adjust to my own time zone, I have found that any dates we manually enter - Bid Date, RFI Due Date, etc. do not appear

    • Create Zoho Project and assign a contact without account

      I’m trying to automate the creation of new projects in Zoho Projects using Zoho Flow. In my setup, I often need to assign projects to individual contacts who don’t have an associated Account/Company in Zoho CRM—just a personal contact. When I create a

    • Next Page