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

    • 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

    • Update main form's Lookup value following the completion of a Subform within that same main form

      Hi, It's quite a simple request but I'm struggling with getting the deluge to work smoothly. In short, I have a main form (Place_New_Order). Public users will be able to use it. They have a subform to complete with their contact details etc (name, email,

    • ZOHO LOGIN PROBLEM

      Hello, my name is Bernice. One of the users in our company is having a problem logging into their system. They had two-factor authentication on their phone but unfortunately, they lost that phone. Now when trying to login to their Zoho people they are

    • New in CRM: Dynamic filters for lookup fields

      Last modified on Oct 28, 2024: This feature was initially available only through Early Access upon request. It is now available to all users across all data centers, except for the IN DC. Users in the IN DC can temporarily request access using this form

    • Sync Zoho CRM Events with Google Calendar?

      Hi, Is there a way to permanently sync all events from Zoho CRM with Google Calendar? I’ve seen that you can link Zoho CRM to Zoho Calendar and then connect Zoho Calendar to Google Calendar — but is there a way to sync existing and future events from

    • Pre-fill webforms in Recruit

      I don't want to use the career site portal (as I have my own already), but I would like to direct users to the application forms for each role, from my website job pages. Is there a way to pre-fill fields in Recruit application forms, so that I only have

    • image cover div or original aspect

      I changed my app's theme, and now when I return to the original theme, the images in my reports cover the entire div, whereas before they were displayed in their original aspect ratio. How can I change this? I can't find the option. I only see that you

    • Delete subform rows based on mainform input

      I took my first adventure in getting ChatGPT to write some code for me this weekend. I want to ADD new rows, UPDATE existing rows and DELETE existing rows based on the input of a mulitselect lookup in the mainform. ChatGPT produced this for me which seems

    • Des parcours WhatsApp simples pour engager vos prospects et les convertir durablement

      En tant que professionnel du marketing, il vous est sûrement arrivé de déployer des campagnes par e-mail, SMS, réseaux sociaux ou pop-ups, sans obtenir l'engagement espéré. Une situation frustrante, mais malheureusement fréquente. Vous vous posez sans

    • [Free Webinar] Learning Table Series - Smart Visitor Management with Zoho Creator—Built for Every Industry

      Hello Everyone! We’re excited to invite you to another edition of Learning Table Series, where we showcase how Zoho Creator empowers industries with innovative and automated solutions. About Learning Table Series Learning Table Series is a free, 45-60

    • Query about error on flutter build for android

      I am having this error when building flutter for android. https://pub.dev/packages/apptics_flutter i followed the instructions here, modified to work on gradle version 8

    • 【参加無料】6月ユーザー交流会 参加登録 受付開始（東名阪の3都市開催）

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 6月に東京 / 大阪 / 名古屋の３都市でユーザー交流会を開催します！ 各地域のユーザーによるZoho 活用事例や、自社活用・運用について参加者同士で情報交換が出来るグループワークなどを予定しています。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ※以下、記載順で開催予定 🟠 大阪ユーザー交流会 6/5(木) 18:00-20:20 ・会場：APイノゲート大阪 ・予定セッション ┗Zoho サービス活用事例：Zoho

    • Zoho Books Payroll

      How am I supposed to do payroll and pay my employees with Zoho Books? I think it's pretty strange that an accounting software doesn't have the ability to perform one of the most common functions in business; paying your employees. Am I missing something,

    • Zoho Finance Workshop 2025 is Happening Now!

      Hello everyone! 👋 We’re thrilled to announce that the Zoho Finance Workshop 2025 has officially started, and we've already wrapped up the event in Chennai, our home ground! After an amazing session, we're geared up to visit more cities in India and take

    • DORA compliance

      For DORA (Digital Operational Resilience Act) compliance, I’ll want to check if Zoho provides specific features or policies aligned with DORA requirements, particularly for managing ICT risk, incident reporting, and ensuring operational resilience in

    • DKIM cannot be enabled for the domain as no verified default selector present

      Can't get the DKIM working. May you please check my account (nksy.us) to see what's wrong?

    • Will Cliq support Streaming for AI / LLP resposne

      Currently LLM APIs stream the LLM response token by token, since waiting for the entire response takes usually ~ 7-10 seconds. Is there any intention in supporting streaming in the Cliq platform? Namely, I'd like to build a chatbot in Cliq and I want

    • Email address with + char is incorrectly invalid

      cannot enter contact with email address containing +, i. e. valid+email@example.com. this is a perfectly valid email address by but fails Zoho Campaigns validation. https://en.wikipedia.org/wiki/Email_address#Local-part

    • Amount Change -> Reason of update

      How can I setup the CRM so whenever the Amount field is being changed, the user who changes it needs to fill in a reason of change -> Could be a Subform entry or even a note. I'm happy to use any of available features -> Workflows, Functions, Buttons,

    • Zoho not receiving verification email.

      I developed a website registration page and need to send verification email. I am using sendinblue for sending out the verification emails. Somehow, the mail is not being received by the Zoho users. Gmail, outlook, yahoo domains works fine but when I try to send the mail to my Zoho account I am not able to receive the mail. Can you please let me know what might be the issue?

    • How to Save Token in CRM

      Hi, Is there any method that allow user save their token in CRM, otherwise I have to get token every time the function run.(Token expire each day)

    • Any simple way to setup an automation from Facebook Lead Forms to Zobot taking care of the conversation?

      Right now i have a simple setup live with Make.com sending a Whatsapp template message from Twilio to a Lead received from Facebook Lead form then a ChatGPT bot taking care of the conversation. But no CRM On SalesIQ i can't find a way to start a conversation

    • Automation#22 Track Ticket Duration at Specific Status

      Hello Everyone! Welcome back to the Community Learning Series! Today, we explore how Zylker Techfix, a gadget servicing firm, boosted productivity by tracking the time spent at a particular ticket status in Zoho Desk. Zylker Techfix customized Zoho Desk’s

    • Cliq 1.7.5 status icon doesn't update if there are unread messages

      Cliq 1.7.5 System: Ubuntu 24.04.2 LTS x86_64 Installed from the .deb package (cliq_1.7.5_amd64.deb / MD5: 10c5924911a2e90af012d564da670bf8) GNOME 46 Whenever I get new messages the status/notification icon remains unchanged (white icon without the red

    • Is there a way to customize the style of the success message - Advanced Web Form

      Is there a way to customize how the success message is displayed after a Zoho webform is submitted? We’d like the success confirmation to match the visual style and branding of our website, so we're looking for options to either apply our own CSS or replace

    • Zoho Desk app update - Initiate WhatsApp chat with pre-approved templates from ticket and contact details screen

      Hello, everyone! We are excited to introduce an option to send WhatsApp messages via IM(Instant Messages) using pre-approved templates directly from the ticket and contact details screen of the Zoho Desk app. In the ticket details screen, we have enhanced

    • Where to view user feedback on answer bot's "was this helpful?"

      We are trialing answer bot in our knowledge base and like what we see so far. One of the things we like is that upon answering a query, answer bot asks "Was this helpful?" (see attached). As part of our trial we've been responding to this by clicking

    • Is there a way to have a "Time only" field?

      I need a field that only captures the time.  I don't like the Date-Time field.  It is very clumsy for the user to input AND I need to sort by time separately.  PLEASE add a new field that is dedicated only for inputting time.  I don't need seconds just hours and minutes.  Bonus would be to change it from AM/PM to military/international time. What do we need to do to make this a separate field???   I don't want a work-around, I just need the field.  Is there someone out there that knows how to create

    • CRM Mail Merge Template copies OLDER version of the document instead of most recent version

      I have to make 60+ Mail merge templates in ZOHO CRM to use for editing in WRITER and then sending on to sign for signatures. So I have been working on 1, setting all the styling and automatisation right, and I want to use this one as a master template

    • Zoho Sprints Mobile 2.0 : La gestion de projet, réinventée pour vos déplacements

      Nous avons le plaisir de vous annoncer la sortie de Zoho Sprints Mobile 2.0 : une version revisitée de notre application, avec une interface modernisée, de nouvelles fonctionnalités puissantes et une navigation optimisée. Grâce à cette mise à jour, gérer

    • Allow Portal Users to log in using their mobile number.

      I want to allow portal users to log in using their mobile number. I referred to below documentation, but it mentions that this is only supported for Indian mobile numbers. Is it possible to enable login using a Singapore mobile number? https://help.

    • Zoho Webinar Android app update - Organizer chat

      Hello everyone! In the latest version(v1.4.0) of the Zoho Webinar app update, we have brought in support for the 'Organizers' chat feature. In addition to the existing public chat, co-organizers now have access to chat separately with organizers and attendees,

    • Task Due Time - Unable to Add

      I have taken a trial version to test, I could not find “Due Time” feature. Only Due date is given

    • Sign - Introduce a feature to make fields required based on conditions

      Add "Required" to conditional options for fields. Example: A Sign document contains 2 fields Company Type (picklist) Company Registration Number When "Limited Company" is selected from the Company Type, the Company Registration Number should become

    • Connect Zoho Creator on on prem database with databridge.

      Hi im new to zoho creator. Been through many forums and training clips but cant find a solution. 1. I have an on prem mssql server called "Sales" with a tabel called "Monthly" the server address is 10.0.0.10 2.i have Databridge installed on the server

    • Add a URL to a note

      I enter a lot of notes onto Account and Contact records. For example, I would like to add a note to a person with a link to their blog. When I paste the link into the note, it pastes ok, but it's not a "clickable" link. Is there a way to maintain the

    • Zoho webinar iOS app update: Introducing a dark theme, organizer's chat, emoji reactions, recording consent, and live answer on questions list.

      Hello everyone! In the latest version(v1.1) of the Zoho Webinar app, we have brought in support for the following features: Dark theme. Organizer's chat. Emoji reactions. Recording consent prompt for attendees. Live answer on questions list. 1. Dark theme:

    • Unveiling the next iteration of Ask Zia in Zoho CRM: An all-new chat interface, conversation history, actions, and much more

      Your CRM assistant just leveled up. Zoho CRM's Ask Zia functionality now offers a more conversational and context-aware experience to help you not just understand your data, but act on it—all from one chat window. With its redesigned interface and expanded

    • Field of Lookup in CRM

      Last modified on 04/04/2023: Field of lookup is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. Hello All, We're thrilled to talk about a much-awaited enhancement to lookup fields—now

    • [Free webinar series] Get to know Deluge: Zoho’s powerful scripting language

      Hello Everyone, We are much elated to invite you all to our upcoming session in Zoho Deluge! Bringing on to your table - Get to know Deluge: Zoho’s powerful scripting language Understanding Deluge Zoho’s suite of applications offers robust solutions for

    • Next Page